- ASP.NET
- JavaScript
- jQuery
- AJAX
- JSON
How do I serialize data in a button's surrounding form?
I have a simple form:
the SubmitNotification function is as follows:
$(this).closest('form').se
<div id="notify-alert"></div>
<form method="post">
<input type="hidden" name="memberID" value="5">
<input type="hidden" name="requestID" value="23">
<input type="button" name="submitNotify" value="Notify" onclick="SubmitNotification();">
</form>
the SubmitNotification function is as follows:
function SubmitNotification(){
//these next four lines were to check what was going on
var thisData = $(this).closest('form').serialize();
console.log('begin');
console.log(thisData);
console.log('end');
$.ajax({
type: "POST",
url: "ajax-notify.cfm",
data: $(this).closest('form').serialize(),
dataType: "text",
success: function(data, status) {
$('#notify-alert').html(data);
},
error: function(data, status) {
$('#notify-alert').html(data);
}
});
};
$(this).closest('form').se
I would suggest a couple of changes to your approach. First use an actual BUTTON element in your HTML. You can also strip out the name, unless you are specifically using it on your back-end.
Let me know if the above does what you are looking for, or if you have any other questions.
<div id="notify-alert"></div>
<form method="post">
<input type="hidden" name="memberID" value="5" />
<input type="hidden" name="requestID" value="23" />
<input type="button" name="submitNotify" value="Notify" />
</form>
$('input:button[name="submitNotify"]').on("click", function(e) {
e.preventDefault();
formData = $(this).closest('form').serialize();
$.ajax({
type: "POST",
url: "ajax-notify.cfm",
data: formData,
dataType: "text",
success: function(data, status) {
$('#notify-alert').html(data);
},
error: function(data, status) {
$('#notify-alert').html(data);
}
});
});
Let me know if the above does what you are looking for, or if you have any other questions.
