POST without redirect with PHP

Question

I have a simple form for a mailing list that I found at http://www.notonebit.com/projects/mailing-list/

The problem is when I click submit all I want it to do is display a message under the current form saying "Thanks for subscribing" without any redirect. Instead, it directs me to a completely new page.

<form method="POST" action="mlml/process.php"> 
    <input type="text" name="address" id="email" maxlength="30" size="23"> 
    <input type="submit" value="" id="submit"name="submit"  >
</form>     

Answer 1

You will need AJAX to post the data to your server. The best solution is to implement the regular posting, so that will at least work. Then, you can hook into that using Javascript. That way, posting will work (with a refresh) when someone doesn't have Javascript.

If found a good article on posting forms with AJAX using JQuery .

In addition, you can choose to post the data to the same url. The JQuery library will add the HTTP_X_REQUESTED_WITH header, of which you can check the value in your server side script. That will allow you to post to the same url but return a different value (entire page, or just a specific response, depending on being an AJAX request or not). So you can actually get the url from your form and won't need to code it in your Javascript too. That allows you to write a more maintanable script, and may even lead to a generic form handling method that you can reuse for all forms you want to post using Ajax.

Answer 2

Quite simple with jQuery:

<form id="mail_subscribe"> 
  <input type="text" name="address" id="email" maxlength="30" size="23">
  <input type="hidden" name="action" value="subscribe" />
  <input type="submit" value="" id="submit"name="submit"  >
</form>

<p style="display: none;" id="notification">Thank You!</p>

<script>
$('#mail_subscribe').submit(function() {
  var post_data = $('#mail_subscribe').serialize();
  $.post('mlml/process.php', post_data, function(data) {
    $('#notification').show();
  });
});

</script>

and in your process.php:

<?php

if(isset($_POST['action'])) {

switch($_POST['action']) {
  case 'subscribe' :
  $email_address = $_POST['address'];

  //do some db stuff...
  //if you echo out something, it will be available in the data-argument of the
  //ajax-post-callback-function and can be displayed on the html-site
  break;
}

}

?>

Answer 3

It redirects to a different page because of your action attribute.

Try:

    <form method="POST" action="<?php echo $_SERVER['PHP_SELF'] ?>"> 
        <input type="text" name="address" id="email" maxlength="30" size="23" /> 
        <input type="submit" value="" id="submit" name="submit" />
    </form> 

<?php if (isset($_POST['submit'])) : ?>
   <p>Thank you for subscribing!</p>
<?php endif; ?>

The page will show your "Thank You" message after the user clicks your submit button.

Also, since I don't know the name of the page your code is on, I inserted a superglobal variable that will insert the the filename of the currently executing script, relative to the document root. So, this page will submit to itself.