时间戳

首页 > 解决方案 > 如何使用于表单提交的 Ajax 脚本在多个表单上工作

jquery - 如何使用于表单提交的 Ajax 脚本在多个表单上工作

问题描述

我有一个有效的 Ajax 脚本，它提交表单并在 DIV 中显示内容成功，但目前它仅在我有 1 个表单时才有效，但在我的页面上我需要有多个表单，应该使用此脚本提交表单并回复给用户。

阿贾克斯：

<script>
    $(function () {
      $("form").validate();
    });
    $( "form" ).on( "submit", function(e) {

        var dataString = $(this).serialize();

        $.ajax({
          type: "POST",
          url: "update_userdata.asp",
          data: dataString,
          success: function () {
            $("#EconomyColumnsResponse2").html("<div id='message' style='background-color: #28a745;'></div>");
            $("#message")
              .html("<font style='color: white;'>Løn Information er nu opdateret <i class='fas fa-check-circle'></i></font>")
              .hide()
              .fadeIn(1500, function () {
                $("#message").append(
                  ""
                );
              });
          }
        });

        e.preventDefault();
      });
      setTimeout(function(){
        $('#EconomyColumnsResponse2').fadeOut('slow');
      }, 15000)

</script>

假设我有 2 个表格（还有更多具有相同名称但附加 ID 不同的表格，即 EconomyColumns1 = 名称 + ID），如下所示：

<div id="EconomyColumnsResponse1">
</div>
<form name="EconomyColumns1" id="EconomyColumns1" action="">
<input type="hidden" name="UserID" id="UserID" value="1">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
  <fieldset>
    <div class="input-box">
      <label for="name" id="name_label">lonnr</label>
      <input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
    </div>
    <div class="input-box">
      <label for="email" id="email_label">debnr</label>
      <input type="text" name="debnr" id="debnr" class="text-input"/>
    </div>
    <div class="input-box">
      <label for="phone" id="phone_label">orgnr</label>
      <input type="text" name="orgnr" id="orgnr" class="text-input"/>
    </div>
      <input type="submit" name="submit" id="submit_btn" value="Send" />
  </fieldset>
</form>

<div id="EconomyColumnsResponse2">
</div>
<form name="EconomyColumns2" id="EconomyColumns1" action="">
<input type="hidden" name="UserID" id="UserID" value="2">
<input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="EconomyColumns">
  <fieldset>
    <div class="input-box">
      <label for="name" id="name_label">lonnr</label>
      <input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
    </div>
    <div class="input-box">
      <label for="email" id="email_label">debnr</label>
      <input type="text" name="debnr" id="debnr" class="text-input"/>
    </div>
    <div class="input-box">
      <label for="phone" id="phone_label">orgnr</label>
      <input type="text" name="orgnr" id="orgnr" class="text-input"/>
    </div>
      <input type="submit" name="submit" id="submit_btn" value="Send" />
  </fieldset>
</form>

我怎样才能让我的 Ajax 变得动态，这样我就不需要像我拥有的​​表单一样多的 Ajax 脚本，而只需要拥有吗？.. 作为一个小转折， $("#message").. 应该根据提交的表单而有所不同。

希望有人可以提供帮助:-)

此致

斯蒂格:-)

标签： jqueryajax

解决方案

在表单前为 DIV 设置一个变量，并在回调函数中使用该变量。

$("form").on("submit", function(e) {

  var dataString = $(this).serialize();
  let response_div = $(this).prev();

  $.ajax({
    type: "POST",
    url: "update_userdata.asp",
    data: dataString,
    success: function() {
      response_div.html("<div id='message' style='background-color: #28a745;'></div>");
      $("#message")
        .html("<font style='color: white;'>Løn Information er nu opdateret <i class='fas fa-check-circle'></i></font>")
        .hide()
        .fadeIn(1500, function() {
          $("#message").append(
            ""
          );
        });
    }
  });

  e.preventDefault();
});

推荐阅读