validate a drop down list using javascript?

Question

<FORM NAME="form1" METHOD="POST" ACTION="survey.php">
    <P>q1: How do you rate Ahmed Ebaid?
        <P>
            <INPUT TYPE='Radio' Name='q1' value='1' id='q1'>1
            <P>
                <INPUT TYPE='Radio' Name='q1' value='2' id='q1'>2
                <P>
                    <INPUT TYPE='Radio' Name='q1' value='3' id='q1'>3
                    <P>
                        <INPUT TYPE='Radio' Name='q1' value='4' id='q1'>4
                        <P>
                            <INPUT TYPE='Radio' Name='q1' value='5' id='q1'>5<span style='color:red' id='radio_error'></span><pre class='xdebug-var-dump' dir='ltr'><small>string</small> <font color='#cc0000'>', 1'</font> <i>(length=3)</i>
</pre>
                            <p>q2: Who is your best best friend?</BR>
                                <select name='q21' id='q2'>
                                    <option value='0'>Select a Name</option>
                                    <option value='2001'>Ahmed Ebaid</option>
                                    <option value='2002'>Jaida ElTayeby</option>
                                    <option value='2003'>Farida Ebaid</option>
                                    <option value='2005'>Kenny Andersen</option>
                                    <option value='2006'>Nadine Saad</option>
                                    <option value='2007'>AbdElHai Ebaid</option>
                                    <option value='2008'>Salwa AbdElAal</option>
                                </select>
                                <select name='q22' id='q2'>
                                    <option value='0'>Select a Name</option>
                                    <option value='2001'>Ahmed Ebaid</option>
                                    <option value='2002'>Jaida ElTayeby</option>
                                    <option value='2003'>Farida Ebaid</option>
                                    <option value='2005'>Kenny Andersen</option>
                                    <option value='2006'>Nadine Saad</option>
                                    <option value='2007'>AbdElHai Ebaid</option>
                                    <option value='2008'>Salwa AbdElAal</option>
                                </select>
                                <select name='q23' id='q2'>
                                    <option value='0'>Select a Name</option>
                                    <option value='2001'>Ahmed Ebaid</option>
                                    <option value='2002'>Jaida ElTayeby</option>
                                    <option value='2003'>Farida Ebaid</option>
                                    <option value='2005'>Kenny Andersen</option>
                                    <option value='2006'>Nadine Saad</option>
                                    <option value='2007'>AbdElHai Ebaid</option>
                                    <option value='2008'>Salwa AbdElAal</option>
                                </select>
                                <P>q3: How do you rate AbdElHai Ebaid?
                                    <P>
                                        <INPUT TYPE='Radio' Name='q3' value='1' id='q3'>1
                                        <P>
                                            <INPUT TYPE='Radio' Name='q3' value='2' id='q3'>2
                                            <P>
                                                <INPUT TYPE='Radio' Name='q3' value='3' id='q3'>3
                                                <P>
                                                    <INPUT TYPE='Radio' Name='q3' value='4' id='q3'>4
                                                    <P>
                                                        <INPUT TYPE='Radio' Name='q3' value='5' id='q3'>5<span style='color:red' id='radio_error'></span>
                                                        <p>q4: Who is your best best friend?</BR>
                                                            <select name='q41' id='q4'>
                                                                <option value='0'>Select a Name</option>
                                                                <option value='2001'>Ahmed Ebaid</option>
                                                                <option value='2002'>Jaida ElTayeby</option>
                                                                <option value='2003'>Farida Ebaid</option>
                                                                <option value='2005'>Kenny Andersen</option>
                                                                <option value='2006'>Nadine Saad</option>
                                                                <option value='2007'>AbdElHai Ebaid</option>
                                                                <option value='2008'>Salwa AbdElAal</option>
                                                            </select>
                                                            <select name='q42' id='q4'>
                                                                <option value='0'>Select a Name</option>
                                                                <option value='2001'>Ahmed Ebaid</option>
                                                                <option value='2002'>Jaida ElTayeby</option>
                                                                <option value='2003'>Farida Ebaid</option>
                                                                <option value='2005'>Kenny Andersen</option>
                                                                <option value='2006'>Nadine Saad</option>
                                                                <option value='2007'>AbdElHai Ebaid</option>
                                                                <option value='2008'>Salwa AbdElAal</option>
                                                            </select>
                                                            <select name='q43' id='q4'>
                                                                <option value='0'>Select a Name</option>
                                                                <option value='2001'>Ahmed Ebaid</option>
                                                                <option value='2002'>Jaida ElTayeby</option>
                                                                <option value='2003'>Farida Ebaid</option>
                                                                <option value='2005'>Kenny Andersen</option>
                                                                <option value='2006'>Nadine Saad</option>
                                                                <option value='2007'>AbdElHai Ebaid</option>
                                                                <option value='2008'>Salwa AbdElAal</option>
                                                            </select>
                                                            <select name='q44' id='q4'>
                                                                <option value='0'>Select a Name</option>
                                                                <option value='2001'>Ahmed Ebaid</option>
                                                                <option value='2002'>Jaida ElTayeby</option>
                                                                <option value='2003'>Farida Ebaid</option>
                                                                <option value='2005'>Kenny Andersen</option>
                                                                <option value='2006'>Nadine Saad</option>
                                                                <option value='2007'>AbdElHai Ebaid</option>
                                                                <option value='2008'>Salwa AbdElAal</option>
                                                            </select>
                                                            <P>q5: How do you rate the attitude of Farida Ebaid?
                                                                <P>
                                                                    <INPUT TYPE='Radio' Name='q5' value='1' id='q5'>1
                                                                    <P>
                                                                        <INPUT TYPE='Radio' Name='q5' value='2' id='q5'>2
                                                                        <P>
                                                                            <INPUT TYPE='Radio' Name='q5' value='3' id='q5'>3
                                                                            <P>
                                                                                <P><span style='color:red' id='radio_error'></span>
                                                                                    <p>
                                                                                        <INPUT TYPE='hidden' Name='h2' VALUE=', 1'>
                                                                                        <p>
                                                                                            <INPUT TYPE="Submit" Name="Submit1" VALUE="Click here to vote">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
    $(function(){
        if ($('form').length > 0) {
            $('form').submit(function(e){
                var answers = '';
        var len = 5;
                $('input[type=Radio]:checked').each(function() {
                    if (answers !== '') {
                        answers += ',';
                    }
                    answers += $(this).val();
            //alert(answers);
                })
                $('input[name=h2]').val(answers);       
        for (var i = 1; i <= len; i++ ) {
            var qNum = 'q'+i;
            //document.write(qNum);
            if ($('#'+qNum+'').is(':radio')) {
                if (($('input[name='+qNum+']:checked').length == 0) ){
                    alert("No Selection is made for "+ qNum);
                    return false;
                }
            }
            else if ($('#'+qNum+'').is('select')) {
                var j = 1;
                var nominatefriend = qNum+j;
                alert (nominatefriend);
                var check = '';
                var chosen = new Array();
                while (check = document.getElementsByName("nominatefriend")) {
                    alert(check);
                    var len = document.form1[nominatefriend].length;
                    alert (len);
                    for (var i = 0; i < len; i++) {
                        if (document.form1[nominatefriend[i]].selected) {
                            chosen[j] = document.form1.nominatefriend[i].value;
                            alert (chosen[j]);
                        }
                    }
                    j++;
                    nominatefriend = qNum+j;
                    alert (nominatefriend);
                }
            }
        }   // for loop        
            }); // form submit function

        }// form.length
    })//function

When trying to execute the above code, I get the following error: TypeError: document.form1[nominatefriend[i]].selected. I'm using nominatefriend[i] to iterate through all options, however this outputs nothing to me.

another, you have unclosed paragraph tags in what seems is an attempt to create line breaks. — Charles380
– Charles380, Commented Aug 7, 2013 at 19:42
@charles380 even though the drop down lists are the same...., also I'm using different names. Isn't that enough — Ahmed Ebaid
– Ahmed Ebaid, Commented Aug 7, 2013 at 19:44
@Charles380, this code might need some clean up. However, It is working fine except for the syntax of document.form1[nominatefriend[i]].selected — Ahmed Ebaid
– Ahmed Ebaid, Commented Aug 7, 2013 at 19:46

UweB · Accepted Answer · 2013-08-07 19:57:25Z

1

You declare a variable like this, so it's a number (integer)

var nominatefriend = qNum+j;

Yet you access it like an array:

document.form1[nominatefriend[i]].selected

For the two-dimensional array, you'd need

document.form1[nominatefriend][i].selected

However, also pay attention to the comments, especially the one about duplicate IDs in a document.

answered Aug 7, 2013 at 19:57

UweB

4,1102 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahmed Ebaid Over a year ago

thank you so much. For the duplicated IDs is it a problem when having it for a group of combo boxes that are the same. If yes, what could be a better solution for combo boxes created dynamically.

Collectives™ on Stack Overflow

validate a drop down list using javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related