在将整个表单作为插入提交到数据库之前，如何使用 Ajax 针对数据库验证表单选择输入值？答案

【问题标题】：How do I validate a form select input value against DB with Ajax before submit the entire form to DB as insert?在将整个表单作为插入提交到数据库之前，如何使用 Ajax 针对数据库验证表单选择输入值？
【发布时间】：2017-07-26 11:01:36
【问题描述】：

我有一个Master form，它将插入mysql，在此表单中我有一个选择选项，用户可以选择IE房间，虽然选择这个房间，他可以点击一个按钮来检查如果此房间可用，请 DB。

到目前为止，我知道该结构是一种嵌套形式，通常不建议/允许这样做，但还有其他方法吗？

假设所有元素都是主表单的一部分。

我在下面发布了我的代码示例。

$(document).on("click", "#checkRoom", function() {
  var data = $('#checkRoomForm').serialize();
  $.post('urlToMyPHP', data).success: function(response) {
    // on success..
    $('#checkRoomResult').val(response); // show result
  };
});

$(document).on("click", "#MasterSubmit", function() {
  var data = $('#masterForm').serialize();
  $.post('urlToMyPHP', data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="masterForm">

  <label>Name:</label>
  <input id="checkName" name="checkName">


  <form id="checkRoomForm">
    <label>Room:</label>
    <select id="selectRoom" name="selectRoom">
    <optgroup>
      <option value="R1">Room 1</option>
      <option value="R2">Room 2</option>
      <option value="R3">Room 3</option>
    </optgroup>
  </select>

    <input type="submit" value="Check Room" id="checkRoom">
  </form>

  <label>Status:</label>
  <input id="checkRoomResult" value="">

<input id="MasterSubmit" type="submit">
</form>

【问题讨论】：

标签： jquery nested-forms

【解决方案1】：

您可以将内部形式更改为如下所示的除法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<form id="masterForm">

  <label>Name:</label>
  <input id="checkName" name="checkName">


  <div id="checkRoomForm" name="checkRoomForm">
    <label>Room:</label>
    <select id="selectRoom" name="selectRoom">
    <optgroup>
      <option value="R1">Room 1</option>
      <option value="R2">Room 2</option>
      <option value="R3">Room 3</option>
    </optgroup>
  </select>

    <input type="button" value="Check Room" id="checkRoom">
  </div>

  <label>Status:</label>
  <input id="checkRoomResult" value="">

<input id="MasterSubmit" type="submit">
</form>
</body>
</html>

并在此处访问除法示例中的输入数据

$(document).ready(function(){
  $("#checkRoom").click(function(){
    console.log($("#checkRoomForm :input").serialize());
  });
});

【讨论】：

看起来很有趣，我去看看。