Php updating html

PHP
1

Hi. I have a php page and on this page I have an empty text field. On this page is also a form. When the user clicks submit, another php page sends an email (doesnt display anything to the user). If this email is successfully sent, I need the original php page to display email sent in the empty text field. How would this be possible?

cheers

2

Just out of curiosity, why have two different pages?

3

I thought for clarity, it was best. :eye:

4

Use JS to submit the form via AJAX and have the PHP script return a status message.

5

Is this the only way to achieve this? I have never used ajax before, so its like foreign to me.

6

In which case, take a look at one of the many JS frameworks/libraries, such as jQuery et al.

Actually, here’s a quick demo.

HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssreset/reset-min.css" />
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssbase/base-min.css" />
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssfonts/fonts-min.css" />
    <style type="text/css">
      p#ajax-message{
        display: none;
      }
    </style>
    <title>
      Form Demo
    </title>
  </head>
  <body>
    
    <form id="feedback" action="processor.php" method="post">
      <input name="message" />
      <input id="submit" type="submit" value="submit" />
    </form>
    
    <p id="ajax-message"></p>
    
    <script type="text/javascript">
      $(document).ready(function(){
        $('#submit').click(function(){
          $.ajax({
            type:     'POST',
            url:      $('#feedback').attr('action') + '?ajax=true',
            data:     $('#feedback').serialize(),
            success:  function(data){ $('#ajax-message').html(data).fadeIn(); },
            dataType: 'html'
          });
          return false;
        });
      });
    </script>
    
  </body>
</html>

PHP


<?php
if(false === empty($_GET['ajax'])){
  printf(
    '
    <h6>
      &#37;s
    </h6>
    <p>
      Your Message: %s
    </p>
    ',
    0 === rand(0, 1) ? 'Success!' : 'Whoops!',
    $_POST['message']
  );
  exit;
}
?>