I am currently developing a jquery mobile app. In this app there is a contact us form.
This form uses js and php to work.
But as soon as I test it and click on the SUBMIT button, nothing happens.

Can someone please look at my coding I used from a tutorial and help me to fix it so that it works?


1. Create a folder structure
The first thing you need to do is create a folder structure where all your files will live. My folder structure is as follows:
- www
-- api
--- send.php
-- js
--- contact.js
-- css
--- contact.css
-- index.html

2. Copy and paste the following boilerplate template

This will go into index.html file that you’ve created. Note that we are including the Javascript and CSS files from the jQuery Mobile server. You can also download the latest version of jQuery Mobile from the website and include the local copy.
<!DOCTYPE html>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

<div data-role="page">

<div data-role="header">
<h1>Contact Us</h1>
</div><!-- /header -->

<div data-role="content">
<!-- Content goes here -->
</div><!-- /content -->

<div data-role="footer">
<p>Source code by <a href="http://eisabainyo.net/weblog" rel="external">Web Development Blog</a>. Check out <a href="http://eisabainyo.net/weblog/tips-resources" rel="external">tip &amp; resources</a> for Web Developers.</a></p>
</div><!-- /footer -->
</div><!-- /page -->


3. Add HTML form in the content area

Add the following code into <div data-role=”content”>
<div class="contact-thankyou" style="display: none;">
Thank you. Your message has been sent. We will get back to you as soon as we can.
<div class="contact-form">
<p class="mandatory">* indicates Manadatory Field</p>
<div data-role="fieldcontain" class="text-field">
<label for="firstname">First Name*:</label>
<input type="text" name="firstname" value="" placeholder="" class="required" id="firstname" />
<div data-role="fieldcontain" class="text-field">
<label for="surname">Last Name:</label>
<input type="text" name="surname" value="" placeholder="" id="surname" />
<div data-role="fieldcontain" class="text-field">
<label for="email">Email Address*:</label>
<input type="email" name="email" value="" placeholder="" class="required" id="email" />
<div data-role="fieldcontain" class="text-field">
<label for="mobilephone">Mobile Number:</label>
<input type="number" name="mobilephone" value="" placeholder="" id="mobilephone" />
<div data-role="fieldcontain">
<label for="state">State:*</label>
<select name="state" class="required" id="state">
<option value="" data-placeholder="true">Please select your state</option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
<div data-role="fieldcontain">
<label for="message">Message*:</label>
<textarea name="message" id="message" placeholder="" class="required"></textarea>
<div class="send"><a href="javascript:;" data-role="button" data-theme="a" data-iconpos="right" id="send-feedback">send feedback</a></div>
</div><!-- //.contact-form -->

4. Create a web service in PHP to send email

We have a folder called api and we will create a new file called send.php in the api folder. You will need to change the $recipient variable.

header('content-type: application/json; charset=utf-8');

if (isset($_GET["firstname"])) {
$firstname = strip_tags($_GET['firstname']);
$surname = strip_tags($_GET['surname']);
$email = strip_tags($_GET['email']);
$mobilephone = strip_tags($_GET['mobilephone']);
$state = strip_tags($_GET['state']);
$message = strip_tags($_GET['message']);
$header = "From: ". $firstname . " <" . $email . ">rn";

$httpref = $_SERVER['HTTP_REFERER'];
$httpagent = $_SERVER['HTTP_USER_AGENT'];
$today = date("F j, Y, g:i a");

$subject = 'Contact Form';
$mailbody = "
First Name: $firstname
Last Name: $surname
Email: $email
Mobile Phone: $mobilephone
State: $state
Message: $message

IP: $ip
Browser info: $httpagent
Referral: $httpref
Sent: $today
$result = 'success';

if (mail($recipient, $subject, $mailbody, $header)) {
echo json_encode($result);

5. Add Javascript code to handle form onsubmit
Create a file called contact.js with the following content and include it in your HTML file.

$('#send-feedback').live("click", function() {
var url = 'api/send.php';
var error = 0;
var $contactpage = $(this).closest('.ui-page');
var $contactform = $(this).closest('.contact-form');
$('.required', $contactform).each(function {
if ($(this).val() === '') {
}); // each
if (error > 0) {
alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');
} else {
var firstname = $contactform.find('input[name="firstname"]').val();
var surname = $contactform.find('input[name="surname"]').val();
var state = $contactform.find('select[name="state"]').val();
var mobilephone = $contactform.find('input[name="mobilephone"]').val();
var email = $contactform.find('input[name="email"]').val();
var message = $contactform.find('textarea[name="message"]').val();

//submit the form
type: "GET",
url: url,
data: {firstname:firstname, surname:surname, state: state, mobilephone: mobilephone, email: email, message: message},
success: function (data) {
if (data == 'success') {
// show thank you
} else {
alert('Unable to send your message. Please try again.');
}); //$.ajax

return false;
After completing all the above steps, you will have a fully functional contact form built using jQuery Mobile, HTML5, and PHP.