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" }

Answer 1

@John在我的情况下，我是这样做的，它工作正常。它具有两个按钮，用于从其他字段添加和/或删除字段。如果需要，我可以通过电子邮件将两个文件发送给您。

 addNewRow();

$("#add").click(function(){
    addNewRow();
})

function addNewRow(){
    $.ajax({
        url : DOMAIN+"/includes/process.php",
        method : "POST",
        data : {getNewOrderItem:1},
        success : function(data){
            $("#invoice_item").append(data);
            var n = 0;
            $(".number").each(function(){
                $(this).html(++n);
            })
        }
    })
}

$("#remove").click(function(){
    $("#invoice_item").children("tr:last").remove();
})

Answer 2

您的问题主要是由嵌套不正确的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>

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

2 个答案: