Signup/Sign In
Ask Question
Not satisfied by the Answer? Still looking for a better solution?

JQuery AJAX submit form

I have a form with name orderproductForm and an undefined number of inputs.

I want to do some kind of jQuery.get or ajax or anything like that that would call a page through Ajax, and send along all the inputs of the form orderproductForm.

I suppose one way would be to do something like

jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...

However I do not know exactly all the form inputs. Is there a feature, function or something that would just send ALL the form inputs?
by

2 Answers

aashaykumar
This is a simple reference:

// this is the id of the form
$("#idForm").submit(function(e) {

e.preventDefault(); // avoid to execute the actual submit of the form.

var form = $(this);
var url = form.attr('action');

$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});


});
kshitijrana14
Another similar solution using attributes defined on the form element:
<form id="contactForm1" action="/your_url" method="post">
<!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
var frm = $('#contactForm1');

frm.submit(function (e) {

e.preventDefault();

$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
});
});
</script>

Login / Signup to Answer the Question.