javascript - 如何提交动态生成的表单之一(由php生成)

Question

PHP 代码

echo '
  <div class = "card locations userNameContainer">
    <div class = "row" style = "padding: 0 !important;">
      <div class = "userName col s5" style = "display: inline-block;">
        '.$name.'
      </div>    

      <form class = "setPrivilegeForm col s6" id = "setPrivilegeForm">
        <input type="hidden" value='.$userID.' name="userID" > </input> 
        <select name="userType" id = "userType" class = "customSelect" onchange = "ajaxPrivilegeSubmit()">                          
          <option value="" disabled selected class = "grey-text">'.$typeText.'</option>
          <option value="1">Administrator</option>
          <option value="2" >Operator</option>
          <option value="3">Patron</option>                          
        </select>
      </form>

      <i class = "material-icons col s1">delete</i>
    </div>
  </div>

';

生成的表单列表的预览图像:

脚本:

function ajaxPrivilegeSubmit(){
  $.ajax({
      type: "post",
      url: "setPrivilegeForm.php",
      data: $('#setPrivilegeForm').serialize(),

      success: function(data){

        $(".userNameList").html();
        Materialize.toast('Hello', 4000);

      }
  });

  //$('this').closest('.setPrivilegeForm').submit();
}

当表单中存在的下拉列表的值发生更改时，我希望能够提交表单(每个列表项都是一个表单)，但是，目前仅提交第一个表单，而不是提交选择下拉列表的表单(是的，我知道原因)。

有人可以指导我如何使用一些唯一标识符来帮助提交 <select> 的表单吗？值改变了吗？

Answer 1

为您的表单指定一个 ID，例如“setPrivilegeForm_1”，然后选择 ID“1”。在下一个“setPrivilegeForm_2”和“2”等上，将 onchange 函数更改为 ajaxPrivilegeSubmit(this.id) 并将实际函数更改为

function ajaxPrivilegeSubmit(num){
  $.ajax({
  type: "post",
  url: "setPrivilegeForm.php",
  data: $('#setPrivilegeForm_'+num).serialize(),

  success: function(data){
     $(".userNameList").html();
     Materialize.toast('Hello', 4000);
   }
 });

 //$('this').closest('.setPrivilegeForm_'+num).submit();
}