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>