ajax提交表单选择更改多行

Question

我认为我有问题，我有一个表格，其中每个表格都是一个表格，当我更改“选择”时更新而不更改页面

查询只更新第一行的问题，为什么？ chrome 写信给我“找到 152 个非唯一 id 的元素 #DO20_FLGST1...”不接受多表单？

$risultato = sqlsrv_query($conn, $interrogazione);

while ($riga = sqlsrv_fetch_array($risultato, SQLSRV_FETCH_ASSOC)) {

<form name='contact' action=''>
                      <select name="DO20_FLGST1" id="DO20_FLGST1" >
                        <option value='no' <?=$check0;?>>No</option>
                        <option value='cc' <?=$check1;?>>ComeCli</option>
                        <option value='co' <?=$check2;?>>Contrass</option>
                      </select>
                      <input type=hidden name=numreg id='numreg' value="<?=$riga['DO11_NUMREG_CO99'];?>">
                      <input type=hidden name=do20_flag id='do20_flag' value='do20_flag'>
                      <input name='DO20_NUMST1' type='text' size=4 id='DO20_NUMST1' value='<?=$riga['DO20_NUMST1'];?>'>
                      <input name='cliente' type='hidden' id='cliente' value='<?=$riga['CG16_RAGSOANAG']." ".$riga['DO11_NUMDOC']."/".$riga['DO11_SEZDOC'];?>'>
                      </form>

}

$(document).ready(function () {
$(document).on("change", "select#DO20_FLGST1", function(){

  var do20_flag     = $('#do20_flag').val();
  var numreg        = $('#numreg').val();
  var DO20_NUMST1   = $('#DO20_NUMST1').val();
  var DO20_FLGST1   = $('#DO20_FLGST1').val();

$.ajax({
     url: 'salva.php',
     type: "post",
      data: { "do20_flag": do20_flag, "numreg": numreg, "DO20_NUMST1": DO20_NUMST1, "DO20_FLGST1": DO20_FLGST1},
     success: function(response) {
          alert('Hai modificato '+$('#cliente').val()); 
     }
});

}); });

Answer 1

您对多个元素使用了相同的ids，这就是仅提交第一个值的原因。相反，只需从您的 html 中删除所有 id，然后您可以使用select[name=DO20_FLGST1] 触发您的 html 中具有相同名称的任何选择，然后使用 ..closest("form").serialize() 获取选择框已更改的所有输入值。

演示代码：

$(document).on("change", "select[name=DO20_FLGST1]", function() {
  var form_ = $(this).closest("form")
  console.log(form_.serialize())
  $.ajax({
    url: 'salva.php',
    type: "post",
    data: form_.serialize(), //use this to get closest form then use serialize
    success: function(response) {
      alert('Hai modificato ' + form_.find('[name=cliente]').val());
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name='contact' action=''>
  <!--remove all ids-->
  <select name="DO20_FLGST1">
    <option value='no1'>No</option>
    <option value='cc2'>ComeCli</option>
    <option value='co3'>Contrass</option>
  </select>
  <input type=hidden name=numreg value="abc">
  <input type=hidden name=do20_flag value='do20_flag'>
  <input name='DO20_NUMST1' type='text' size=4 value='1>'>
  <input name='cliente' type='hidden' value='1221'>
</form>
<form name='contact' action=''>
  <select name="DO20_FLGST1">
    <option value='no1'>No</option>
    <option value='cc2'>ComeCli</option>
    <option value='co3'>Contrass</option>
  </select>
  <input type=hidden name=numreg value="abc2">
  <input type=hidden name=do20_flag value='do20_flag'>
  <input name='DO20_NUMST1' type='text' size=4 value='1>'>
  <input name='cliente' type='hidden' value='12221'>
</form>