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.
3
Answers
This is what you want…?
the HTML
then jQuery
and some CSS
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:
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 withform_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
andInitials2
form.