Set the Form action after the form has been submit jQuery

Question

How do i "SET" the action(not changing) AFTER the form has been submit?

<form id="serialize" action="newjob.php?serialize=newjob" method="post">
<button id="jobsearch" name="jobsearch">GET FROM DB</button>
</form>

AFTER the form has been submit and showing the value i need from db, SET the new action for the form, example after submit how do i get like this one so i can add the value to db?

<form id="serialize" action="newjob.php?faulty=newjob" method="post">
<button id="jobsearch" name="jobsearch">ADD TO DB</button>
</form>

as far as i know by search on the net this jquery only CHANGING(onsubmit) and not after submit

$(function(){
$('#serialize').submit(function (event)
{
    var newaction = 'newjob.php?faulty=newjob';
    $(this).attr('action', newaction);
});
});

it is possible to had AFTER form has been submit then set the new form action for the same form? the only thing i need to accomplish this is because i cant have a form inside a form(nested)

Why do you need a new action? Sounds like a bad solution to a problem. — Jay Blanchard, Jul 23 '15 at 17:44
1st form is to get the value from database the paste it to many textbox, 2nd form to insert the value to the database while creating new id. i need to achive this because i cant have 2 form in the nest — Zulfakar Zukri, Jul 23 '15 at 17:46
That logic seems fairly faulty. Not sure what you mean by "can't have second form in the nest". Edit your original post to describe in more detail what you're trying to accomplish. — Jay Blanchard, Jul 23 '15 at 17:48
what i mean is this one http://stackoverflow.com/questions/3430214/form-inside-a-form-is-that-alright — Zulfakar Zukri, Jul 23 '15 at 17:49
Your form is submitted in normal way (no AJAX), so that the new document is loaded AFTER the form has been submitted... You can't change the `action` attr in this case. You could do that using AJAX — Artur Filipiak, Jul 23 '15 at 18:01

Artur Filipiak · Answer 1 · 2015-07-23T19:01:51.313

You can't modify form attributes inside .submit() event handler since it has been submitted using a typical submit method.
After the from has been submitted, the new document is loaded and any submit event set for the form is not catched yet.

You have two options to solve the problem.

AJAX request instead of traditional form submition (recommended);
You should handle server response (data sent back from PHP) on the original page, like so (without modifying your HTML):

$('#serialize').submit(function (event){
    // prevent typical submit method:
    event.preventDefault();
    var that = $(this), newaction;
    $.ajax({
        url     : that.attr('action'),
        method  : 'GET',
        data    : that.serialize(),
        // dataType : set accordingly to the type of data received from PHP,
        success : function(data_received_from_php){
            if(that.attr('action') === 'newjob.php?faulty=newjob'){
                newaction = 'newjob.php?serialize=newjob';
                // do something with "data_received_from_php" for that specific "action" ...
            }else{
                newaction = 'newjob.php?faulty=newjob';
                // do something with "data_received_from_php" for that specific "action" ...
            }
            // set the new action attribute:
            that.attr('action', newaction);
        },
        error   : function(){
            // handle errors ...
        }
    });
});

Simply check whether url contains specific string, and based on that modify the action attr of the form (I'd treat it as a workaround since these days, AJAX is much more "user friendly" in submitting forms):
```
if (window.location.href.indexOf("?serialize=newjob") > -1) {
    $('#serialize').attr('action', 'newjob.php?faulty=newjob');
}
```

score 1 · Answer 2 · answered Jul 23 '15 at 17:55

1

From what i see you are using jQuery and i've done something similar before.

The trick is to change your Submit button by a regular button that trigger a function to do what you have to do and finally submit the form using .sumbit()

Something like this:

<form id='changingForm' .... >
<button onclick='changingFunction()' ...>
</form>

function changingFunction(){
    var newaction = 'newjob.php?faulty=newjob#tabs-2';
    $('#changingForm').attr('action', newaction);
    $('#changingForm).submit();
}

This code probally won't work AS IS for your case scenario but i'm sure you can fingure the logic behind it. jQuery is too far behind me to give you an absolute answer.

Hope it helps.

answered Jul 23 '15 at 17:55

Louis Loudog Trottier

1,367
13
26

This is from my understanding that you want to change somthing after the submit button has been pressed and before it's sent to the server. If not you could use a callback to change the form according to the data returned after the 1st form was sent. – Louis Loudog Trottier Jul 23 '15 at 17:58
im sorry but its not after submit has been press, but after submit has been done then change the form without auto submitting – Zulfakar Zukri Jul 23 '15 at 18:00

Set the Form action after the form has been submit jQuery

2 Answers2