Dynamically target specific DIV´s with unique ID in Ajax - Jquery ajax

user1185428
March 10, 2021
138 views
3 votes
3 Answers

Say that I have more than 100 forms on one page (I know it is a lot, but neccesary in this matter) and I have a Ajax that submit each forms without reloading the page it is in, and Show/Hide a DIV on callback from jQuery on success and error, how do I:

1 : Target the specific DIV ID in the jQuery
2 : Make sure that it submit the specific form and only this form (not validating on required fields from other forms)

JS Code:

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

  var dataString = $(this).serialize();
  let response_div = $("[id^='response_div_']")

  $.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();
});
</script>

HTML:

<div id="response_div_initials_1">
</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_EconomyColumns_1">
</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>

<div id="response_div_initials_2">
</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_EconomyColumns_2">
</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>

I tried different variations of $("[id^=’response_div_’]") but havent had success with any attempts I have tried.

Answers

This is what you want…?

the HTML

<h2>Form 1</h2>
<form>
  <div class="message"></div>
  <input type="text" name="name-a">
  <button type="submit">Submit</button>
</form>

<h2>Form 2</h2>
<form>
  <div class="message"></div>
  <input type="text" name="name-b">
  <button type="submit">Submit</button>
</form>

then jQuery

$('form').submit(function(e){
   
   e.preventDefault();
   
   let data = $(this).serialize();
   let msgBox = $(this).find('.message');
   
   $.ajax({
     type: 'POST',
     url: 'update_userdata.asp',
     data: dataString,
     success: function(){
       msgBox.html("Put your html message here that will display according to the submited form");
       // Once we have the message we show the message box
       msgBox.css('display', 'block');

     }
   });
   

});

and some CSS

.message {
  border: 1px solid red;
  padding: 4px;
  text-align: center;
  width: 100px;
  margin: 4px;
  display: none;
}

the working demo https://jsfiddle.net/jozsefk/1yw7c9x3/ Please note, that this is just an example to show you how to do it and you must adapt this to your code.
Also this will display your input name and value if exists based on a form submited.

Here is the code I have last tried:

<div class="message" style="background-color: #28a745;"></div>
</div>
<form name="Initials1"  id="Initials1" 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="Initials1" value="Submit">Send</button>
  </fieldset>
</form>


<script>
$('form').submit(function(e){
   
   e.preventDefault();
   
   let data = $(this).serialize();
   let msgBox = $(this).find('.message');
   
   $.ajax({
     type: 'POST',
     url: 'update_userdata.asp',
     data: dataString,
     success: function(){
       msgBox.html("<p>Hello World!</p>");
       // Once we have the message we show the message box
       msgBox.css('display', 'block');

     }
   });
});
</script>

The message CSS from you is still in the doc aswell

If you have 100+ form, I would suggest event delegation for one event listener listens multiple forms.

If those response_div_ are just for displaying message to a specific form, but not for storing data, I suggest you to not setting a unique id to them. Instead, I move the response div under the form and set it with form_response class so you know which div to update.

I also put the styling into <style> so you don’t need to handing css inside the script.

I usually don’t write html within string literal. To have a icon after the response message, you can offload it to CSS which makes your script neater. Check the form_response::after style. Font awesome has an article on that.

p.s. you need to fix the submit button and form name. There are 2 EconomyColumns1 and Initials2 form.

$('html').on('submit', 'form', function(e) {
  e.preventDefault();

  var dataString = $(this).serialize();
  // obtain the submitting form with e.currentTarget
  // then search the tree down for div with class form_response
  let responseDiv = $(e.currentTarget).children('div.form_response');

  $.ajax({
    type: "POST",
    url: "https://6049aeb7fb5dcc001796a5ad.mockapi.io/foobar", // mock api for testing
    data: dataString,
    success: function() {

      $(responseDiv)
        .html("Løn Information er nu opdateret")
        .hide()
        .fadeIn(1500, function() {
          // what is this line for?
          $("#message").append("");
        })
        // wait 5 second
        .delay(5000)
        // fade out
        .fadeOut(1500);
    }
  });

});

.form_response {
  display: none;
  background-color: #28a745;
  color: white;
}

.form_response::after {
  font-family: "Font Awesome 5 Free";
  content: "f058";
  font-weight: 900;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form name="Initials2" id="Initials2" action="">
  <div class="form_response"></div>
  <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>



<form name="EconomyColumns1" id="EconomyColumns1" action="">
  <div class="form_response"></div>
  <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>


<form name="Initials2" id="Initials2" action="">
  <div class="form_response"></div>
  <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>


<form name="EconomyColumns1" id="EconomyColumns1" action="">
  <div class="form_response"></div>
  <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>

Please signup or login to give your own answer.

Click here to cancel reply.

Dynamically target specific DIV´s with unique ID in Ajax – Jquery ajax

Answers