javascript - Ajax 从表单输入插入多条记录，将计数器添加到隐藏输入

Question

我创建了一个页面，该页面基于数据库中的数组创建多个表单。每个表单都有一个带有“添加”按钮的输入，可动态添加新输入（每​​个表单最多 10 个输入）

这很好用，但现在我要提交添加到数据库中的 andy 输入值。我在这里有两个主要问题：

1. 我表单中的隐藏输入<input type="hidden" name="tickerID" id="tickerID" value="<?php echo $ticker['ticker'] ?>">具有非唯一 ID，因此无论我从哪个表单提交，它都具有仅属于第一个表单的代码值。

2. 一旦我有了这个值，并使用该表单中的任何填充输入进行序列化，我就会调用 addticker.php 来插入。我正在从表单输入中插入代码 id 和内容，但我认为我需要将其作为 foreach 执行，因为如果添加并填写了 5 个输入，我需要为每个输入记录。所有 5 个都将具有相同的代码 ID 和输入中的相应内容。

任何帮助表示赞赏

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

    <form id="Items" method="post">
        <label id="ItemLabel">Item 1: </label>
        <input type="text" name="Items[]"><br/>
        <button type="button" class="moreItems_add">+</button>

        <input type="hidden" name="tickerID" id="tickerID" value="<?php echo $ticker['ticker'] ?>">
        <input type="submit" name="saveTickerItems" value="Save Ticker Items">  
    </form>

<?php endforeach;?>


<script type="text/javascript">

$("button.moreItems_add").on("click", function(e) {
var tickerID = $('#tickerID').val();
  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>


<script type="text/javascript">

$("#Items").submit(function(e) {


//variables?

//var tickerID coming from <input type="hidden" name="tickerID" id="tickerID" value="<?php echo $ticker['ticker'] ?>">

//var Items[]

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

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

</script>

addticker.php

$tickerID = $_POST[''];
$content = $_POST[''];

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

标签： javascriptphpjqueryajax