Validating PHP form and change submit button instead of redirect to status page

Question

I have a basic PHP form here that sends an email when submitted:

<div id="contact">
<form id="contact_form" action="<?=base_url()?>contact/email_form" method="post" name="contact">
    <h4>Questions? Comments?</h4>
    <p>
        <label>Name</label>
        <input name="name" id="name" type="text" class="text" />
    </p>
    <p>
        <label>Email</label>
        <input name="email" id="email" type="text" class="text" />
    </p>
    <p class="message">
        <label>Question</label>
        <textarea name="message" id="message" rows="5" cols="5"></textarea>
    </p>
    <p class="alt">

        <input value="Send Info" id="submitbutton" type="submit">
    </p>
</form>

This form works well but I currently have no validation so if the form is submitted even when the fields are blank. Isn't it possible to do validation with jquery?

Once the form is submitted it POSTS to a controller file in codeigniter which does the emailing logic using an email helper in codeigniter. See here:

if($this->email->send())
    {
        echo 'Message has been sent';
    }
    else
    {
        show_error($this->email->print_debugger());
    }

As you can see this redirects to the email_form view and echos the results. Is it possible to just stay on the same contact page that has the form and have the results of the post show there instead of redirecting to the <?=base_url()?>contact/email_form view? I was thinking of having the Text of the SUBMIT button change to "Message Sent" or something like that and then clearing the form fields. This way they stay on the contact page.

Is all of this possible with jquery? Thanks!

rockerest · Accepted Answer · 2011-04-15T04:24:21.677

Yes, it is all possible.

Specifically, you would do something like this:

$( '#submitbutton' ).click(function(){
    $.ajax(); //do ajax

    return false; //should override default form submission
});

You would be looking for the $.post() function. However, I like to keep as much control as possible, so I use the $.ajax() function.

They both take URLs and data to process, so this would be very useful for you.

You would handle a successful return (presumably, with a particular success code to process on) in the "success:" parameter of $.ajax() or the success callback of $.post().
From inside that function, you can change the content of DOM elements (like the button in your example) using CSS selectors and jQuery functions like .html().

Here are some tutorials to get started using jQuery!

Remember, just validating the email isn't enough. You need to check other possibilities too!
In addition, make sure you are doing your validation on the server after the POST. Javascript can be turned off, and then (if you do validation on the browser) all your validation will do nothing to protect your server, or the public in general.

In summary, you can use $.post() or $.ajax() in jQuery to pass the data to your server for processing.

Thanks! Once I got an understanding of the `.ajax()` function it was quite easy. And I learned A TON in the process. thank you! — ItsPronounced, Apr 16 '11 at 17:41
No problem! Glad I could help, and you learned a lot! I like how jQuery does AJAX, and you're right: it makes things easy! — rockerest, Apr 17 '11 at 07:17

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

You should always do server validation because the user could have javascript disabled. I would validate each input for allowed values so that your application is secure and you do not turn into a spam email cannon. I would do this by adding a token to the form that ensures your application is the one that created the form and therefore it is ok to continue to the part of sending the email. See the following related post:

PHP Authenticity Tokens

edited May 23 '17 at 10:33

Community

1
1

answered Apr 15 '11 at 04:08

Wes

6,455
3
22
26

I don't think @drpcken is asking how to do JS validation. He's asking how to send the form to the validator using AJAX and process the response without changing the page. – rockerest Apr 15 '11 at 04:18

score 1 · Answer 3 · answered Apr 15 '11 at 05:28

I did basically this exact same thing this morning:

$('#contact_form').submit(function() {
    // this is the client side check, it just checks if they are not empty
    if( $(this).find('#name').val() == '' ||  $(this).find('#email').val() == '' || $(this).find('#message').val() == '') {
        return false;
    }
    // post to the server
    $.post('<?=base_url()?>contact/email_form'), 
      {name:$(this).find('#name').val(),email:$(this).find('#email').val(),message:$(this).find('#message').val()},
      function(data) {
          // this checks the return value from the submit
          if (data == 'Message has been sent') {
               // do something
               $('#contact p.alt').html('Message Sent');
          } else {
               // the send email function returned something other than success
               alert('failed');
          }
      }
    return false;
}

Ahh that looks good. Would it need to be in the jQuery('document').ready() function (jQuery noob here) or can I just make sure it is in a script on the page? Also with this script, I could take out the `action="=base_url()?>contact/email_form"` out fo the forms properties right? Thanks! — ItsPronounced, Apr 15 '11 at 21:00
I think its recommended to put all jQuery inside a jQuery('document').ready() function. And yeh u can take it out of the form tag attributes, but i like to leave it just in case someone doesn't support javascript. — icchanobot, Apr 16 '11 at 01:08

Validating PHP form and change submit button instead of redirect to status page

3 Answers3