Skip to content
Advertisement

Dynamically target specific DIV´s with unique ID in Ajax

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.

Advertisement

Answer

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>
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement