Problems with simple Javascript form validation

Question

I'm working on putting together a multi-page set of forms that are interlinked by a session and use Javascript for form validation whenever each section is submitted. My first form is working fantastically. My second one, not so much. It's a dynamically created form that depends on the previous form for the number of drop down boxes (between 1 and 20) that are populated from a database. I will spare you all the query code to create the array that fills in my dropdowns and get straight to the form validation script and then the form itself.

The validation script from the head without the <script> tags:

function validateForm()
{
    var count = <?php echo $_SESSION['credits']; ?>;
    var i = 1;

    for (i = 1; i <= count; i++)
    {
        var j = i;
        for (j++; j <= count; j++)
        {
            var a = document.forms["addcredits"]["creditdropdown_"+i].value;
            var b = document.forms["addcredits"]["creditdropdown_"+j].value;
            if ((a == b) && (a != 0))
            {
                alert('Cannot select the same writer more than once.');
                return false;
            }           
        }
    } 

    var foundOne = false;
    var h = 1;

    while (h <= count && !foundOne)
    {
        if (document.forms["addcredits"]["creditdropdown_"+h].value != 0)
        {
            foundOne = true;
        }
        h++;
    }
    if (!foundOne)
    {
        alert('You must select at least one writer to credit.');
        return false;
    }
}

The form code:

<form id="addcredits" class="appintro" method="post" action="recordcheck.php" onsubmit="return validateForm()">
<div class="form_description">
    <h2>Song Title Submission</h2>
    <p>Step 2: Select writing credits for song title</p>
</div>
<ul>
    <?php 
        for ($i = 1; $i <= $_SESSION['credits']; $i++)
        { ?>
    <li id="li_<?php echo $i; ?>">
        <label class="description" for="creditdropdown_<?php echo $i; ?>">Song Credit #<?php echo $i; ?>:</label>
        <select "creditdropdown_<?php echo $i; ?>">
            <option value="0">Select a writer</option>
            <?php foreach ($writers as $key => $writer) { ?>
                <option value="<?php echo $key; ?>"><?php echo $writer; ?></option>
            <?php } ?>
        </select>
        <p class="guidelines" id="guidelines_<?php echo $i; ?>">Writer not found in database? Add them <a href="" target="_blank">here</a>.</p>
    </li>
    <?php } ?>
    <li id="buttons">
        <input type="hidden" name="form_id" value="2">
        <input type="hidden" name="submit" value="1">
        <input id="nextButton" class="button_text" type="submit" name="submit" value="Next">
    </li>
</ul>
</form>

Neither of the alert windows pop-up when I click Next and if I stick random debugg-ing alert windows into the validation script, the only ones I was able to get to show up were the ones I stuck at the beginning of the code. The furthest I got them to work was the first assignment of a after that, not even the debuggers would show. I'm assuming I'm doing something incorrectly in the assignment or there is something wrong with the values in the dropdown? Either way, I'm stumped.

Answer 1

I'd say the problem is in your HTML:

<select "creditdropdown_<?php echo $i; ?>"> 

You are specifying, presumably, the name attribute but you forgot the name= part. Try this:

<select name="creditdropdown_<?php echo $i; ?>">

In your validation function when you get to this line:

var a = document.forms["addcredits"]["creditdropdown_"+i].value;

You'll find you have an error because document.forms["addcredits"]["creditdropdown_"+i] is undefined because of the missing name= in the html and undefined can't have a .value property.

(By the way, debugging with alert() is useful very occasionally, but you're much better off using the built in developer tools in Chrome - just hit (I think) ctrl-shift-J to get the JS console - or download FireBug for Firefox. Or use IE's developer toolbar. Use console.log() instead of alert() , and/or step through the code until you find the problem.)