Question

在提交功能中，我尝试从序列化表单中过滤隐藏字段，然后将当前数据与先前保存的数据进行比较。如果数据相同，则用户应该看到该消息。我遇到的一个问题是选择表单元素。由于某种原因，selectize表单元素不包含在序列化表单数据中。我已经测试过，如果我不使用isalpha，那么我会看到select form element。有没有理由为什么选择不包含在一个案例中而在另一个案例中？

＆＃13;

.find()

＆＃13;

var frmOriginalData;

$('.frm-Submit').on('submit', submitAdminFrm);

function submitAdminFrm(e) {
  e.preventDefault(); // Prevnts default form submit.
  var frmID = e.currentTarget.id,
    recID = $('#frm_recordid').val(),
    frmCurrentData = $("#" + frmID).find("input:not('.no-serialize')").serialize();

  console.log(recID + '\n' + frmCurrentData + '\n' + frmOriginalData);

  if (recID && frmCurrentData == frmOriginalData) {
    alert('Nothing changed on the form.');
  } else {
    frmOriginalData = $("#" + frmID + " input:not('.no-serialize')").serialize();
  }
}

＆＃13;

Answer 1

您只选择input元素：.find("input:not('.no-serialize')")。你需要这样做：

.find("input:not('.no-serialize'), select:not('.no-serialize')")

或

.find('input, select').not('.no-serialize')

或

.find(':input').not('.no-serialize')

但请注意，对于:input，jQuery文档建议：

要在使用时获得最佳性能：输入选择元素，首先使用纯CSS选择器选择元素，然后使用.filter（“：input”）。

Answer 2

您未获得select，因为您专门正在寻找input元素：

frmCurrentData = $("#" + frmID).find("input:not('.no-serialize')").serialize();
// -----------------------------------^

select元素不是input元素。

您可以使用jQuery的伪类:input代替：

frmCurrentData = $("#" + frmID).find(":input:not('.no-serialize')").serialize();
// -----------------------------------^

示例：

var frmOriginalData;

$('.frm-Submit').on('submit', submitAdminFrm);

function submitAdminFrm(e) {
  e.preventDefault(); // Prevnts default form submit.
  var frmID = e.currentTarget.id,
    recID = $('#frm_recordid').val(),
    frmCurrentData = $("#" + frmID).find(":input:not('.no-serialize')").serialize();

  console.log(recID + '\n' + frmCurrentData + '\n' + frmOriginalData);

  if (recID && frmCurrentData == frmOriginalData) {
    alert('Nothing changed on the form.');
  } else {
    frmOriginalData = $("#" + frmID + " input:not('.no-serialize')").serialize();
  }
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <input type="hidden" class="form-control no-serialize" name="frm_recordid" id="frm_recordid" value="34">
  <div class="form-group required">
    <label class="control-label" for="fname"><span class="label label-primary">First Name:</span></label>
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="lname"><span class="label label-primary">Last Name:</span></label>
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <label class="control-label" for="activestaff"><span class="label label-info">Active:</span></label>
    <select class="form-control is-staff" name="frm_active" id="frm_active" required>
      <option value="0">No</option>
      <option value="1">Yes</option>
    </select>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

:input匹配input，select，textarea和button元素。

旁注1 ：您不在:not()伪类中的子选择器周围放置引号。 E.g：

frmCurrentData = $("#" + frmID).find(":input:not('.no-serialize')").serialize();
// Remove these quotes --------------------------^-------------^

旁注2 ：您已经在form（以及e.currentTarget，btw）中拥有this元素，因此没有必要得到id，然后再查一遍：

frmID = e.currentTarget.id
// ...
frmCurrentData = $("#" + frmID).find(...)

相反，只需使用您已有的东西：

frmCurrentData = $(e.currentTarget).find(...
// or
frmCurrentData = $(this).find(...

选择序列化表单中缺少的元素？

2 个答案: