Book Image

PHP jQuery Cookbook

By : Vijay Joshi
Book Image

PHP jQuery Cookbook

By: Vijay Joshi

Overview of this book

As web technology evolves, the gap between desktop applications and web applications continues to vanish. And what better way to bridge that gap, for your own website, than using the best two open source technologies in the market: PHP and jQuery. The power-combo of these two is leading the way in revolutionizing the RIA world. Although they are easy to integrate, finding or figuring out how to do what you want to do is rather arduous.The PHP jQuery Cookbook will be your handy guide with walkthroughs of common integration tasks and problems that will help you master the possibilities available using the PHP and jQuery combo. You will learn quick solutions to necessary tasks to integrate the power of two of the best known and most widely used web technologies of today – PHP on the server side and jQuery on the client side. Glide through the basics and move to advanced topics to create dynamic and interactive web applications with this book in hand.This book covers a wide array of technical aspects of creating an interactive website. Apart from basics of PHP and jQuery, you will go through advanced topics like creating plugins, validating controls, and useful utilities that you will be able to use as stand-alone tools. AJAX, the key technique of browser-server communication is covered in detail. You will also learn to use JSON, which is becoming preferred as a mode of data interchange over XML, both in web applications and web services.The book also covers database interaction, which is an important part of any dynamic web application. You will also gain expertise in debugging JavaScript with the help of useful tools that will save you hours of tedious manual debugging.Most importantly, by using jQuery and PHP together, you will be able to develop applications that are compatible with all major browsers, with no need to write code targeted at specific browsers!
Table of Contents (17 chapters)
PHP jQuery Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Submitting a form with jQuery


We know that submit buttons are used in HTML forms to submit data to a server. Apart from submit buttons, JavaScript also provides a submit method that can be used to submit forms.

In this recipe, you will learn how to submit forms the jQuery way and will also learn how the form submission can be controlled using the submit button.

Getting ready

Get the jQuery library to use with this recipe.

How to do it...

  1. Create a new file, name it as formSubmit.html and save it in the chapter1 directory.

  2. Write the following code, which creates a form with an input button (not submit button). Add some jQuery code that will be triggered on clicking the button and will submit the form.

    <html>
      <head>
        <title>Submitting forms</title>
      </head>
      <body>
        <form id="myForm">
          <input type="button" value="Submit Form" />
        </form>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
          $(document).ready(function ()
          {
            $('input:button').click(function()
            {
              $('#myForm').submit();
            });
          });
        </script>
      </body>
    </html>
  3. Run the formSubmit.html file and click on the input button. It will submit the form.

How it works...

In this example we attached the click event handler to the input button. The event handler function will execute when the button is clicked. On clicking the button, jQuery's submit() method is called on the form, which submits the form. All browsers have a native submit method to submit the form programmatically. jQuery has wrapped this functionality into its own submit() method.

There's more...

Controlling form submission

If a form has a submit button then we can control whether to submit the form or not. In this case we will have to attach an event handler to the form. This event handler will be executed when a submit button on that particular form is clicked.

$('#myForm').submit(function()
{
  return false;
});

The above code will execute when a submit button on the form with ID myForm is clicked. If false is returned by the handler function, the form will not be submitted. This can be pretty handy for validating forms. The code for validating form values can be placed in the handler function. If values are validated, true can be returned, which will submit the form. In case the validation fails, false can be returned, which will not allow the form to be submitted.

Another option is to use preventDefault(). As the name indicates, preventDefault() prevents the default event from being executed. It is a property of the event object.

$('#myForm').submit(function(event)
{
  event.preventDefault()
});

See also

  • Binding and unbinding elements explains how to add and remove events from elements.