Submit a form with Ajax

Question

I'm making a user script for a site, and my goal is to submit a form on a page that I haven't opened. If I remove all unneeded bits from the page with the form that I want to submit, this is what is left (censoring the links):

<form action="http://foo.com/supply/" method="POST" name="supplyContractForm">
<input type="hidden" name="supplyContractData[selected][]" value="2244068">
<input type="type" name="supplyContractData[party_quantity][2244068]" value="123">  
<input type="text" value="0" name="supplyContractData[quality_constraint_min][2244068]">
<input type="submit" name="applyChanges">
</form>

It's all about the third line: with the 'value="123"'. I want to change that value to "222". What do I do: I change the input value from "123" to "222", I press the submit button, and the form submits: the page reloads, and the value shown is "222". Exactly as I want.

Now, this was all manual, and I want it scripted.

This works:

$("input:submit").click();

However, this doesn't work:

$("form").submit();

And this doesn't work either:

$.post($("form").attr("action"), $("form").serialize())

How can I post this form using Ajax, in a way I can change the value from http://foo.com/main/?

Note: I can only do things client-side, I'm just making a user script, and I can't see the server-side code.

Richard Deurwaarder · Accepted Answer · 2014-02-25T20:45:26.320

-1

This would do the trick

Html, notice the addedd class for cleaner js:

<form action="http://foo.com/supply/" method="POST" name="supplyContractForm">
    <input type="hidden" name="supplyContractData[selected][]" value="2244068">
    <input class="changer" type="type" name="supplyContractData[party_quantity][2244068]" value="123">  
    <input type="text" value="0" name="supplyContractData[quality_constraint_min][2244068]">
    <input type="submit" name="applyChanges">
</form>

Js:

$('form input.changer').val('222');
$('input:submit').click();

The reason why $('form').submit() might not work would be because $('form') matches multiple element, ie do you have multiple forms in your html? if so make the selector more unique, via either adding ids or classes so your selected becomes:

$('#formid').submit();

Ajax

This doesn't use ajax though, for that you would need:

var form = $('form');
$.ajax({
    url: form.attr('action'),
    type: form.attr('method'),
    data: form.serialize(),
    success: function(){
        alert('Form posted via ajax!');
    }
});

edited Feb 25 '14 at 20:45

answered Feb 25 '14 at 20:39

Richard Deurwaarder

2,023
1
26
40

I lifted the form code out of the page, and placed it into a jsfiddle. From there I do all the tests. So, the code I've placed is the only code used. Thus, there aren't any other forms. http://jsfiddle.net/XiozZe/nMgF9/ – XiozZe Feb 25 '14 at 20:54
$('form').submit() works there, same as the ajax see: http://jsfiddle.net/nMgF9/4/ except for the url ofcourse – Richard Deurwaarder Feb 25 '14 at 21:00
On the jsfiddle site, it looks like it works. But if I look on the supply page, it shows something different. When I press the submit button, the supply page loads in the jsfiddle result screen, and the value is permanently changed. (Permanently = if I refresh, it's still there) However, if I try the same thing with the ajax, nothing happened. When I use $("form").submit(), the supply page is loaded in the result screen, but the value isn't changed. – XiozZe Feb 25 '14 at 21:13
@XiozZe try to add alert($('form').serialize()); before the ajax call, you can then see what data is being sent to the server. – Richard Deurwaarder Feb 25 '14 at 21:21
I think we first have to get back to the .submit(): http://jsfiddle.net/XiozZe/nMgF9/7/. Normally, when I have the .submit() working, the Ajax isn't that hard. – XiozZe Feb 25 '14 at 21:43
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/48417/discussion-between-xeli-and-xiozze) – Richard Deurwaarder Feb 25 '14 at 22:04
Thanks man! It works completely fine now! Just add that single line to your answer for the others, you deserve more upvotes! http://jsfiddle.net/XiozZe/nMgF9/11/ – XiozZe Feb 25 '14 at 22:55

Submit a form with Ajax

1 Answers1