Question

我有以下javascript，我无法将代码生成的文本框中的值带到html

("#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('ProductController@store', $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>

Answer 1

这是使用纯javascript添加文本区域的方法。

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

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

Answer 2

<强>体

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

Javascript添加/删除文本框

2 个答案: