javascript - Javascript 部分代码未发布到数据库

Question

我正在尝试使用动态文本框将数据输入到我的数据库中。动态文本框是用 Javascript 创建的。当我尝试将数据发送到我的数据库时，我看到我的 PHP 脚本只将第一行发布到数据库中

<div id="form">
  <form name="reaction" id="reaction" method="post" action="./post.php">
  //The first row is created in HTML
  <input type="text" name="firstname[]" id="firstname1" placeholder="Firstname" /> <br />
</div>

//The other rows are created in Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

  $(document).ready(function(){
    var final_total_amt = $('#final_total_amt').text();
    var count = 1;

  $(document).on('click', '#add_row', function(){
    count++;
    $('#total_item').val(count);
    var html_code = '';
    html_code += '<input type="text" placeholder="Firstname'+count+'" name="firstname[]" id="firstname'+count+'" data-srno="'+count+'" /><br />';
  });

  $('#form').append(html_code);
</script>

<button type="submit" class="btn btn-primary" name="send">Save</button>
</form>

在 PHP 脚本中，我试图发布多个文本框：

foreach($_POST['firstname'] as $i => $item) {
  $db3 = new PDO('mysql:host=localhost;dbname=db', 'root', 'pass');
  $query3= "INSERT INTO scu_db(firstname) VALUES (:firstname)";
  $stmt3 = $db3->prepare($query3);
  $exec3 = $stmt3->execute(array(
    ':firstname'     =>  $_POST["firstname"][$i]
  ));
}

该脚本仅将在 HTML 中创建的第一行发布到我的数据库。

有人知道我该如何解决这个问题吗？

var_dump上的结果$_POST['firstname']：

array(1) { [0]=> string(2) "1" }

标签： javascriptphphtml

Answer 1

您的问题主要是由不正确的嵌套 HTML 标签引起的。用您喜欢的方式在下面切换div#form标签的位置form

<form name="reaction" id="reaction" method="post" action="./post.php">
  <div id="form">

请记住关闭您的$(document).ready()方法声明，并将您的代码放在您的事件$('#form').append(html_code)范围内。$(document).on('click')

请参阅下面的工作示例

<?php
var_dump($_POST);
?>

<form name="reaction" id="reaction" method="post" action="">
<div id="form">
  //The first row is created in HTML
  <input type="text" name="firstname[]" id="firstname1" placeholder="Firstname" /> <br />
</div>

//The other rows are created in Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var final_total_amt = $('#final_total_amt').text();
  var count = 1;

  $(document).on('click', '#add_row', function(){
    count++;
    $('#total_item').val(count);
    var html_code = '';
    html_code += '<input type="text" placeholder="Firstname'+count+'" name="firstname[]" id="firstname'+count+'" data-srno="'+count+'" /><br />';
    $('#form').append(html_code);
  });
});
</script>

<button type="submit" class="btn btn-primary" name="send">Save</button>
<button type="button" class="btn btn-primary" id="add_row">Add Row</button>
</form>