Redirecting to index.html after submit a form - How to show a message

Question

On my form contact of my site, when i pressed the submit button the site would open a blank page (the php file), in order to remove that, i added

header("Location: ../index.html");

to my php file, it works, it mantains the same page after i submit my data, but it instantaneous goes to index.html, even having the code to show a message of success or failure the message doesnt show up.

Not sure why, its because of this method, i saw many topics talking about using AJAX, but i find that so confusing to me, is that a must-use on my site ? Can someone help me getting it working into my site ?

The site on a free host:

tential.co.nf

HTML:

    <!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/fixedbar.js"></script>
    <script src="js/slider.js"></script>
    <meta charset="utf-8">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
    <link href="styles.css" rel="stylesheet" type="text/css">
    <title> Layout </title>
  </head>
  <body>


    <div class="header" id="top">
      <img class="logo" src="img/logo.png">
      <div class="menu">
        <a href="#" class="current">Home</a>
        <a href="#tour">Product Tour</a>
        <a href="#">Pricing</a>
        <a href="#">Try</a>
        <a href="#vision">Vision</a>
      </div>
      <div class="move">
        <div class="center">
          <h1>Move work forward!</h1>
          <p>Optential keeps your team organized, connected, and focused on results.</p>
        </div>
      </div>
      <div class="mail1">
        <form action="form/form.php" method="post">
          <h1>Try Now!</h1>
          <input name="email" class="email" type="text" placeholder="Enter your email address ...">
          <input type="submit" value="Get started for free">
        </form>
      </div>
    </div>

    <div class="mail2">
        <form action="form/form.php" method="post">
        <h1>Try Now!</h1>
        <input type="text" placeholder="Your Email here...">
        <input type="submit" id ="btn" value="Get started for free">
        <a class="top" href="#top">Top</a>
      </form>
    </div>


    <div id="slider">
        <div class="images">
          <div class="controls">
          <img src="img/3.png" alt="Image-1" />
          <img src="img/2.png" alt="Image-2" />
          <img src="img/1.png" alt="Image-3" />
          <img src="img/4.png" alt="Image-4" />
        </div> 
      </div>
    </div>

    <div class="barra2"></div>

    <div class="mobile">
      <div id="pc"> 

      </div>

      <div id="pctexto">

      </div>
    </div>

    <div class="contact">
      <div class="textocon">
        <div>
          <h1>Optential</h1>
          <p>A new management system<br>for a new management paradigm!</p>
        </div>
      </div>
      <form method="POST" action="form/contactengine.php">
        <div class="col1">
          <h1>Contact us!</h1>
          <input type="text" name="Name" size="50" placeholder="Name"/>
          <input type="text" name="Email" size="50" placeholder="Email"/>
          <input type="text" name="Subject" size="50" placeholder="Subject"/>
        </div>
        <div class="col2">
          <textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
          <input type="submit" id="btn"value="Send email"/>
        </div>
      </form>
      <div class="info">
        <div>
          <h1>Mail Us !</h1>
          <p>Rua Andrade Corvo, 242</p>
          <p>sala 206</p>
          <p>4700-204 Braga</p>
          <p>Portugal</p>
        </div>
        <div>
          <h1>Call Us !</h1>
          <a href="#"><p>+351 987654323</p></a>
          <a href="#"><p>+351 987654323</p></a>
          <a href="#"><p>+351 987654323</p></a>
        </div>
        <div>
          <h1>Email Us! </h1>
          <a href="#"><p>code@angel.com</p></a>
          <a href="#"><p>code_hr@angel.com</p></a>
          <a href="#"><p>code_support@angel.com</p></a>
        </div>
        <div>
          <h1>Join Us! </h1>
          <a href="#"><img src="img/facebook.png"></a>
          <a href="#"><img src="img/gplus.png"></a>
          <a href="#"><img src="img/twitter.png"></a>
          <a href="#"><img src="img/instag.png"></a>
        </div>
      </div>
    </div>
<script src="js/slider.js"></script>
  </body>
</html>

PHP:

    <?php

$EmailFrom = "no-reply@site.com";
$EmailTo = "duarte.andrade@team.androidpt.com";
$Name = Trim(stripslashes($_POST['Name'])); 
$Email = Trim(stripslashes($_POST['Email'])); 
$Subject = Trim(stripslashes($_POST['Subject'])); 
$Message = Trim(stripslashes($_POST['Message'])); 

// validation
$validationOK=true;
if (!$validationOK) {
  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
  exit;
}

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Subject: ";
$Body .= $Subject;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to success page 
if ($success){
  echo "<script type='text/javascript'>alert('Submitted successfully! Thanks for contacting Us')</script>";
}
else{
  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
}
    header("Location: ../index.html");
?>

you have to use ajax for this....or you won't able to use alert box...you can print the value after error/success using sessions... — Rahul, Jun 26 '15 at 11:52
You could change your redirection page to PHP, and then send a URL parameter along with the redirect, and then display a message based on what URL parameter. — Lee, Jun 26 '15 at 16:08

Lance · Answer 1 · 2015-06-26T16:05:05.567

1

You could use a meta refresh tag.

Have your php display a page withy your success message and also include this:

<meta http-equiv="refresh" content="5; url=http://example.com/">

The "5" in content= is seconds. Set this for how long you want to display the success message. Also, set the url= to the page you want to go to next.

In your specific case, try modifying your code like this:

if ($success){
    echo "<script type='text/javascript'>alert('Submitted successfully! Thanks for contacting Us')</script>";
    echo '<meta http-equiv="refresh" content="0; url=http://example.com/">';
}

The alert box will keep the refresh from firing until the alert box is closed.

edited Jun 26 '15 at 16:05

answered Jun 26 '15 at 11:55

Lance

3,824
4
21
29

Where should i put this ? – BugaDroid Jun 26 '15 at 13:57
This would go in the HEAD section of your success page. – Lance Jun 26 '15 at 15:33
There isnt a success page, i want that alert to appear without going to the php blank page when we click "ok". – BugaDroid Jun 26 '15 at 15:39
So make that blank page be a success page. Or, hang on, let me add to my answer. – Lance Jun 26 '15 at 15:43
But i dont want it that way, sorry. – BugaDroid Jun 26 '15 at 15:44
I just tested this and it works fine. You will need to remove the line "header("Location: ../index.html");" completely. – Lance Jun 26 '15 at 16:04
Yea it works ! Thank you ;) Is there any way to keep at the bottom of the page ? – BugaDroid Jun 26 '15 at 16:05

score 0 · Answer 2 · answered Jun 26 '15 at 18:43

Instead of sending the form to other php file for processing you can keep the code on same page and this way submitting the form, If it's been submitted successfully It would stay on the page with alert of success rather than sending form for processing to some php code (existing in some other file/page) and redirecting back to form html page. Hope Its Clear. Below Is code-

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $EmailFrom = "no-reply@site.com";
    $EmailTo = "duarte.andrade@team.androidpt.com";
    $Name = Trim(stripslashes($_POST['Name'])); 
    $Email = Trim(stripslashes($_POST['Email'])); 
    $Subject = Trim(stripslashes($_POST['Subject'])); 
    $Message = Trim(stripslashes($_POST['Message'])); 

    // validation
    $validationOK=true;
    if (!$validationOK) {
      print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
      exit;
    }

    // prepare email body text
    $Body = "";
    $Body .= "Name: ";
    $Body .= $Name;
    $Body .= "\n";
    $Body .= "Email: ";
    $Body .= $Email;
    $Body .= "\n";
    $Body .= "Subject: ";
    $Body .= $Subject;
    $Body .= "\n";
    $Body .= "Message: ";
    $Body .= $Message;
    $Body .= "\n";

    // send email 
    $success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

    // redirect to success page 
    if ($success){
      echo "<script type='text/javascript'>alert('Submitted successfully! Thanks for contacting Us')</script>";
    }
    else{
      print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
    }
}
?><!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/fixedbar.js"></script>
    <script src="js/slider.js"></script>
    <meta charset="utf-8">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
    <link href="styles.css" rel="stylesheet" type="text/css">
    <title> Layout </title>
  </head>
  <body>


    <div class="header" id="top">
      <img class="logo" src="img/logo.png">
      <div class="menu">
        <a href="#" class="current">Home</a>
        <a href="#tour">Product Tour</a>
        <a href="#">Pricing</a>
        <a href="#">Try</a>
        <a href="#vision">Vision</a>
      </div>
      <div class="move">
        <div class="center">
          <h1>Move work forward!</h1>
          <p>Optential keeps your team organized, connected, and focused on results.</p>
        </div>
      </div>
      <div class="mail1">
        <form action="form/form.php" method="post">
          <h1>Try Now!</h1>
          <input name="email" class="email" type="text" placeholder="Enter your email address ...">
          <input type="submit" value="Get started for free">
        </form>
      </div>
    </div>

    <div class="mail2">
        <form action="form/form.php" method="post">
        <h1>Try Now!</h1>
        <input type="text" placeholder="Your Email here...">
        <input type="submit" id ="btn" value="Get started for free">
        <a class="top" href="#top">Top</a>
      </form>
    </div>


    <div id="slider">
        <div class="images">
          <div class="controls">
          <img src="img/3.png" alt="Image-1" />
          <img src="img/2.png" alt="Image-2" />
          <img src="img/1.png" alt="Image-3" />
          <img src="img/4.png" alt="Image-4" />
        </div> 
      </div>
    </div>

    <div class="barra2"></div>

    <div class="mobile">
      <div id="pc"> 

      </div>

      <div id="pctexto">

      </div>
    </div>

    <div class="contact">
      <div class="textocon">
        <div>
          <h1>Optential</h1>
          <p>A new management system<br>for a new management paradigm!</p>
        </div>
      </div>
      <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
        <div class="col1">
          <h1>Contact us!</h1>
          <input type="text" name="Name" size="50" placeholder="Name"/>
          <input type="text" name="Email" size="50" placeholder="Email"/>
          <input type="text" name="Subject" size="50" placeholder="Subject"/>
        </div>
        <div class="col2">
          <textarea name="Message" rows="5" cols="70" placeholder="Message..."></textarea>
          <input type="submit" id="btn"value="Send email"/>
        </div>
      </form>
      <div class="info">
        <div>
          <h1>Mail Us !</h1>
          <p>Rua Andrade Corvo, 242</p>
          <p>sala 206</p>
          <p>4700-204 Braga</p>
          <p>Portugal</p>
        </div>
        <div>
          <h1>Call Us !</h1>
          <a href="#"><p>+351 987654323</p></a>
          <a href="#"><p>+351 987654323</p></a>
          <a href="#"><p>+351 987654323</p></a>
        </div>
        <div>
          <h1>Email Us! </h1>
          <a href="#"><p>code@angel.com</p></a>
          <a href="#"><p>code_hr@angel.com</p></a>
          <a href="#"><p>code_support@angel.com</p></a>
        </div>
        <div>
          <h1>Join Us! </h1>
          <a href="#"><img src="img/facebook.png"></a>
          <a href="#"><img src="img/gplus.png"></a>
          <a href="#"><img src="img/twitter.png"></a>
          <a href="#"><img src="img/instag.png"></a>
        </div>
      </div>
    </div>
<script src="js/slider.js"></script>
  </body>
</html>

Redirecting to index.html after submit a form - How to show a message

2 Answers2