Question

当我在同一页面上有超过4个表单时，我想知道如何使用AJAX（只有一个表单）在页面上提交表单。

到目前为止，我还没有工作：

<script>
  $(document).ready(function(){
    $("findPatientRecords").submit(function(event){
      event.preventDefault();
      var username = $("username").val();
      var searchPatientRecords = $("searchPatientRecords").val();
      $(".formMessage").load("inc/findPatientRecords.php", {
        username: username,
        searchPatientRecords: searchPatientRecords
      });
    });
  });
</script>

表格是：

<form method="post" name="findPatientRecords" id="findPatientRecords" autocomplete="off">
          <div class="form-group">
            <label for="username">Username</label>
            <input class="form-control" type="text" id="username" name="username"></input>
          </div>
          <button type="submit" class="btn btn-primary" style="width: 100%;" name="searchPatientRecords">Search for user</button>
          <p id="formMessage"></p>
        </form>

Answer 1

在表单元素中使用name属性

<form name="form1">

Answer 2

jQuery找到与CSS选择器类似的元素。要查找id属性为foo的元素，您需要执行#foo。如果省略#符号，则会尝试查找<foo>元素。这就是你的jQuery选择器不匹配的原因。

<script>
  $(document).ready(function(){
    $("#findPatientRecords").submit(function(event){
      event.preventDefault();
      var username = $("#username").val();
      var searchPatientRecords = $("#searchPatientRecords").val();
      $(".formMessage").load("inc/findPatientRecords.php", {
        username: username,
        searchPatientRecords: searchPatientRecords
      });
    });
  });
</script>

当页面上有多个表单时，使用ajax提交表单

2 个答案: