JQuery Changing form url after submitting form

Question

I have run into a strange problem, I am changing form url after form submission. I have changed form fields and they are changing perfectly but action url is not changing... Here is HTML code..

<form action="" method="post" id="payment-form">
    <input type="hidden" id="email" name="email" value="">
    ....
</form>

JQuery Code

$.ajax({
    url: form_url,
    type: 'post',
    context:this,
    data: $("#payment-form").serialize(),
    dataType: 'json',
    success: function(data) {
        if(data.success) {
            $('#payment_form').attr("action", data.url);
            $('#email').val(data.email);
            alert($("#payment-form").attr('action'));
            //$("#payment-form").submit();

        }
        else {
            $('#error').html(data.errors).addClass('error').fadeIn("slow").fadeOut(9000);
        }
    }
});

The alert shows me no url, why is that?

Update

I have setup $('#payment_form').attr("action", data.url); it shows me no url but alert(data.url) shows me url.

what do you get when you log data.url? Also, you could target the form specifically in case "this" is no longer within scope — Kai Qing, Jan 12 '13 at 02:15
This isn't why you're having the issue, but it might be better to just leave out the action attribute in your markup and then set it once you have a url: http://stackoverflow.com/questions/1131781/is-it-a-good-practice-to-use-an-empty-url-for-a-html-forms-action-attribute-a — brandwaffle, Jan 12 '13 at 02:20
You are referring to '#payment_form' but the markup has an id of 'payment-form' (note underscore vs dash). — brandwaffle, Jan 12 '13 at 02:22
@brandwaffle You are a real guru! It worked with $(this) as well! Can you answer this so I can accept it. — Maximus, Jan 12 '13 at 02:25

wonde · Answer 1 · 2013-01-12T02:29:33.997

1

change

$(this).attr("action", data.url);

to

$('#payment-form').attr("action", data.url);

edited Jan 12 '13 at 02:29

answered Jan 12 '13 at 02:18

wonde

1,181
10
20

@wode i was testing with this but it was not working. I have updated my code this does not change url. I have also updated my question. – Maximus Jan 12 '13 at 02:21
1

@wonde Should probably update the id selector to #payment-form – brandwaffle Jan 12 '13 at 02:22

brandwaffle · Accepted Answer · 2013-01-12T02:31:14.930

1

UPDATE: the cause of this is the empty action parameter in the markup. If you leave that out of the markup completely, the attribute can be set by jQuery when you get data.url back from the ajax call.

edited Jan 12 '13 at 02:31

answered Jan 12 '13 at 02:25

brandwaffle

1,252
9
11

I actually left form url blank that was the reason it was not working. You answered this in your first comment. – Maximus Jan 12 '13 at 02:26
Seriously? I totally thought I was way off base there...ok, updating. – brandwaffle Jan 12 '13 at 02:29
I believe you that it's working, but I can't get the context as you have it in the ajax call to show the form (it's returning the window). Here's the fiddle...any ideas (i.e. maybe you're making the ajax call in another function call that's setting "this" to the form)? http://jsfiddle.net/eBADG/4/ – brandwaffle Jan 12 '13 at 02:43
For comparison, here's a working fiddle where I set the context to the form explicitly: http://jsfiddle.net/eBADG/6/ – brandwaffle Jan 12 '13 at 02:48

score 0 · Answer 3 · answered Jan 12 '13 at 02:19

0

this within the success callback is not the form

answered Jan 12 '13 at 02:19

charlietfl

170,828
13
121
150

I forgot to replace this with `$('#payment_form').attr("action", data.url);` this one is also not working. – Maximus Jan 12 '13 at 02:22

score 0 · Answer 4 · answered Jan 12 '13 at 02:25

0

I don't see an element with the ID payment_form:

$('#payment_form').attr("action", data.url);

Try this instead:

$('#payment-form').attr("action", data.url); // <--- notice the 'dash' instead of the underscore

answered Jan 12 '13 at 02:25

Kevin Boucher

16,426
3
48
55

JQuery Changing form url after submitting form

JQuery Code

Update

4 Answers4