的Javascript添加/删除文本框

-1

我有以下的javascript，我不能把从代码生成的HTML的Javascript添加/删除文本框

("#btnAdd").bind("click", function() { 
var div = $("<tr />"); 
div.html(GetDynamicTextBox("")); 
$("#TextBoxContainer").append(div); 
}); 

$("body").on("click", ".remove", function() { 
$(this).closest("tr").remove(); 
}); 
}); 
function GetDynamicTextBox(value) { 


return '<td><textarea name = "prodcut_name" type="text" value = " ' + value + '" class="form-control" /></td>' + '" /></td>'+ '<td><textarea name = "product_directions" type="text" value = "' + value + '" class="form-control" /></td>' + '<td><button type="button" class="btn btn-danger remove">X</button></td>'

我的HTML表单文本框，我需要采取的值的值

<form action="{{action('[email protected]', $id)}}" method="post"> 
<h5 class="text-center">Product</h5> 
     <section class="container"> 
     <div class="table table-responsive"> 
     <table class="table table-responsive table-striped table-bordered"> 
     <thead> 
      <tr> 
       <td>Product Name</td> 
       <td>Details</td> 
       <td>Remove</td> 
      </tr> 
     </thead> 
     <tbody id="TextBoxContainer" > 
     </tbody> 
     <tfoot> 
      <tr> 
      <th colspan="5"> 
      <button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"></i>+ Add </button></th> 
      </tr> 
     </tfoot> 
     </table> 
     </div> 
     </section>

来源

2017-11-25 Evripides Kyriacou

动态添加的每个字段必须具有不同的名称属性值。所以你可以使用服务器端的每个字段。否则它会覆盖 – asissuthar

这是你如何使用纯JavaScript添加文本区域。

let textAreaDiv = document.getElementById("textAreaDiv"); 
 

 
addButton.onclick = addTextArea; 
 

 
function addTextArea() { 
 
\t let textArea = document.createElement("TEXTAREA"); 
 
\t textArea.value = "Nice to see you"; 
 
    textAreaDiv.appendChild(textArea); 
 
}

<button id="addButton"> 
 
Add text Area 
 
</button> 
 
<div id="textAreaDiv"> 
 

 
</div>

来源

2017-11-25 14:57:45

体

<form action="server.php" method="post"> 
    <div id="fields"></div> 
    <button id="btnAdd">Add</button> 
    <input type="submit" value="Submit"> 
</form> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 

<script> 
    (function() { 

    let fieldIndex = 0 

    $('#btnAdd').click(() => { 

     // Create every textarea with different name 
     let field = $('<textarea>', { 
     name: `field${fieldIndex++}` 
     }) 

     $('#fields').append(field) 

     return false 

    }) 

    })() 
</script>

获得服务器端值

server.php

<?php echo json_encode($_POST) ?>

来源

2017-11-25 15:18:11 asissuthar

的Javascript添加/删除文本框

回答

相关问题