通過此 object 提交表格

Question

我有一個要提交的表單，但我不知道調用該表單的最佳方式。 這是我的 HTML

<form id="form2" name="form2">
<select id="situation_matrimoniale" name="situation_matrimoniale">
    <option value="Célibataire">Célibataire</option>
    <option value="Marié(e)">Marié(e)</option>
    <option value="Veuf(ve)">Veuf(ve)</option>
    <option value="Divorcé(e)">Divorcé(e)</option>
</select><input type="text" name="nombre_enfant" id="nombre_enfant" value="" /><input type="button" value="Enregistrer" name="submit" onclick="submitFormInfoEtatCivil()" />
</form>

現在是 Javascript，我包括 jQuery。

function submitFormInfoEtatCivil() {
            
    var update = "index.php/rh/updateinfo";
    var dataString = $( this ).serialize();
    
    // dataString return <empty string>
    
    jQuery.ajax({
        
    });
        
}

我有很多 forms 的 ID：form1、form2、form3... 我的問題是如何指定函數 submitFormInfoEtatCivil() 以獲取提交按鈕的表單。 我使用了 $( this ).serialize() 但我錯了，因為 output 是空的。

Answer 1

您可以在 function 中傳遞this ，然后使用.closest("form")從單擊按鈕的表單中獲取輸入數據。

演示代碼：

 function submitFormInfoEtatCivil(el) { var update = "index.php/rh/updateinfo"; //use closest to get form where button is clicked var dataString = $(el).closest("form").serialize(); console.log(dataString) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form2" name="form2"> <select id="situation_matrimoniale" name="situation_matrimoniale"> <option value="Célibataire">Célibataire</option> <option value="Marié(e)">Marié(e)</option> <option value="Veuf(ve)">Veuf(ve)</option> <option value="Divorcé(e)">Divorcé(e)</option> </select><input type="text" name="nombre_enfant" id="nombre_enfant" value="" /> <!--pass `this` inside function--> <input type="button" value="Enregistrer" name="submit" onclick="submitFormInfoEtatCivil(this)" /> </form> <form id="form" name="form"> <select id="situation_matrimoniale" name="situation_matrimoniale"> <option value="Célibataire">Célibataire</option> <option value="Marié(e)">Marié(e)</option> <option value="Veuf(ve)">Veuf(ve)</option> <option value="Divorcé(e)">Divorcé(e)</option> </select><input type="text" name="nombre_enfant" id="nombre_enfant" value="" /> <!--pass `this` inside function--> <input type="button" value="Enregistrer" name="submit" onclick="submitFormInfoEtatCivil(this)" /> </form>

Answer 2

您使用的$(this)指的是按鈕，當您serialize()按鈕時，您會得到空字符串。

我強烈推薦這個問題的另一種解決方案； 您可以在使用on() function 提交表單時捕獲該表單；

$('form').on('submit',function(){
  var thiz = $(this);
  var update = thiz.attr("form-url"); //get update url from the form as an attiribute or define it staticly.
  var dataString = thiz.serialize();

  return false; //to prevent original form action.
});

當您使用上面的代碼片段時，您可以從代碼中刪除onclick="submitFormInfoEtatCivil(this)"並且如果您想深入了解on() function，您可以在此處找到文檔。