通过此对象提交表单

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

我有许多带有 id 的表单：form1、form2、form3 ... 我的问题是如何指定函数 submitFormInfoEtatCivil() 来获取提交按钮的表单。我使用了 $( this ).serialize() 但我错了，因为输出为空。

Answer 1

您可以在函数内部传递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() 函数提交时，您可以捕获表单；

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

当您使用上述代码 sn-p 时，您可以从代码中删除 onclick="submitFormInfoEtatCivil(this)"，如果您想深入了解 on() 函数，您可以找到 here 的文档。