jQuery/Ajax & PHP form processing design

Question

When I develop forms which require processing in PHP I tend to put the form and PHP into a single file e.g. signup.php and use the $_GET method to figure out what I need to do with the form.

For example, if /site/signup.php is requested then I know I need to display the HTML form, but if /site/signup.php?action=newsignup is requested (by the html form submit) then I know I need to process it.

I have been quite happy with this approach as it means I need to maintain less files and that everything which interacts is in one file which makes tracing problems easier (plus I hate sites which continully redirect from page to page when processing data.)

A rough example of what I would do is :

<?php

if (isset($_GET['action'] && $_GET['action'] == "newsignup")
{

   $name = cleanInput($_POST['name'];
   $email = cleanInput($_POST['email'];


   if(validUserName($name)== TRUE)
   {
      // do processing here

   } else {

      // fail processing here
   }

   if(validEmail($email)== TRUE)
   {
      // do processing here

   } else {

      // fail processing here
   }

   // Do database stuff etc

   // Display success message 

} else {

  // Not $_GET so must be a new sign-up. Display html form


    <form id="signup" action="signup.php?action=newsignup" method="post">
       <input type="text" name="name" id="name" />
       <input type="text" name="email" id="email" />
       <input type="submit" id="submit" value="Submit" />
    </form>

}

Now I am starting to use jQuery/Ajax to do the validation client-side to give feedback while the user is completing the form, when data is entered into a text box in the form the data is validated in real time using a keyup event to post that textbox to a .php script for validation. To do that I am using jQuery Post:

function name_check(){  

var username = $('name').val();

    if(name == "" || name.length < 4){

        $('#name').css('border', '3px #CCC solid');
        $('#text').text('');

    }else{

            $.post('jquerysignup.php', { name: $('#name').val()}, function(response) {
                $('#phpout').html(response['message']); // return an error string if exists

                if(response['returnval'] == 0){
                    $('#name').css('border', '3px green solid');
                    $('#submit').fadeIn('slow')

                } else if (response['returnval'] == 2){
                    $('#name').css('border', '3px red solid');
                    $('#submit').fadeOut('slow')
                } else {
                    $('#name').css('border', '3px red solid');
                    $('#submit').fadeOut('slow')      
                }

            }, 'json');
    } //
}

The file jquerysignup.php is contains only the PHP functions validUserName and validEmail.

I am now in the position where have have two .php files, one for the server-side validation and now one for the client-side. I want to keep both client-side and server-side validation but I do not want to keep multiple files which contain duplicate functionality.

I have been struggling find or come up with an integrated solution and I know there must be a better way to do do this but I cannot find any examples to deal with this specific problem.

I would really appreciate some guidance in a best practise / solution to this.

Rajat Singhal · Accepted Answer · 2012-01-07 12:35:50Z

1

I agree with your decision of not relying on javascript validation comapletely, because a hacker can always manipulate that as its his browser's property...

The only validation which require server-side work is uniqueness validation...And for that you must be using Ajax..

Why not in the same file..

what ajax request will do is send request to a server-script with data and that script after validation from database checking replying you the result..

You can call the same file from javascript..why not..

Just set

if(isset($_POST['ajax_variable_name']))
{
    your validation logic goes here and echo corresponding result..
}

Now that you have verified your users credentials using jquery and he has submitted the form..

Then also let the user go on the same page..

Just give your submit button a name lets say name="submit"

And on the top of your this page

Do as u were doing earlier

if(isset($_PoST['submit']))
{
if correct validation make changes in database and redirect him to success page...
}

Again:

if( check if ajax request is made here)
{
---echo result... 
}
else
{
--whole page--
First form submit check if success then redirect

Then normal form
}

This way it will check your jquery scripts and procees only them if they are set... And if not then it will it will check is form is submitted, if everything is right then it will redirect without showing form else just display the erroes.. If form not submitted or because of error we didn't redirect it will show form..

One more thing rest of the jquery validation script you can put on the same page in Tags..

answered Jan 7, 2012 at 12:35

Rajat Singhal

11.3k5 gold badges40 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

amer Over a year ago

Thanks for your feedback, I had thought of the method you have described but the reason for asking the question was to see if there was a 'best practice' for this type of scenario rather than a technical solution. I guess it all depends on how much you want to seperate the client-side code out from the server-side. I am still in two minds about how to tackle this issue but for the moment I have decided that the form process code should remain as it is and have the jQuery events post to a seperate .php file which contains the functions validUserName and validPassword.

Collectives™ on Stack Overflow

jQuery/Ajax & PHP form processing design

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related