Submit a JQuery Mobile form via AJAX with PHP

Post to Twitter

I have a previous article on how to use JQuery Mobile (and PHP) to submit some data via AJAX. With a little modification you can take that code and make it so you can submit an entire form. Today I’ll show you how to do that.


Note: I did this sample code on an Ubuntu 10.10 Desktop system running nginx and PHP 5.3. I used JQuery Mobile alpha release 4. You can find out how to setup this particular instance here.

The PHP page is very simple and will listen for two incoming fields.

File name: callajax.php

<?php
    $firstName = $_POST[firstName];
    $lastName = $_POST[lastName];
    
    echo("First Name: " . $firstName . " Last Name: " . $lastName);
?>

The HTML5 page takes two values (first name and last name) and uses JQuery AJAX to send those serialized fields to the PHP page mentioned above. The results are then displayed.

File name: index.php

<!DOCTYPE html>
<html>
    <head>
    <title>Submit a form via AJAX</title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
      <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
    <script>
        function onSuccess(data, status)
        {
            data = $.trim(data);
            $("#notification").text(data);
        }
 
        function onError(data, status)
        {
            // handle an error
        }        
 
        $(document).ready(function() {
            $("#submit").click(function(){
 
                var formData = $("#callAjaxForm").serialize();
 
                $.ajax({
                    type: "POST",
                    url: "callajax.php",
                    cache: false,
                    data: formData,
                    success: onSuccess,
                    error: onError
                });
 
                return false;
            });
        });
    </script>
 
    <!-- call ajax page -->
    <div data-role="page" id="callAjaxPage">
        <div data-role="header">
            <h1>Call Ajax</h1>
        </div>
 
        <div data-role="content">
			<form id="callAjaxForm">
				<div data-role="fieldcontain">
					<label for="firstName">First Name</label>
					<input type="text" name="firstName" id="firstName" value=""  />

					<label for="lastName">Last Name</label>
					<input type="text" name="lastName" id="lastName" value=""  />
					<h3 id="notification"></h3>
					<button data-theme="b" id="submit" type="submit">Submit</button>
				</div>
			</form>
        </div>
 
        <div data-role="footer">
            <h1>GiantFlyingSaucer</h1>
        </div>
    </div>
</body>
</html>

Post to Twitter

This entry was posted in AJAX, HTML5, Mobile, PHP. Bookmark the permalink.

11 Responses to Submit a JQuery Mobile form via AJAX with PHP

  1. River Byun says:

    Your post is always fantastic. I want to ask you one question. In ‘index.php’ there are two data-role divs. Is there any special reason to do that?

  2. Chad Lung says:

    @River Byun,

    Good catch, no the extra one was a mistake on my part. I’ve removed it now.

    Thanks.

    Chad

  3. Brian Pando says:

    This is a excelent article, very explained to init in Jquery Mobile Forms, thanks,

    Regards,
    B.

  4. Simon says:

    Thanks for this post! Works fine for me. But i have problems with handling checkboxes in the PHP file. I need to know which checkbox is checked after the submission of the form. Can you give me a hint ?

    Regards,
    Simon

  5. demi says:

    According to the thinking of you to give me wrote a JSP page, but click on the text box will appear error loading brief by ajax for value can be,how can I do
    thank you

  6. Chad Lung says:

    @demi,

    I have no idea what your JSP is doing or how it’s coded, this article is about using PHP.

    Chad

  7. thx, will check back later, have bookmarked you for now.

  8. Thibault Vinchent says:

    Thx for your script!

  9. Pingback: 使用jQuery Mobile製作的App列表 « PhoneGap

  10. jess says:

    Hi,
    Fabulous tutorial! Loved it!
    However, when i tried to run it, i get [object XMLDocument] for #notification
    I used the exact codes so i really can’t figure out. Please help T_T

  11. Pingback: 50 jQuery Mobile Development Tips | jQuery4u

Comments are closed.