How do I process forms (front and back end) on the same page?

Question

I currently have a form that looks like this (using Bootstrap):

I've traditionally processed the form via post to another php file like so

<form action="complete.php" method="post" class="form-inline" role="form">

However, it kind of ruins the user experience when they're taken to a different page, and I've seen something before, where after submitting a form, the text just changed if it was valid. So, the text and form of the above image might just be replaced with "Thank you, your email has been accepted" if they offer a valid email.

So this question is two-part:

First, how do I do this on the backend? I'm using php for simplicity since it was so easy to install.

Second, how do I do this on the front end? Is there a common reference term for this kind of action in JS?

Answering either part of this (both if you can!) would be wonderful. If you have reference documents for me that aren't too complicated (I'm new to this), I'd be more than happy to read them too.

Thank you!

You can use `action=""` and have everything in one page, or better yet, use AJAX. — Funk Forty Niner, Jan 04 '14 at 03:36
Search for php form with ajax. To keep it on the same page, you'd use ajax. — Christina, Jan 04 '14 at 03:37
http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form — Christina, Jan 04 '14 at 03:38
You'd only need to use ajax to do it without a refresh. You could refresh then just echo different content, you know, "Thanks for your submission" instead of the normal form markup — ZombieBunnies, Jan 04 '14 at 03:41

score 2 · Accepted Answer · answered Jan 04 '14 at 04:02

I'm going to extend on what Sam Sullivan said about the Ajax method.

Ajax basically runs any script in the background, making it virtually unnoticeable to the user. Once the script runs you can return a boolean or string to check if the result is true or false.

JS:

function validateForm(){
    $.ajax({
        type: 'POST',
        url: '/path/to/processForm.php',
        data: $('#yourForm').serialize(),
        success: function(output){
            if(output){ // You can do whatever JS action you want in here
                alert(output);
            }else{
                 return true; // this will redirect you to the action defined in your form tag, since no output was found.
            }
        }
    });
    return false;
}

Then in your processForm.php script, you validate the data through $_POST. Whatever you echo out in this script, will be your output.

For more, http://api.jquery.com/jquery.ajax/

score 1 · Answer 2 · answered Jan 04 '14 at 03:46

Either include the PHP and form logic on the same page:

<?php
if(isset($_POST['submit'])) {
  // Submit logic
  echo 'Success';
}
?>

<form action="" method="POST">
  <!-- etc -->
  <input type="submit" name="submit" value="Submit" />
</form>

Or you can submit it with AJAX:

<form action="" method="POST" onsubmit="submitForm(this); return false;">
  <!-- etc -->
  <input type="submit" name="submit" value="Submit" />
</form>

<script type="text/javascript">
  function submitForm(form)
  {
    // This can use AJAX to submit the values to a PHP script
  }
</script>

If you have jQuery, you don't need to use an inline event handler (which is better):

<script type="text/javascript">
  $('form').submit(function(event) {
    event.preventDefault();

    $form = $(event.target);
    // AJAX here
  });
</script>

This should be enough to get started..let me know if you have specific questions.

score 0 · Answer 3 · answered Jan 04 '14 at 03:39

Change the form to

<form action="[whatever the page name is]" method="post" class="form-inline" role="form">

First, how do I do this on the backend? I'm using php for simplicity since it was so easy to install.

At the top of the page, add

<?php
if(isset($_POST)){
// Check for the $_POST variables and process
// $content = "<div> ... </div>"  // Then echo out the content in place of the original for

}
?>

score 0 · Answer 4 · answered Jan 04 '14 at 03:51

You can just put form action="filename-of-the-form-processor" or leave it blank for same page. If you can't avoid to put php module on the same page where your form reside make a view.php file then just include it.

index.php <- where form process happends index.view.php <- where form tags reside so you will have a cleaner line of codes.

Note: this is not the best way to do it.

How do I process forms (front and back end) on the same page?

4 Answers4