使用serializeArray，尝试从ajax插入多个输入，每个输入都有ID

Question

我正在尝试为表单提交ajax调用，其中添加了功能，可以动态向表单添加输入。我的表单是基于数组循环创建的，所以有时候我只有一个表单，有时更多。

无论如何，我都可以通过按钮上的控制台从每个表单中转储正确的输入值，但是我在ajax提交中遇到500错误。

一个问题是，如果我在表单中有4个输入，则将所有4个都转储，然后转储一个隐藏的输入值“ tickerID”，但是我在调​​用sql插入，需要在其中插入每个值隐藏的输入值。

我的数据控制台日志现在是这样的：

但是我需要将它们插入为

insert into ticker_content (ticker_id, content)
     values (1, 'one'), (1, 'two');

如果有道理。

这是我的addticker.php，它被要求插入：

$items = $_POST['Items'];
$tickerID = $_POST['tickerID'];

foreach ($items as $item){

    $addTicker = "
        INSERT INTO ticker_content (tickerID, content)
        values ('$tickerID', '$item');
     "
     $mysqlConn->query($addTicker);
}

因此，基本上，对于每个Items []值，我都需要插入相同的隐藏字段。

这是我的表格和JS代码供参考。第一个JS块主要用于动态添加输入的功能，但是最后一个JS块是使用serializeArray（）的ajax；

<?php foreach($tickerDisplays as $key => $ticker):?>

    <form id="Items" method="post">   
        <label id="ItemLabel">Item 1: </label>
        <input type="text" name="Items[]"><br/> <!--form starts with one input-->
        <button type="button" class="moreItems_add">+</button> <!--button dynamically adds input, up to 10 per form-->

        <input type="hidden" name="tickerID" id="tickerID" class="tickerIdClass" value="<?php echo $ticker['ticker'] ?>"><!--hidden input used for tickerID-->
        <input type="submit" name="saveTickerItems" value="Save Ticker Items">  <!--submit button-->
    </form>

<?php endforeach;?>




<!-- This is the functionality for each form to click the '+' button and create new inputs -->
<script type="text/javascript">

$("button.moreItems_add").on("click", function(e) {
var tickerID = $(this).closest('form').find('.tickerIdClass').val(); //get value of hidden input for form
  var numItems = $("input[type='text']", $(this).closest("form")).length;
  if (numItems < 10) {
    var html = '<label class="ItemLabel">Item ' + (numItems + 1) + ': </label>';
    html += '<input type="text" name="Items[]"/><br/>';
    $(this).before(html);
    console.log(tickerID);
  }
});

</script>

<!-- This is the ajax call to send all filled out and created inputs from form along with the hidden input -->
<script type="text/javascript">
$("#Items").submit(function(e) {
    e.preventDefault();
    var data = $("#Items").serializeArray();
    console.log(data);

$.ajax({
       type: "POST",
       url: "addticker.php",
       data: $("#Items").serializeArray(), // serializes the form's elements.
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
     });

});

</script> 

Answer 1

$items = $_POST['Items']; 
$tickerID = $_POST['tickerID']; 
$value = "";
foreach ($items as $item){
    $value .= "('$tickerID', '$item'),";
}

$addTicker = "INSERT INTO ticker_content (tickerID, content)
    values {$value}";
$mysqlConn->query($addTicker);

使用此代码