Hinzufügen von Textbox auf Schaltfläche klicken Sie auf JavaScript

Question

Der folgende Code wird neues Textfeld auf Click-Ereignis hinzufügen, aber nach dem Klicken auf Senden Schaltfläche das neu hinzugefügte Textfeld nicht speichern. Bitte lösen Sie dieses Problem.

html

<table class="form-table"> 
    <tr valign="top"> 
     <td id="container_width"> 
      <input type="text" name="width" placeholder="" /> 
     </td> 

     <td id="container_height"> 
      <input type="text" name="height"placeholder="" /> 
     </td> 

     <td> 
      <input type="button" name="increment" id="increment" value="+"> 
     </td> 
    </tr> 

    <tr> 
     <td> 
      <input type="submit" value="Save settings"/> 
     </td> 
    </tr> 
</table> 


//javascript 

$('#increment').click(function(){ 
    var width = document.getElementById("container_width"); 
    var input; 
    input = document.createElement("input"); 
    input.type = "text"; 
    input.name ="width[]"; 
    var br = document.createElement("br"); 
    width.appendChild(br); 
    width.appendChild(input); 

    var height = document.getElementById("container_height"); 
    var input; 
    input = document.createElement("input"); 
    input.type = "text"; 
    input.name ="height[]"; 
    var br = document.createElement("br"); 
    height.appendChild(br); 
    height.appendChild(input); 
}); 

Answer 1

hinzufügen [] in die Ausgangstexteingaben Namen. Das sollte das Problem lösen:

<input type="text" name="width[]" placeholder="" /> 

und

<input type="text" name="height[]" placeholder="" /> 

Answer 2

bitte versuchen Sie es dieses

$('#increment').click(function(){ 
var html = "<input type="text" name = "newText" id = "textId"> 
$(this).append(html); 
}) 

Answer 3

Sie müssen zuerst Ihre Eingaben in einer Form wickeln. Ändern Sie dann, wie in anderen Antworten vorgeschlagen, die ursprüngliche Breite und Höhe in Breite [] und Höhe []. Da Sie bereits jQuery verwenden, können Sie die Elemente hinzufügen (nicht notwendig).

<form id="exampleForm"> 
<table class="form-table"> 



    <tr valign="top"> 
     <td id="container_width"> 
      <input type="text" name="width[]" placeholder="" /> 
     </td> 

     <td id="container_height"> 
      <input type="text" name="height[]" placeholder="" /> 
     </td> 

     <td> 
      <input type="button" name="increment" id="increment" value="+"> 
     </td> 
    </tr> 

    <tr> 
     <td> 
      <input type="submit" value="Save settings"/> 
     </td> 
    </tr> 

</table> 
</form> 

JSCode:

$(document).ready(function() { 
    $('#increment').click(function(){ 
     var width = $("#container_width"); 
     var input; 
     var input = $("<input>").attr("type","text").attr("name","width[]"); 
     var br = $("<br>"); 
     width.append(br); 
     width.append(input); 

     var height = $("#container_height"); 
     var input = $("<input>").attr("type","text").attr("name","height[]"); 
     var br = $("<br>"); 
     height.append(br); 
     height.append(input); 
    }); 
}); 

Beispiel Geige:

https://jsfiddle.net/1rh480kq/1/

Answer 4

HTML:

<table class="form-table" id="customFields"> 
<tr valign="top"> 
    <th scope="row"><label for="customFieldName"></label></th> 
    <td> 
     <input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> &nbsp; 
     <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> &nbsp; 
     <a href="javascript:void(0);" class="addCF">Add</a> 
    </td> 
</tr> 

JavaScript:

$(document).ready(function(){ 
$(".addCF").click(function(){ 
    $("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName"></label></th><td><input type="text" class="code" id="customFieldName" name="customFieldName[]" value="" placeholder="Input Name" /> &nbsp; <input type="text" class="code" id="customFieldValue" name="customFieldValue[]" value="" placeholder="Input Value" /> &nbsp; <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>'); 
}); 
$("#customFields").on('click','.remCF',function(){ 
    $(this).parent().parent().remove(); 
}); 
}); 

Versuchen This JsFiddle, können Sie dynamisch hinzufügen und Tabellenzeilen löschen.

Answer 5

Versuchen Sie dies mit Ihrem Server-Seite Methode

var txtValList = []; 
    txtValList.push($('txtVal1').val()); 
    txtValList.push($('txtVal2').val()); 
    txtValList.push($('txtVal3').val()); 
    $.ajax({ 
       method: "POST", 
       url: "ServerSideMethod", 
       data: JSON.stringify(txtValList), 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (data) { 
        //On success 
       }, 
       error:function() 
       { 
        alert('some error occurred'); 
       } 
      }); 

Sie können auch this link sehen siehe nennen, wie Ajax verwenden und WebMethod

Answer 6

versuchen

$(document).ready(function() { 
    $('#increment').click(function(){ 
    var width = $("#container_width"); 
    var input; 
    var input = $("<input>").attr("type","text").attr("name","width[]"); 
    var br = $("<br>"); 
    width.append(br); 
    width.append(input); 

    var height = $("#container_height"); 
    var input = $("<input>").attr("type","text").attr("name","height[]"); 
    var br = $("<br>"); 
    height.append(br); 
    height.append(input); 
    }); 
});