Question

我有一个主人form将被插入mysql，在此表单中我有一个选择选项，用户可以选择即一个房间，在选择这个房间时他可以点击一个按钮如果这个房间可用，请检查数据库。

现在结构是一种嵌套形式到目前为止，我知道，这通常不会被建议/允许，但还有另一种方法吗？

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

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

$(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>

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

在将整个表单作为插入提交到DB之前，如何使用Ajax验证表单选择输入值？

1 个答案: