2011-08-10 83 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 
} 

它可以節省您每次需要檢查特定關鍵字時搜索數組的全部開銷。