on Basics

PHP basics – Forms

1 comments
form
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon

Basically, what I am going to show you today, is how to build HTML form which will then post data to a PHP script, which will do something interesting to that information.

I will be careful and use all securing techniques to teach you to use those techniques always, as securing the application is the most important task for every developer. You can read about those techniques in my PHP Security article.

So, let us build a simple form and collect name and email address from user:

<form id="tutorial" action="test.php" method="post">
<fieldset>
    <label for="name">Name:</label>
    <input type="text" name="name" />
    <label for="email">Email:</label>
    <input type="text" name="email" />
    <input id="submit" type="submit" value="Send" />
</fieldset>
</form>

This is really simple form with two input fields and a submit button. When we press submit button, form will “post” values of name and email and send it to test.php which is our action parameter in above code. Save this code to form.php file.

Now let us create test.php file which will process the data:

<?php
  // the values are saved in $_POST super global variable
  // first we check if something is posted
  if($_POST) {
      // putting posted data into variables, securing it
      // never trust user input !!!
      $name     = strip_tags($_POST['name']);
      $email    = strip_tags($_POST['email']);
      
      // for example sake we will only show this on the screen  
      echo '<p>Your name is ' . $name . ' and email: ' . $email . '</p>';
  }
?>

If you plan to enter the data posted into a database, you can use mysql_real_escape_string function. Save the above code to test.php and let us try it. Go to your form.php file, enter some data and press Send button. You should see that you are now on test.php page and a sentence with your name and email is written on top.

Basically, that is all you ever need. Now you can build a form for entering data into the database, or updating it, but that will be the topic of some future tutorial.

Let me extend this and show you how you can pass data to test.php using AJAX. This way your page will not refresh, nor take you anywhere. The sentence will be written instead of our form that we created earlier.

Open your form.php and directly below ending form tag add this line:

<div class="success" style="display:none;">Here we will show our resulting sentence!</div>

This will be our placeholder for writing the resulting sentence. To do the AJAX magic, I will use jQuery, so be sure to call it by entering this code in your form.php file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Directly below everything in form.php file, enter this code:

<script type="text/javascript">
$(document).ready(function(){
    $("form#tutorial").submit(function() { // this is triggered on form submit
 
    // we are collecting the data
    // and sending to test.php
    var name        = $('#name').attr('value');
    var email       = $('#email').attr('value');
 
    $.ajax({
        type: "POST", // method
        url: "test.php", // to where we are sending
        data: "name="+ name +"&email="+ email, // post variables
        success: function(answer){ // if everything goes well
            $('form#tutorial').hide(); // we hide the form
            $('div.success').fadeIn(); // show our success div
            $('div.success').html(answer); // and put the answer in it
        }
    });
    return false; // so the form is not submited
    });
});
</script>

Now try it. Open your form.php in browser, type some values and submit it, and you should see form disappearing and sentence appearing. You do not have to change the test.php file, it is working as expected, securing user input and sending it back to form.php page.

This approach is great, as it will always work. If a user has turned off JavaScript, form will normally be posted and everything would work fine.

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon



  • Hyder

    An online demo would have been so nice 🙂