I have multiple forms which are dynamically generated at runtime by a template engine, in order to generate an ajax request on their submission i have used the "on" method to delegate the event.
$("#friendRequestsList").on("submit", "[id^=friendReqResponse-form]", function(){
var form = this;
$(form).ajaxSubmit({
url:'URL',
type:'post',
dataType: 'json',
success: function(data) {
DO SOMETHING
}
});
return false;
});
The form has 2 submit buttons, and i need to detect which of them was clicked and pass this information to the ajax request. However i am having a hard time knowing which of the submit inputs in the form was clicked, as they have also been dynamically generated. Ideas?
I hope it will help you :
$("#friendRequestsList").on("submit", "[id^=friendReqResponse-form]", function(){
var submit1 = $(this).attr('value');
var formData = new FormData();
formData.append('submit1', submit1);
$.ajax({
url:'URL',
type:'post',
data:formData,
dataType: 'json',
success: function(data) {
DO SOMETHING
}
});
return false;
});
following Connors suggestion of using the click event instead of submit, i have managed to get the the submit button like so:
$("#friendRequestsList").on("click", "[id^=submit1], [id^=submit2]", function(e) {
var input = this;
var form = $(input).parent();
$(form).ajaxSubmit({
url:'URL',
type:'post',
dataType: 'json',
success: function(data) {
DO SOMETHING
}
});
e.preventDefault()
});
of course, this wouldn't work so well if my form had input fields as it wouldn't be triggered on a form submission from a keypress Enter. Also, you still need to append the input identifiying info to the ajax request.
I did this by adding
data: {submit:input.value},
to the ajaxSubmit settings
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.