for validation - text box and drop down menu

[drewrockshard]

I have a little problem. I have a drop down menu that contains various different entries. I am allowing the user to also have a text box right next to the drop down menu where they can specify a category (and it will insert it into the drop down menu for the next time). The text box, though is an issue for me.

The issue is, if the user types in an entry and the entry already excists in the drop down menu, I want a popup to say "Category already excists" or something like that. It's for validation, but I am wanting the javascript to check the drop down menu so that the same categories aren't entered multiple times.

Is there a way in javascript i can validate these so this does not happen. Thanks.

[Dukane]

Sure, when someone enters, call a function which iterates through each item in the list. If the entry in the textbox matches one of the items in the list, the throw up the error message. If not, allow it to be added.

[drewrockshard]

You have any sample code? Something to start me along? I know what you mean, like a for() loop of some sort, right?

[Dukane]

Yes, you could use a for loop to iterate through each item in the array of items in the list box. Each time, look to see if that particular item equals the contents of the textbox. If it does, stop and give an error message. But if the loop completes, then allow the contents of the textbox to be added to the listbox and continue on with your script.

[drewrockshard]

Alright, having some issues :(.

Here's what I have so far. Here's the form:

<form method="post" action="doit.php" name="content">
    <p><label id="datBegin">Date</label><br />
        <input type="text" id="date" name="date" value="<?php echo date('F d, Y'); ?>" />
        <input type="hidden" id="time" name="time" value="<?php date('H:i:s'); ?>" /></p>
    <p><label id="category">Category</label><br />
    <select id="category" name="category" onchange="changeNewCat()">
        <optgroup label="Please Pick">
        <option value="0">No Category Selected</option>
        <?php
            $i=0;
            while ($i<$num) {
                $row = mysql_fetch_assoc($result);
                echo "<option value=".$row['category'].">".$row['category']."</option>";
                $i++;
            }
        ?>
        </optgroup>
    </select> OR
        <input type="text" id="newcat" name="newcat" /> (Add a new category)</p>
            <p><label id="daily">Content</label><br />
               <textarea id="daily" name="daily"></textarea></p>
        <input type="submit" value="Create Daily" onclick="return checkForm(this.form)" />
</form>

First off, don't worry about the PHP. This all works. Also, the onchange="changeNewCat()" works great too.

Let me give you javascript before I go further into this:

// Trying to code up a duplicate stopper!!
var dropdowns = document.getElementsByName("category");
var newCatDrop = document.forms[0].newcat.value;
for(var i = 0; i < dropdowns.value; i++) {
    if (i == newCatDrop) {
        alert("Sorry, no duplicates allowed.");
        return false;
    }
    else {
        // For debugging purposes, will remove later.
        alert("No Match");
        return false;
    }
}

The javascript just doesn't work. Theres is more to this. Also, don't worry about the part that says onclick="return checkForm(this.form)" . The above javascript is a snippet, as this all works, except for the javascript stated above.

Am I not iterating properly. If someone could guide me or show me a little better way of getting this done, please do show.

I believe this is the last part of the validation of this form and it will be complete.

Any thoughts?

[Dukane]

Your iteration is not correct.

Look at your if statement. if (i == newCatDrop).
But what is i? i is an integer variable that is counting the number of times you go through the loop, not the indexes in the drop-down list.

What you want to do is put all of the options into an array. Then, cycle through that array and see if each one is NOT what the user entered. If it is, display an error message. If not, then add it to your list. You're on the right track, you just need to make some minor changes.

[drewrockshard]

How exactly would I do that? I'm pretty good with programming - when it comes to loops - I fall... hard.

I'll try my best, best if you could help me out, that would be great.

[drewrockshard]

Now I have this:

// Trying to code up a duplicate stopper!!
        var dropdowns = document.getElementsByName("category");
        var newCatDrop = document.forms[0].newcat.value;
        for(var i = 0; i < dropdowns.length; i++) {
                if (dropdowns[i] == newCatDrop) {
                        alert("Match");
                        return false;
                }
                else {
                        alert("No Match");
                        return false;
                }
        }

It now pops up with "no match" although, this is a match. So it works, but it doesn't work correctly :( .. any help?

[Dukane]

All of the options in the select element need to be placed into an array. Your code here doesn't do that. Instead, you're looking to see each time through the loop if the select box equals what was typed in. That's why it always comes out false.

[drewrockshard]

Could you possibly help out. Telling me and showing me are two different things. I have exhausted all my javascript skills (which isn't much).

Here is my newest attempt:

var dropdowns = document.forms[0].category;
        var newCatDrop = document.forms[0].newcat.value;
        for (var i = 0;i < dropdowns.length;i++) {
                if (dropdowns.options[i].value == newCatDrop) {
                        alert("Match");
                        return false;
                }
                else {
                        alert("Not A Match");
                        return false;
                }
        }

This almost works, but it doesn't. If you type in 0 (the value of the initial drop down menu option) it works. If you type in "drew" (no quotes) - which is one of the values/options of the drop down menu - does not work.

This is not what I want.

You think someone could manipulate my code to get something working? Let me know. Thanks.

[Dukane]

Now here your problem is that as soon as one of those conditions is met, you return something. When you return something, your function is over and it does not continue.

So, here is code that does work. See if you can manipulate it to fit your needs.

<html>
    <head>
        <script language="javascript" type="text/javascript">
            function validate() {
                dropdowns = document.forms['theForm'].category;
                newCatDrop = document.forms['theForm'].newcat.value;
                isThere = false;

                for (i = 0; i < dropdowns.options.length; i++) {
                    if (dropdowns.options[i].value == newCatDrop) {
                        alert(newCatDrop + " is in the list!");
                        isThere = true;
                    }
                }        //close for

                return isThere;
            }            //close function
        </script>
    </head>
    <body>
    <form name="theForm" action="#" method="post" onsubmit="return validate()">
        New category: <input type="text" name="newcat"><br>
        Select category: <select name="category">
            <option value="0">0</option>
            <option value="9">9</option>
            <option value="12">12</option>
            <option value="23">23</option>
            <option value="cats">cats</option>
            <option value="dogs">dogs</option>
        </select>
        <br>
        <input type="submit" name="submitButton" value="Submit">
    </form>
    </body>
</html>

[drewrockshard]

I appriciate you taking the time to help me out the past few days. The funny thing is, the javascript was sooo close to what you gave me. So, thank you alot. It worked. Here's the new javascript snippet:

var dropdowns = document.forms[0].category;
        var newCatDrop = document.forms[0].newcat.value;
        for (var i = 0;i < dropdowns.options.length;i++) {
                if (dropdowns.options[i].value == newCatDrop) {
                        alert("Please enter a value that is not already in our database.");
                        return false;
                }
        }

Thanks again.

[drewrockshard]

Oh, and here's another variation:

var dropdowns = document.forms[0].category;
        var newCatDrop = document.forms[0].newcat.value;
        for (var i = 0;i < dropdowns.options.length;i++) {
                if (dropdowns.options[i].value.toLowerCase() == newCatDrop.toLowerCase()) {
                        alert("Please enter a value that is not already in our database.");
                        return false;
                }
        }

I added the toLowerCase() code so that it would dynamically convert the strings to lowercase so that the user can't put in "Drew", "DREW", "drew", or "DrEw", etc. This makes sure that the user can only put one version of "Drew" in. In other words, only one entry (non-case sensitive).

Thought I'd share that bit.

[Dukane]

Glad I could be of help...you were so close which is why I waited to the end to give a possible solution because you were on the right track the whole time and you'll learn it better if you figure it out instead of letting me figure it out for you!

The best thanks is adding to my DaniWeb rep!