我无法将用户输入的所有值都存储在数组中。在 window 警报中仅显示第一个数组值

Question

我似乎无法将所有克隆输入保存到数组中并通过 $.post() 传递数组。由于某种原因，它只传递用户选择的第一个数组值。

我愿意

通过 $.Post()
如果通过 php.

我被困在只保存原始输入值的数组上。

$(document).ready(function() {
  $("#add").click(function() {
    $("p:last").after($("p:first").clone(true)
                                  .find("#Equi").val("").end()
    );
  });
});

$(document).ready(function() {
  var ar1 = [];
  var input = document.getElementById('#Equi');
  $('#Equi').on('change', function() {
    // $.post('UnitValidate2.php', {Unit: ar1}, function(data) {
    ar1.push(input.value);
    window.alert(ar1);
    $.post('UnitValidate2.php', {Unit: ar1}, function(data) {
      window.alert(data);
      if(data == "True") {
        window.alert("Move On");
      } else {
        window.alert("Cant call out unit");
        // $("#Equi").val("");
      }
    });
  });
});

<!--for clone   -->
<p>
  <label for="lname">Eqiupment:</label>
  <!--<input type="text" id="Name" name="Name">-->
  <input type="text" name="Unit[]" id="Equi" value="" list="namelist4" required/>
  <datalist id="namelist4">
  <select name="Nam" style="display:none">
  <?php
    // Include config file
    require_once "../Login/config.php";
    $conn1 = mysqli_connect($serverName, $userName, $password, $databaseName);
    $sql4 = "SELECT * FROM `Status` WHERE Active = 'Yes' AND Status = 'Ready For Rent' ORDER BY Unit ASC";
    result4 = mysqli_query($conn1,$sql4);
    while ($row4 = mysqli_fetch_array($result4)) {
      echo "<option value='".$row4['Unit']."'>".$row4['Unit']."</option>";
    }
  ?>
</option>
</select>
</datalist>

Answer 1

我还有很多不清楚的地方。我省略了 PHP 部分，您可以在其中填写 <select> 元素中的选项。我还为您的 <datalist> 元素制作了一些元素。还有...

既然你正在使用jQuery你不妨适当：我把你的数据收集部分改成

var ar1=$('.Equi').get().map(el=>el.value);

我在其中搜索 class=Equi 的所有元素（我必须将其从 id 更改为 class，因为 ID 必须始终为 unique!), 然后将它们提取为 JavaScript 数组 (.get()), 使用 .map() 获取它们的 .value 属性并最终 return 将结果数组转化为 ar1.

由于此代码段在 Whosebug 上运行，因此我不得不注释掉实际的 $.post() 命令，但 console.log() 显示了其中发布的内容。

$(document).ready(function() {
  $("#add").click(function() {     
    $("p:last").after($("p:first").clone(true).find(".Equi").val("").end() );
  });
  
  $('.Equi').on('change', function(){  
       var ar1=$('.Equi').get().map(el=>el.value);
       console.log("this will be posted:",ar1);
       if (false) $.post('UnitValidate2.php',{Unit: ar1}, function(data){
         console.log(data);
         if(data == "True"){ console.log("Move On ");}
         else {              console.log("Cant call out unit");}
       });   

   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">add</button><br>
<datalist id="namelist4">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <option value="4">four</option>
</datalist>
<p>
  <label for="lname">Eqiupment
  <input type="text" name="Unit[]" class="Equi" value="" list="namelist4" required/>:</label>
  <select name="Nam">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
  </select>
</p>
<p></p>

我无法将用户输入的所有值都存储在数组中。在 window 警报中仅显示第一个数组值

I can't store all values from user inputs in the array. On window alert only the first array value shows up

php

arrays

jquery

post

clone