Array.foreach ne récupère que val() du dernier ID d'entrée avec le code

Question

Veuillez m'aider à comprendre pourquoi seul le dernier identifiant d'entrée obtient sa valeur ajoutée à l'entrée id = # attr3 avec le bouton.

J'ai besoin des deux entrées dans le div pour avoir leurs valeurs placées dans l'entrée à l'extérieur du div séparé par une virgule (,). J'ai fait un violon https://jsfiddle.net/dc6v6gjd/1/. Merci

<div id ="candy"> 
    <input type="text" id="attr1" name="emailAddress" value=""> 
    <input type="text" id="attr2" name="emailAddress" value=""> 
</div> 
    <input type="text" id="attr3" name="username" value=""> 

$(document).ready(function() { 

    var text = $("#candy :input").map(function() { 
       return this.id; 
         }).get();   
     var attr = []; 

     for (i=0; i<text.length; i++) { 
       attr.push('#'+ text[i]); 
       } 
     var mat = attr.join(", "); 

    $(mat).keyup(function(){ 
     update(); 

    function update() { 
     attr.forEach(function(index, i){ 
     // alert(i); 
      $("#attr3").val($(attr[i]).val() + ",");   

     }); 
     }  
    }); 

}); 

Answer 1

La raison en est que vous surchargeons la valeur de attr3 à chaque itération de forEach. Vous pouvez plutôt utiliser join pour obtenir la valeur.

par exemple.

function update() { 
    var val = attr 
    .map(function(a) { 
     return $(a).val(); 
    }) 
    .join(","); 

    $("#attr3").val(val); 
} 

Cela étant dit, je serais probablement aller avec une solution plus simple comme ceci.

// set the keyup event handler and add all inputs to an array. 
 
var inputs = $("#candy :input").keyup(function() { 
 
    update(); 
 
}).get(); 
 

 
// read all input values into comma separated string and update attr3 
 
function update() { 
 
    var val = inputs.map(function(i) { 
 
    return $(i).val(); 
 
    }).join(","); 
 
    
 
    $("#attr3").val(val); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="candy"> 
 
    <input type="text" id="attr1" name="emailAddress" value=""> 
 
    <input type="text" id="attr2" name="emailAddress" value=""> 
 
</div> 
 
<input type="text" id="attr3" name="username" value="">

Mise à jour: soutien entrées ajoutées dynamiquement.

$(document).on("keyup", "#candy :input", function() { 
 
    update(); 
 
}); 
 

 
function update() { 
 
    var val = $("#candy :input").get().map(function(i) { 
 
    return $(i).val(); 
 
    }).join(","); 
 

 
    $("#attrFinal").val(val); 
 
} 
 

 
var count = 3; 
 
$("#add").click(function() { 
 
    $("#candy").append("<input type='text' id='attr" + count++ + "' name='emailAddress' />"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="candy"> 
 
    <input type="text" id="attr1" name="emailAddress" value=""> 
 
    <input type="text" id="attr2" name="emailAddress" value=""> 
 
</div> 
 
<input type="text" id="attrFinal" name="username" value=""> 
 

 
<button id="add">Add New</button>