Redirect Another Page After Successful Form Submission

Redirect another page after successful form submission

Replace header("Location:http://www.google.com");

with:

window.location.href = 'https://www.google.com';

header() is a PHP function which means "before you send the response back to the client (browser), add the Location: header. This header tells chrome to redirect using a 301 or 302 status code. PHP code obviously won't work in Javascript.

Considering javascript ONLY happens in the browser there are no headers that need to be set. You can just tell javascript to directly navigate the current window to the URL you specify.

Redirect to another page based on form input in Next.js

Ok..
For this you can use useRouter hook provided by the nextjs

first you can import it

import { useRouter } from "next/router";

then you can create it's instance and use it to push the react app to new route
based on the value of the given form input value

Here I am using a react state to go to new route

import {useRouter} from 'next/router'
import {useState} from 'react'
export default function SampleComponent(){
    const router = useRouter()
    const [route, setRoute] = useState()
    const handleSubmit = (e) => {
        e.preventDefault()
        router.push("someBasePath/" + route)
    }
    return(
        <div>
            <h1>Example Form</h1>
            <form onSubmit={handleSubmit}>
                <input type="text" name='route' onChange={(e)=>{setRoute(e.target.value)}} />
                <button type="submit">Submit</button>
            </form>
        </div>
    )
}

I hope you are familial with react and useState hook

I hope it will solve your problem

Trouble with redirect after form submission

You can throw window.location.href="{path}" in your success function. You will want this after your alert, as soon as the alert is clicked you will be redirected - this might make everything else youre doing in success a moot point

     $.ajax({
            url: "formHandler.php", //You can replace this with MVC/WebAPI/PHP/Java etc
            method: "post",
            data: formData,
            contentType: false,
            processData: false,
            success: function () {
               //Firing event if File Upload is completed!  
                alert("Upload Completed");
                /* you will redirect before the users have a chance to see these actions take effect unless you move them before the alert
                btn.prop("disabled", false); 
                btn.val("Submit");
                $("#File1").val("");
                */
                window.location.href = 'https://www.pmd-fla.com/thankyou2.html'; 
            },
            error: function (error) { alert("Error"); }
        });

Alternatively you could try to submit your form instead

Assuming form is set up as so...

<form id="inquiry" action="https://www.pmd-fla.com/thankyou2.html">


 $.ajax({
        url: "formHandler.php", //You can replace this with MVC/WebAPI/PHP/Java etc
        method: "post",
        data: formData,
        contentType: false,
        processData: false,
        success: function () {
           //Firing event if File Upload is completed!  
            alert("Upload Completed");
            /* you will redirect before the users have a chance to see these actions take effect unless you move them before the alert
            btn.prop("disabled", false); 
            btn.val("Submit");
            $("#File1").val("");
            */
            $('#inquiry').submit()
        },
        error: function (error) { alert("Error"); }
    });

---

Related Topics