JavaScript/JQuery 中的多表单提交功能？答案

【问题标题】：Multi form submit function in JavaScript/JQuery?JavaScript/JQuery 中的多表单提交功能？
【发布时间】：2018-07-23 18:02:12
【问题描述】：

我有一个包含多个选项卡/表单的应用程序将被提交。我不想为每个表单设置单独的提交函数，而是想设计一个动态函数来提交任何带有submitFrm 类的表单。这是我当前代码的示例：

$('.frmSubmit').on('submit', submitFrm);

function submitFrm(e) {
  e.preventDefault(); // Prevnts default form submit.

  var frmID = $(this).prop("id"),
    formData = $('#' + frmID).serialize(), //or this way $(this).serialize()
    submitBtn = $(this).find(':submit');

  if (formData) {
    $('#' + frmID).find(':submit').prop('disabled', true); // Disable submit button
    // or this submitBtn.prop('disabled', true);
    
    /*
    Here is AJAX call.
    */
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="frmTab1" id="frmTab1" class="frmSubmit" autocomplete="off">
  <div class="form-group">
    <label class="control-label" for="activ"><span class="label label-primary">Active:</span></label>
    <select class="form-control" name="frmTab1_active" id="frmTab1_active" required>
      <option value="0">No</option>
      <option value="1">Yes</option>
    </select>
  </div>
  <div class="form-group">
    <label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
    <input type="text" class="form-control" name="frmTab1_code" id="frmTab1_code" maxlength="4" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="submit" name="frmTab1_submit" id="frmTab1_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div id="message" class="alert message-submit"></div>
    </div>
  </div>
</form>

我在争论我应该使用$(this) 对象来find()、serialize() 表单数据还是应该使用表单ID？有什么区别吗？我还想知道我是否使用多个表单中的此功能来提交数据是一种好习惯吗？如果有人有任何建议，请告诉我。

【问题讨论】：

我的意思是...如果您直接引用表单，则没有理由获取表单 id，除非您打算将所述 id 用于某些目的而不是从 dom 中选择。这没有任何意义。
例如在 ajax SUCCESS 中我不能使用 $(this) 因为我在那个时间点输入了不同的函数。所以我要么必须将 frm 对象保存在变量中，要么通过 id 访问表单来进行一些 dom 操作。这有意义吗？
如果你真的需要，你可以在ajax成功中使用this。您可以将其作为上下文传递，也可以将其存储在变量中。 ID 不是必需的。
请提供示例，我想看看。 if you have $.ajax({ type: 'POST', url: 'Some url', data: formData, dataType: 'json' }).done(function(obj){ // 如何访问this 表单引用这里...
var $form = $(this); $.ajax({...}).done(function () {$form.remove();}); 或者，将this 传递给context ajax 选项并在内部使用this。或者使用箭头函数。或使用 .bind。解决这个问题的方法很多，选择你想要的。

标签： javascript jquery forms form-submit

【解决方案1】：

您可以简单地使用 $(this).serialize() 之类的：

$('.frmSubmit').on('submit', submitFrm);

function submitFrm(e) {
  e.preventDefault();

  var formData = $(this).serialize();
  var submitBtn = $(this).find(':submit');

  if (formData) {
    submitBtn.prop('disabled', true);
  }

  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="frmTab1" id="frmTab1" class="frmSubmit" autocomplete="off">
  <div class="form-group">
    <label class="control-label" for="activ"><span class="label label-primary">Active:</span></label>
    <select class="form-control" name="frmTab1_active" id="frmTab1_active" required>
      <option value="0">No</option>
      <option value="1">Yes</option>
    </select>
  </div>
  <div class="form-group">
    <label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
    <input type="text" class="form-control" name="frmTab1_code" id="frmTab1_code" maxlength="4" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="submit" name="frmTab1_submit" id="frmTab1_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div id="message" class="alert message-submit"></div>
    </div>
  </div>
</form>

【讨论】：