2011-08-10 47 views
2

我正在创建一个表单,允许您在我们的网站上注册警报,方法是允许用户将关键字输入到表单中。如何将元素存储到数组中,并检查值是否存在?

我已经设置了验证,虽然我用过的jquery看起来有些复杂,即使对我来说也行得通!

我现在试图设置表单,以便当您输入关键字时,它会检查您是否已经放入该关键字。

例如我在列表中添加了“云”,我不小心尝试再次添加它,表单应该提醒我,不允许我将它添加到我的列表中。

我认为,解决办法是通过使用for each循环就像在PHP中的关键字存储在“关键字列表”数组,然后循环:

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

但我不知道如何保存阵列中的关键字或从

这里取这是我的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> 

这里是我的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_options .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> 
+1

这是一件好事,你不需要在表单中添加其他输入或两个输入,因为你需要更多的'if'语句。 –

+1

使用指数 http://stackoverflow.com/questions/143847/best-way-to-find-an-item-in-a-javascript-array –

+0

我知道克里斯,它不会那么糟糕如果整个表格不包含必填字段,如果有更好的方法可以做到这一点,请随时提出建议,因为它不能很好地处理if语句的数量 –

回答

3

您不必使用数组。改用地图/关联数组。你可以做这样的事情:

var keywords = {}; 

然后如果您的关键字是变量keyword,你可以这样做:

keywords[keyword] = true; 

所以,如果你有关键字cloud,什么你基本上是:

keywords['cloud'] = true; 

要检查它的存在,所有你需要做的是:

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

我们关键字添加到列表中,你可以做这样的事情:

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; 
     ... 
    } 
} 

这是O(n),但它比Ø更好的(N ),你会得到与一个数组。

+1

谢谢Vivin,我最初做了在.click()函数中放入'var keywords = {}'的小学生错误,导致它每次都被清除!幸运地意识到这一点,并没有太长时间才能实现它的工作。 –

1

最简单的方法,和最便宜的方法是使用一个数组(你是),但把关键字放入数组作为数组的关键的:

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

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

之后,检查关键字的存在是一个简单的问题

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

它可以节省您每次需要检查特定关键字时搜索数组的全部开销。