（PHPによって生成された）動的に生成されたフォームの1

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

フォームに「setPrivilegeForm_1」のようなIDを指定し、ID「1」を選択します。次の「setPrivilegeForm_2」と「2」などajaxPrivilegeSubmit（this.id）へのごのonchange機能を変更し、

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セレクタを使用してください。
は、その後、あなたの選択に.change()イベントハンドラを設定します。

<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の（）;