ajax submit form select on change multi row

user_11305847 0
Viewed 67

I Think that I have a problem, I have a table where every is a form and when I change the "select" the update without change the page

the problem that the query upadte only the first row why? chrome write me "Found 152 elements with non-unique id #DO20_FLGST1..." not accept multi form?

$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()); 
     }
});

}); });

forms arrays php ajax
1 Answers

You have used same ids for mutliple elements that's the reason only first value gets submitted .Instead just remove all ids from your html and then you can use select[name=DO20_FLGST1] to trigger any select inside your html with same name and then use ..closest("form").serialize() to get all inputs value where select-box has been changed.

Demo Code :

$(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>

user_106064000
Related