HTML form with PHP - submitting and staying on same page

Question

I have a form on a website (www.mywebsite.com). I have a PHP script that sends me an e-mail with information when somebody submits a form on my website. But with action="submitform.php" in the form, it updates the site to the URL www.mywebsite.com/submitform.php. I would like it to stay on the main site (index).

The solution for this: I added header("Location: http://mywebsite.com"); die(); to my PHP code. In this way, users will be redirected to the main site when they have submitted code.

However, this pose a new problem.

Whenever someone submit the form, I would like to display a message such as "Mail has been sent". To make this work, I tried to have a small JavaScript code, basically

document.getElementById("message").innerHTML = "Mail has been sent."

... and <div id="message"></div> to my HTML code. Which works...... However, due to my PHP script redirecting me to my website (with header) when someone is submitting the form, the message will only be displayed for like half a second or something.

Anyone know any workarounds for this? Thanks in advance. I can provide more detail if needed, but my problem should be clear from this. Hope anybody is able to spot my mistake...

You could probably use ajax for this and clear the inputs on submission, along with a session/token as a serverside method. — Funk Forty Niner, Aug 31 '17 at 12:06

Shane A. Workman · Answer 1 · 2017-10-11T13:08:20.913

I use javascript and ajax for most of my form post. Works wonderful. Ajax can grab the form information in a form object or pass it as an array. URL is your php proc page, there it will come back with whatever you "print/echo" in a data object that is passed into the success function. Use this in your HTML,

<input type="button" onclick="submitForm();" value="Submit">

Javascript,

 function submitForm(){
     //Validate INPUT first. Then grab the form.
     form = new FormData($('#frmIdHere')[0]);
     $.ajax ({
           type: 'POST',
           dataType: 'text',
           url: url,
           data: form,
           success:data => {
              //Success message here.
              //clear form here.
           },
           error: () => {
              // error message here.
           }
      });
}

php process file use,

 $inputFromForm = (isset($_REQUEST["NameOfInputFromForm"])) ? strip_tags($_REQUEST["NameOfInputFromForm"]) : "-";

score 3 · Answer 2 · answered Aug 31 '17 at 12:12

Without using Ajax (which means you can send the form without refreshing the page), you have two options. Either send the form to a different file, process it, and redirect back - but with a GET parameter to indicate success or failure. Alternatively, just post to the same page (so the handling of the form happens in the same page - I recommend the first alternative).

If you want to use the post-redirect-get pattern, you would use

header("Location: /?status=success");
exit;

when the form was successfully handled in your submitform.php file.

Then you just check what the message in $_GET['status'] was, and display the message accordingly in your index.php file.

if (isset($_GET['status']) && $_GET['status'] == 'success') {
    echo "Your message was successfully sent!";
}

This logic can be developed further to have different parameters, to post messages for success and failure, if that's needed for the application.

I like this, but I try to use the session for the status rather than passing it in the URL so there's less chance of people seeing the status message when it isn't relevant. — Don't Panic, Aug 31 '17 at 12:42

Jakumi · Answer 3 · 2017-08-31T13:06:36.457

assumption: you want the user to stay on the page with the form.

in that case you probably don't return false / stop event propagation in your calling code.

let's say, you call your ajax like this:

<form onsubmit="submitform(this);" ...>[form]</form>

onsubmit does the following, it executes anything that is in it's attribute value (submitform(this)) and if it returns some non-false value, it will actually do the action of the form, as if the onsubmit wouldn't have existed. I assume this is exactly what's happening in your case.

To avoid this:

<form onsubmit="submitform(this); return false">[form]</form>

the return false will stop the form from being submitted, after it was already submitted by ajax. this also has the benefit of still working, if the user has javascript disabled.

if my assumption is false however ...

if you want to refresh the page, don't even use ajax and just add a parameter to the url that triggers the message to show. or add the message to the session in php and clear it out of there after displaying.

score 1 · Answer 4 · answered Aug 31 '17 at 12:14

To doing this, You can use a SESSION var to store message send type (success or failed) and test it everytime on main page, if exist, display message and unset $_SESSION var !

Like this : MAIN

    if(isset($_SESSION['message'])){
    if($_SESSION['message'] == 'success'){
        echo "Yeah !";
    }else{
        echo "Problem";
    }
    unset($_SESSION['message']);
}

MESSAGE

    if(mail()){
    $_SESSION['message']='success';
}else{
    $_SESSION['message']='error';
}

1

np @thesystem, my pleasure ! – Azee Aug 31 '17 at 12:20

score 1 · Answer 5 · answered Aug 31 '17 at 12:30

1

You can set interval and then redirect them to desired page.

<script>
setInterval(function(){ window.location.href="http://mywebsite.com" }, 5000);
</script>

answered Aug 31 '17 at 12:30

Ndroid21

400
1
8
19

HTML form with PHP - submitting and staying on same page

5 Answers5

Linked