Suchen doppelte Werte in Formularelementen nach Klasse mit JavaScript

Question

Ich versuche, JavaScript zu verwenden, um doppelte Werte in Formularelementen (Eingabefelder und Dropdown-Menüs) basierend auf Klasse zu finden. Das habe ich, aber es funktioniert nicht. Gibt es einen besseren Weg, dies zu tun? Ich bin neu in Javascript und sah dies als eine Lösung für einen anderen Beitrag.

EDIT: Nur die inneren Funktionen werden nicht aufgerufen. Wenn ich sie austeile, werden sie angerufen. Warum ist das?

<%@ 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" /> 

Ich importieren diese:

<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> 

Was ist das Problem? Ich platziere einen Breakpoint innerhalb der ersten inneren Funktion nach der .each, aber es geht nie da hinein.

Dank

Answer 1

Diese auf ROX Antwort basiert, aber ich denke, wir überprüfen können, ob die Eingabe des nächsten Elements ohne die Notwendigkeit einer zweiten Funktion innerhalb des Arrays ist.

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

Sie können überprüfen, ob die Eingabe irgendwo in Ihrem Code leer ist, aber das liegt an Ihnen.

Edit: https://jsfiddle.net/65ss1cxj/

Answer 2

Ihre Ihre Funktion viel besser machen könnte, gibt es keine Notwendigkeit, eine Schleife über alle Ihre Elemente in Ihrem ersten Schleife.

Speichern Sie einfach alle Werte Ihrer Eingaben in ein Array, dann machen Sie dieses Array eindeutige Werte und vergleichen Sie deren Länge.

// 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>