Einfügen von Textfeldwerten in Array in Jquery/Javascript

Question

Ich habe ein Textfeld, in dem Benutzer einige Werte einzeln hinzufügen können. Jetzt, wenn der Benutzer auf die Schaltfläche Hinzufügen klicke, möchte ich den Wert eingeben, der Benutzer nacheinander in das Array eingeben. Ich mache das, aber ich bekomme ein falsches Ergebnis. Die Länge des Arrays wird nicht erhöht. Sagen Wenn ich 2 Werte eingegeben habe, dann bleibt die Länge des Arrays 1. Ich weiß nicht, was der Fehler ist. Unten ist mein Code: -

HTML

<input type="text" class="form-control input_add_prod_grp" name="input_add_prod_grp" placeholder="Enter Group Name" /> 

<button class="btn default btn-xs btn_add_input_prod_grp" name="btn_add_input_prod_grp" id="add_group">Add</button> 

Javascript

$(".btn_add_input_prod_grp").click(function(){ 

var add_input_grp = $("input[name$='input_add_prod_grp']").val(); 

var newArray = []; 
newArray.push('Ungrouped'); 
$("input[name='input_add_prod_grp']").each(function() { 
    newArray.push($(this).val()); 

}); 
console.log(newArray.length); 
}); 

Nun, wenn ich mehr als 1 Wert eingeben dann Länge des Arrays bleiben 1. Ich glaube nicht, weiß warum ... Bitte helfen Sie mir .. Vielen Dank im Voraus ..

Answer 1

Nehmen Sie Array außerhalb:

var newArray = []; 
$(".btn_add_input_prod_grp").click(function(){ 

    var add_input_grp = $("input[name$='input_add_prod_grp']").val(); 


    newArray.push(add_input_grp); 
    console.log(newArray.length); 
}); 

JSFIDDLE: https://jsfiddle.net/c19u6fa2/1/

Answer 2

var newArray = []; 
 
$(".btn_add_input_prod_grp").click(function() { 
 

 
    var add_input_grp = $("input[name$='input_add_prod_grp']").val(); 
 

 
    newArray.push('Ungrouped'); 
 
    $("input[name='input_add_prod_grp']").each(function() { 
 
    newArray.push($(this).val()); 
 

 
    }); 
 
    console.log(newArray); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="form-control input_add_prod_grp" name="input_add_prod_grp" placeholder="Enter Group Name" /> 
 

 
<button class="btn default btn-xs btn_add_input_prod_grp" name="btn_add_input_prod_grp" id="add_group">Add</button>

Setzen Sie die Initialisierung außerhalb des Click-Ereignis. Inside Click Event wird immer wieder neu initialisiert.

Answer 3

Sie machen newArray leer, wenn Sie auf die Schaltfläche klicken, so dass die alten Werte aus diesem Array löschen, um dies zu vermeiden, müssen Sie das außerhalb der Funktion verschieben, mit Standardwerten haben Sie nur ein Eingabefeld, das Sie nicht brauchen schreiben Sie jeder Sie können direkt diesen Wert von Ihrer Variablen

  var newArray = ['Ungrouped']; 

      $(".btn_add_input_prod_grp").click(function(){ 

       var add_input_grp = $("input[name$='input_add_prod_grp']").val(); 

       newArray.push(add_input_grp); 

       console.log(newArray.length); 

      });