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
Set a variable to the DIV before the form, and use that in the callback function.
@Barmar .. Here is the updated HTML form