redirect to php script with form inputs after from submit

Question

I have a loading gif that appears on form submit. once it is finished, the page redirects to a php file so that it can do some things with the form inputs. My issue is that when I add in the URL for redirect in the success part of the function, the request is changed to GET and the form inputs are not passed through. With the code below, I can see the variables are being sent in the POST request (using firefox developer browser). But when I uncomment the location.href line once the submit is complete the post type changes to GET and I can no longer see the variables in the console request/headers. Can anyone point me in the right direction please?

Jquery/Ajax

$(function(){
    var form = $('#date_range');
    $(form).submit(function(e){
        e.preventDefault();
        $("#loader").show();
        var fData = $(form).serialize();
        var result = $.ajax({
            type: 'POST',
            url: 'test_loading_gif.php',
            data: fData,
            success: function(e){
                $("#loader").hide();
                //location.href = 'test_loading_gif.php';
            }
        });
    });
});

Why do you want to make two POST requests to the same page with the same data, one after the other? Either use AJAX or a regular form POST to the target page. There's no reason to do both. Basically, you can remove this JavaScript code entirely. — David
– David, Commented Jun 30, 2022 at 17:04
A redirect is always a GET. You could put parameters in the URL, and access them with $_GET. — Barmar
– Barmar, Commented Jun 30, 2022 at 17:05
@David I thought e.preventDefault() prevented the form submit? Where am I making two POST requests? If I do a regular html for submit, I don't think I can achieve my loading gif because the page redirects once it's submitted, correct? — SkylarP
– SkylarP, Commented Jun 30, 2022 at 18:02
@SkylarP: "I thought e.preventDefault() prevented the form submit?" - It does. "Where am I making two POST requests?" - You're currently making a POST request and a GET request, and in the question you are asking how to turn the GET request into another POST request which contains the same data as the POST request you're already making. There's no need to make two separate POST requests with the same data to the same page one after another. Either use AJAX or a form POST. You can keep the loading indicator and keep the current GET request (redirect), since the server already has the data. — David
– David, Commented Jun 30, 2022 at 18:05

David · Accepted Answer · 2022-06-30 18:12:13Z

But when I uncomment the location.href line once the submit is complete the post type changes to GET and I can no longer see the variables in the console request/headers.

Because it's a separate request. You're essentially asking how to make two POST requests to the same page with the same data one after another. There's no reason to do that.

If you just want to POST data to that target page and navigate the user as part of that POST request, remove this JavaScript code entirely. The <form> will POST the data and navigate the user, that's its default behavior. (Well, the default method is GET, but you can set it to POST in the <form> element.)

However, if you want to keep this loading indicator, then go ahead and uncomment your redirect and use that to navigate to the target page. No, it won't contain the data that you already sent to that page. It shouldn't, and doesn't need to. You've already sent that data to the server. Whatever that data is, and whatever it's needed for on the next page, you can store it on the server and fetch it when the user navigates to that page.

It's certainly uncommon to do this, but there's no technical reason not to. It would be more common for these two requests to go to two different endpoints. The AJAX POST request could go to a PHP script which isn't a "page" in the UI sense but just handles data and returns some meaningful result (as JSON). Then the redirect (which is a GET request) would be to a "page" with a UI for the user, and that server-side code can use whatever data was stored as a result of that AJAX request.

It may involve re-thinking how you manage data in your server-side code, that's somewhat outside the scope of what you're showing/asking. But from a purely client/server perspective you only need to send the same data to the server once.

Thanks for your help thus far. I really appreciate it. I think I worded my post incorrectly. I'm going to make a new post.

Collectives™ on Stack Overflow

redirect to php script with form inputs after from submit

Jquery/Ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Jquery/Ajax

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related