How can I store elements into an array, and check to see if a value exists?

I am creating a form that allows you to sign up for alerts on our website, by allowing a user to input the keywords into a form.

I have setup the validation, although the jquery I have used seems somewhat convoluted even to me, it works!

I am now trying to setup the form so that when you input a keyword, it checks to see if you have already put in that keyword.

e.g. I've added "cloud" to my list, and I accidentally try to add it again, the form should alert me and not allow me to add it to my list.

I think the solution would be to store the keyword in a "KeywordList" array, then cycle through using a for each loop like in PHP:

foreach (KeywordList as KeywordListArrayElement){
         if(KwValue == KeywordListArrayElement){
           alert ("The keyword '+KwValue+' has already been added");
           return false;
         }
}

But I don't know how to store the Keyword in the array or fetch it from it

here is my html:

    <form action="" method="get" name="Test Form" target="_self" id="alerts_form" dir="ltr" lang="en">
        <fieldset id="alerts_options">
            <label for="email_address">Email: </label>
            <input type="text" id="email_address" name="email_address" tabindex="1" autofocus="autofocus" autocomplete="on" required="required" value="" /><div class="email-alert form_val" style="display: none;">Please enter a valid email address</div><br />
            <label for="keywords">Keyword(s): </label>
            <input type="text" id="keywords" name="keywords[]" tabindex="2" autocomplete="on" value="" />
            <button id="addKeyword" name="addKeyword" value="">+</button><br />
            <div id="KeywordList"></div>
            <div class="keyword-alert form_val" style="display: none;">Please input at least one keyword</div>
            <label for="frequency">Frequency: </label>
            <select tabindex="3" id="frequency" name="frequency"><br />
            <optgroup>
            <option selected="selected" value=""></option>
            <option value="1">Daily</option>
            <option value="7">Weekly</option>
            <option value="30">Monthly</option>
            </optgroup>
            </select><div class="frequency-alert form_val" style="display: none;">Please make a selection</div><br />
            <input type="hidden" id="Step" name="Step" value="2" />
            <div class="clear"></div>
            <button class="alert_button" type="submit" id="submit" name="UpdateAlertOption" value="Unconfirmed">Submit</button><br />
            <button class="alert_button" type="submit" name="UpdateAlertOption" value="Delete">Delete</button><br />
            <button class="alert_button" type="submit" name="UpdateAlertOption" value="Delete All">DeleteAll</button>
            <input type="hidden" value="" name="" class="KwdBox" />
        </fieldset>
    </form>

Here is my JQuery:

<script type='text/javascript'>
jQuery(document).ready(function($){

    $("#addKeyword").click(function(event) {
    event.preventDefault();
    var KwValue = $("#keywords").val();
    if($("#keywords").val()==""){
        alert('Please input a keyword');
        }

        else
        {
            var squareBrackets = "[]";

                $("#keywords").css('background-color', '#FFFFFF');
                $("#alerts_options .keyword-alert").hide();
            $('<input type="text" class="KwdBox" name="keywords'+squareBrackets+'" value="'+KwValue+'" tabindex="2" autocomplete="on" required="required"/>')
            .appendTo('#KeywordList');
            $("#keywords").val("");
            $(".KwdBox").click(function(event){
                event.preventDefault();
                $(this).remove();

            });
        }
    });

    $("#alerts_options .email-alert").hide();
    $("#alerts_options .keyword-alert").hide();
    $("#alerts_options .frequency-alert").hide();

    $("#submit").click(function(){


        var frequency = 1;
        if($("[name=frequency]").val()==""){
        frequency = 0;
        }else{
        frequency = 1;
        }
        var keyword = 1;
        if($("#keywords").val()=="") {
        keyword = 0;
        }
        if($(".KwdBox").val() >""){
        keyword = 1;
        }
        var email = 1;
        if(!checkEmail($("[name=email_address]").val())){
        email = 0;
        }else{
        email = 1;
        }
        //frequency empty, email empty, kw empty
        if(frequency == 0 && email == 0 && keyword == 0){
            $("#keywords").css('background-color', 'rgb(255, 232, 232)');
            $("[name=email_address]").css('background-color', 'rgb(255, 232, 232)');
            $("[name=frequency]").css('background-color', 'rgb(255, 232, 232)');        
            $("#alerts_options .form_val").show();
            return false;
        }
        else{
            $("#alerts_op开发者_运维问答tions .form_val").hide();
        } //frequency empty, email on, kw empty
        if(frequency == 0 && email > 0 && keyword == 0){
            $("#keywords").css('background-color', 'rgb(255, 232, 232)');
            $("[name=email_address]").css('background-color', '#FFFFFF');
            $("[name=frequency]").css('background-color', 'rgb(255, 232, 232)');    
            $("#alerts_options .email-alert").hide();
            $("#alerts_options .keyword-alert").show();
            $("#alerts_options .frequency-alert").show();
            return false;
        }//frequency empty, email on, kw on
        if(frequency == 0 && email > 0 && keyword > 0){
            $("#keywords").css('background-color', '#FFFFFF');
            $("[name=email_address]").css('background-color', '#FFFFFF');
            $("[name=frequency]").css('background-color', 'rgb(255, 232, 232)');
            $("#alerts_options .email-alert").hide();
            $("#alerts_options .keyword-alert").hide();
            $("#alerts_options .frequency-alert").show();
            return false;
        }//frequency on, email on, kw empty
        if(frequency > 0 && email > 0 && keyword == 0){
            $("#keywords").css('background-color', 'rgb(255, 232, 232)');
            $("[name=email_address]").css('background-color', '#FFFFFF');
            $("[name=frequency]").css('background-color', '#FFFFFF');
            $("#alerts_options .email-alert").hide();
            $("#alerts_options .keyword-alert").show();
            $("#alerts_options .frequency-alert").hide();
            return false;
        }
        if(frequency > 0 && email == 0 && keyword > 0){
            $("#keywords").css('background-color', '#FFFFFF');
            $("[name=email_address]").css('background-color', 'rgb(255, 232, 232)');
            $("[name=frequency]").css('background-color', '#FFFFFF');
            $("#alerts_options .email-alert").show();
            $("#alerts_options .keyword-alert").hide();
            $("#alerts_options .frequency-alert").hide();
            return false;
        }
        if(frequency == 0 && email == 0 && keyword > 0){
            $("#keywords").css('background-color', '#FFFFFF');
            $("[name=email_address]").css('background-color', 'rgb(255, 232, 232)');
            $("[name=frequency]").css('background-color', 'rgb(255, 232, 232)');
            $("#alerts_options .email-alert").show();
            $("#alerts_options .keyword-alert").hide();
            $("#alerts_options .frequency-alert").show();
            return false;
        }
            if(frequency > 0 && email == 0 && keyword == 0){
            $("#keywords").css('background-color', 'rgb(255, 232, 232)');
            $("[name=email_address]").css('background-color', 'rgb(255, 232, 232)');
            $("[name=frequency]").css('background-color', '#FFFFFF');
            $("#alerts_options .email-alert").show();
            $("#alerts_options .keyword-alert").show();
            $("#alerts_options .frequency-alert").hide();
            return false;
        }

    });
});
</script>

You don't have to use an array. Use a map/associative-array instead. You can do something like this:

var keywords = {};

Then if your keyword is in the variable keyword, you can do:

keywords[keyword] = true;

So if you had the keyword cloud, what you basically have is:

keywords['cloud'] = true;

To check for its existence, all you have to do is:

if(keywords[keyword]) {
  ...
}

Now to add your keywords to the list, you can do something like this:

var KwValue = $("#keywords").val();

var keywordArray = KwValue.split(/\s*,\s*/); //assuming that your keywords are separated by commas:

for(var i = 0; i < keywordArray.length; i++) {
    var keyword = keywordArray[i];

    if(!keywords[keyword]) {
       keywords[keyword] = true;
       ...
    }
}

This is O(n), but it is better than the O(n²) you would get with an array.

The simplest method, and least expensive is to use an array (which you are), but put the keywords into the array as the array's key's:

var keywords = {}; // not really an array, but we'll just pretend it is

keywords['hello'] = true;
keywords['there'] = true;
etc...

After that, checking for a keyword's existence is a simple matter of

if (keywords[yourvarhere]) {
  ... it exists
}

which saves you the whole overhead of searching the array each time you need to check for a particular keyword.