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

Answer 2

问题是您对多个元素具有相同的id属性，这会使您的HTML无效。

如果您未在其他位置使用id属性，请将其删除并改为使用class选择器然后在您的选择中设置Google Spreadsheet Client library事件处理程序：

<form class = "setPrivilegeForm col s6">
   <input type="hidden" value='.$userID.' name="userID" > </input> 
   <select name="userType" class = "customSelect">                          
     <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>

脚本：

$('.customSelect').change(function(){
  var form = $(this).closest('form');
  $.ajax({
      type    : "post",
      url     : "setPrivilegeForm.php",
      data    : form.serialize(),
      success : function(data){
        $(".userNameList").html('');
        Materialize.toast('Hello', 4000);   
      }
  });
});

Answer 3

使用serializeArray（）而不是serialize（）;

如何提交动态生成的表单之一（由php生成）

3 个答案: