フォーム要素の値をjavascriptを使用してクラス別に検索する

Question

JavaScriptを使用して、フォーム要素（入力ボックスとドロップダウンリスト）の重複値をクラスに基づいて検索しようとしています。これは私が持っているものですが、動作していません。これを行うより良い方法はありますか？私はjavascriptには新しく、これを別の投稿の解決策として見ました。

EDIT：内部関数のみが呼び出されません。私がそれらを壊すと、彼らは呼び出される。どうしてこれなの？

<%@ taglib prefix="s" uri="/struts-tags"%> 

<s:include value="Header.jsp"> 
<s:param name="pageScript"> 
     <script type="text/javascript"> 

    function checkForDuplicates() { 
       var hasDuplicates = false; 
        $('.class_name').each(function() { 
         var inputsWithSameValue = $(this).val(); 
         hasDuplicates = $('.class_name').not(this).filter(function() { 
           return $(this).val() === inputsWithSameValue; 
         }).length > 0; 
         if (hasDuplicates){ 
         alert("cannot have duplicates") 
        } 
        }); 

      } 

     </script> 
    </s:param> 
</s:include> 

<div id="container-content"> 
    <div id="content"> 
     <s:form action="someAction" theme="simple" method="get" id="theForm"> 

         <s:textfield theme="simple" class="class_name"/> 

         <s:textfield theme="simple" class="class_name" /> 

         <s:select headerKey="" headerValue="Select Value" 
         list="values" listKey="value" class="class_name" size="1"/> 

      <s:submit action="" value="Save" onclick="return checkForDuplicates()"/> 

     </s:form> 

     <%-- end content --%> 
    </div> 
    <%-- end container-content --%> 
</div> 

<s:include value="Footer.jsp" /> 

私はこれらをインポートしています：

<script src="scripts/jquery-1.4-min.js"></script> 
<script src="scripts/jquery.maskedinput.min.js" type="text/javascript"></script> 
<script src="scripts/jquery.supertextarea.min.js" type="text/javascript"></script> 

問題は何ですか？ .eachの後に最初の内部関数の中にブレークポイントを置いていますが、決してそこには入りません。

おかげ

Answer 1

これはROXの答えに基づいて、しかし、私は、次の要素の入力は第二の機能を必要とせずに、アレイ内にある場合は、我々がチェックすることができると思います。

function checkDuplicates() { 
    // get all input elements 
    var $elems = $('.class_name'); 

    // we store the inputs value inside this array 
    var values = []; 
    // return this 
    var isDuplicated = false; 
    // loop through elements 
    $elems.each(function() { 
    //If value is empty then move to the next iteration. 
    if(!this.value) return true; 
    //If the stored array has this value, break from the each method 
    if(values.indexOf(this.value) !== -1) { 
     isDuplicated = true; 
     return false; 
    } 
    // store the value 
    values.push(this.value); 
    }); 
return isDuplicated;  
} 

入力がコードのどこかに空白であるかどうかを確認することができますが、それはあなた次第です。

編集：https://jsfiddle.net/65ss1cxj/

Answer 2

あなたは、あなたの関数がはるかに優れて作ることができ、すべてのあなたの最初のループ内であなたの要素をループする必要はありません。

すべての入力値を配列に格納してから、その配列を一意の値にしてその長さを比較するだけです。

// a function to make an array values unique 
 
// http://stackoverflow.com/a/840849/3971911 
 
function eliminateDuplicates(arr) { 
 
    var i, 
 
     len=arr.length, 
 
     out=[], 
 
     obj={}; 
 

 
    for (i=0;i<len;i++) { 
 
    obj[arr[i]]=0; 
 
    } 
 
    for (i in obj) { 
 
    out.push(i); 
 
    } 
 
    return out; 
 
} 
 

 

 
function checkDuplicates() { 
 
    // get all input elements 
 
    var $elems = $('.class_name'); 
 
    
 
    // we store the inputs value inside this array 
 
    var values = []; 
 
    
 
    // loop through elements 
 
    $elems.each(function() { 
 
    // if the value is empty, just pass it 
 
    if (this.value == '') { 
 
     return true; 
 
    } 
 
    
 
    // store the value 
 
    values.push(this.value); 
 
    }); 
 
    
 
    // make the values array unique 
 
    var uniqueValues = eliminateDuplicates(values); 
 
    
 
    // return false if the unique array length is not equal to the original array 
 
    return uniqueValues.length == values.length; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<form> 
 
    <div><input type="text" class="class_name" /></div> 
 
    <div><input type="text" class="class_name" /></div> 
 
    <div><input type="text" class="class_name" /></div> 
 
    <div><input type="text" class="class_name" /></div> 
 
    
 
    <input type="submit" value="Go" onclick="return checkDuplicates()" /> 
 
</form>