skip to Main Content

I have a working Ajax script that submits a form and display content in a DIV on success, but at the moment it only work when I have 1 form, but on my page I need to have multiple forms that should use this script for form submission and response back to the user.

The Ajax:

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

Lets say I have 2 forms (there will be many more also with same name but different attached ID i.e EconomyColumns1 = Name + ID) that looks like this:

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

How can I make my Ajax become dynamically so that I do not need to have as many Ajax scripts as I have forms, but only need to have on? .. as a little twist, the $("#message").. should be different depending on the form that is submitted.

Hope somone can help 🙂

Best Regards

Stig 🙂

2

Answers


  1. Set a variable to the DIV before the form, and use that in the callback function.

    $("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();
    });
    
    Login or Signup to reply.
  2. @Barmar .. Here is the updated HTML form

    <div id="response_div">
    </div>
    <form name="Initials2"  id="Initials2" action="">
    <input type="hidden" name="UserID" id="UserID" value="1">
    <input type="hidden" name="ColumnToUpdate" id="ColumnToUpdate" value="InitialsColumn">
      <fieldset>
        <div class="input-box">
        <label for="Initials" id="Initials">Initials</label>
        <input type="text" name="Initials" id="Initials" minlength="3" maxlength="3" class="text-input" required/>
        </div>
        <button type="submit" form="Initials2" value="Submit">Send</button>
      </fieldset>
    </form>
    
    
    <div id="response_div">
    </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="lonnr" id="lonnr_label">lonnr</label>
      <input type="text" name="lonnr" id="lonnr" minlength="3" class="text-input" required/>
    </div>
    <div class="input-box">
      <label for="debnr" id="debnr_label">debnr</label>
      <input type="text" name="debnr" id="debnr" class="text-input"/>
    </div>
    <div class="input-box">
      <label for="orgnr" id="orgnr_label">orgnr</label>
      <input type="text" name="orgnr" id="orgnr" class="text-input"/>
    </div>
      <button type="submit" form="EconomyColumns1" value="Submit">Send</button>
    </fieldset>
    </form>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search