Wolf Cat
Reputation: 171
jQuery mobile form doesn't submit the second time
I have a mobile website built using jQuery mobile framework V1.2.0 and jQuery V1.8.2.
The problem is that when I visit the website on the newest iPhone, and fill out the form for a second time, it does not send. Once I put in the information and hit submit, the page just reloads a blank form.
I have very minimal knowledge of javascript, which makes debugging difficult for me.
Has anyone had this problem or see any possible causes?
Sorry, if all of the needed files are not here. I'm not sure what will be needed to help me debug this. Just ask and I will provide.
Thanks!
Form:
<?php
$values = $_POST;
$full_name = $values['fullname'];
$email_address = $values['email'];
$phone_number = $values['phone'];
$vehicle_type = $values['vehicle_type'];
$travel_type = $values['travel_type'];
$occassion = $values['occassion'];
$departure_date = $values['departure_date'];
$departure_time = $values['departure_time'];
$hours_requested = $values['hours_requested'];
$pickup_location = $values['pickup_location'];
$dropoff_location = $values['dropoff_location'];
$notes = $values['notes'];
//Check if necessary values are set
if (isset($full_name) && isset($email_address) && isset($vehicle_type) && isset($occassion) && isset($departure_time) && isset($departure_date) && isset($travel_type) && isset($pickup_location) && isset($dropoff_location)){
// Body:
$message = '<html><body>';
$message .= '<h1>New Quote Request</h1>';
$message .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
$message .= "<tr><td><strong>Name:</strong> </td><td>" . $full_name . "</td></tr>";
$message .= "<tr><td><strong>Email:</strong> </td><td>" . $email_address . "</td></tr>";
$message .= "<tr><td><strong>Phone:</strong> </td><td>" . $phone_number . "</td></tr>";
$message .= "<tr><td><strong>Vehicle Type:</strong> </td><td>" . $vehicle_type . "</td></tr>";
$message .= "<tr><td><strong>Departure Date:</strong> </td><td>" . $departure_date . "</td></tr>";
$message .= "<tr><td><strong>Departure Time:</strong> </td><td>" . $departure_time . "</td></tr>";
$message .= "<tr><td><strong>Travel Type:</strong> </td><td>" . $travel_type . "</td></tr>";
$message .= "<tr><td><strong>Occassion:</strong> </td><td>" . $occassion . "</td></tr>";
$message .= "<tr><td><strong>Hours Requested:</strong> </td><td>" . $hours_requested . "</td></tr>";
$message .= "<tr><td><strong>Pickup Location:</strong> </td><td>" . $pickup_location . "</td></tr>";
$message .= "<tr><td><strong>Dropoff Location:</strong> </td><td>" . $dropoff_location . "</td></tr>";
$message .= "<tr><td><strong>Notes:</strong> </td><td>" . $notes . "</td></tr>";
$message .= "</table>";
$message .= "</body></html>";
$headers = "From: $email_address\r\n";
$headers .= "Content-type: text/html\r\n";
$to = '[email protected]';
$subject = 'New Quote Request';
//If mail successfully sent
if (mail($to, $subject, $message, $headers)){
header('Location: sent.html');
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Get a Quote</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!--jQuery-->
<link href="css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/premier.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.2.0.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/main.js" type="text/javascript"></script>
<!--jQuery-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'My Code']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="wrapper">
<div id="body">
<div id="header">
<div id="logo">
<a href="index.html"><img src="images/logo.png" alt="My Logo" width="132" height="25" border="0"></a>
</div>
<div id="menu">
<a href="#popupmenu" data-rel="popup" data-position-to="window" data-transition="fade">MENU</a>
</div>
<div id="call">
<a href="tel:MY Number" title="Click to Call"></a>
</div>
</div>
<div id="spacer-91"></div>
<div data-role="popup" data-overlay-theme="a" data-transition="fade" id="popupmenu">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<ul>
<li><a href="fleet.html" class="popupmenu-fleet" title="Fleet of Vehicles">Fleet</a></li>
<li><a href="services.html" class="popupmenu-services" title="Our Services">Services</a></li>
<li><a href="quote.php" class="popupmenu-quote" title="Free Quote" rel="external">Free Quote</a></li>
<li><a href="flight-tracker.html" class="popupmenu-flight-tracker" title="Flight Tracker">Flight Tracker </a></li>
<li><a href="contact.html" class="popupmenu-contact" title="Contact Us">Contact</a></li>
</ul>
</div>
<div id="quote" data-role="content" data-theme="b">
<h1>Free Quote</h1>
<p>Fillout the form below to receive a complimentary quote</p>
<p><strong>Need help? Call</strong> <a href="tel:MY Number" title="MY Number">MY Number</a>
<div>
<form action="quote.php" id="travel_form" method="post">
<input type="text" name="fullname" id="fullname" value="" placeholder="Name" class=""/>
<input class="" type="text" name="email" id="email" value="" placeholder="Email"/>
<input type="text" name="phone" id="phone"value="" placeholder="Phone (optional)"/>
<br/>
<select name="vehicle_type" id="vehicle_type" class="">
<option value="">Vehicle Type</option>
<option value="Rolls-Royce Phantom">Rolls-Royce Phantom</option>
<option value="BMW 750Li">BMW 750Li</option>
<option value="Lexus LS 460L">Lexus LS 460L</option>
<option value="Mercedes S550">Mercedes S550</option>
<option value="Executive Sedan">Executive Sedan</option>
<option value="MKT Town Car">MKT Town Car</option>
<option value="Luxury SUV">Luxury SUV</option>
<option value="Stretch Limousine 6 Passenger">Stretch Limousine 6 Passenger</option>
<option value="Stretch Limousine 8 Passenger">Stretch Limousine 8 Passenger</option>
<option value="Expedition Limousine">Expedition Limousine</option>
<option value="Navigator Limousine">Navigator Limousine</option>
<option value="Hummer Limousine">Hummer Limousine</option>
<option value="Pinky Limousine">Pinky Limousine</option>
<option value="Executive Van">Executive Van</option>
<option value="Passenger Van">Passenger Van</option>
<option value="Limo Bus 10 Passenger">Limo Bus 10 Passenger</option>
<option value="Limo Bus 22 Passenger">Limo Bus 22 Passenger</option>
<option value="Limo Bus 26 Passenger">Limo Bus 26 Passenger</option>
<option value="Limo Bus 28 Passenger">Limo Bus 28 Passenger</option>
<option value="Shuttle Bus 28 Passenger">Shuttle Bus 28 Passenger</option>
<option value="Mini Coach 29 Passenger">Mini Coach 29 Passenger</option>
<option value="Mini Coach 32 Passenger">Mini Coach 32 Passenger</option>
<option value="Mini Coach 40 Passenger">Mini Coach 40 Passenger</option>
<option value="Coach Bus 56 Passenger">Coach Bus 56 Passenger</option>
<option value="Coach Bus 57 Passenger">Coach Bus 57 Passenger</option>
</select>
<br/>
<select name="occassion" id="occassion" class="">
<option value="">Occassion</option>
<option value="Airport Transportation">Airport Transportation</option>
<option value="Casino">Casino</option>
<option value="Corporate Travel">Corporate Travel</option>
<option value="Nationwide Service">Nationwide Service</option>
<option value="Night On The Town">Night On The Town</option>
<option value="Pier & Cruise">Pier & Cruise</option>
<option value="Prom">Prom</option>
<option value="Special Occassion">Special Occassion</option>
<option value="Sports Event">Sports Event</option>
<option value="Wedding">Wedding</option>
</select>
<br/>
<input type="text" name="departure_date" id="departure_date" placeholder="Departure Date (MM/DD/YYYY)" value="" class="" />
<br/>
<select name="departure_time" id="departure_time" class="">
<option value="">Departure Time</option>
<option value="12:00AM">12:00AM</option>
<option value="12:15AM">12:15AM</option>
<option value="12:30AM">12:30AM</option>
<option value="12:45AM">12:45AM</option>
<option value="1:00AM">1:00AM</option>
<option value="1:15AM">1:15AM</option>
<option value="1:30AM">1:30AM</option>
<option value="1:45AM">1:45AM</option>
<option value="2:00AM">2:00AM</option>
<option value="2:15AM">2:15AM</option>
<option value="2:30AM">2:30AM</option>
<option value="2:45AM">2:45AM</option>
<option value="3:00AM">3:00AM</option>
<option value="3:15AM">3:15AM</option>
<option value="3:30AM">3:30AM</option>
<option value="3:45AM">3:45AM</option>
<option value="4:00AM">4:00AM</option>
<option value="4:15AM">4:15AM</option>
<option value="4:30AM">4:30AM</option>
<option value="4:45AM">4:45AM</option>
<option value="5:00AM">5:00AM</option>
<option value="5:15AM">5:15AM</option>
<option value="5:30AM">5:30AM</option>
<option value="5:45AM">5:45AM</option>
<option value="6:00AM">6:00AM</option>
<option value="6:15AM">6:15AM</option>
<option value="6:30AM">6:30AM</option>
<option value="6:45AM">6:45AM</option>
<option value="7:00AM">7:00AM</option>
<option value="7:15AM">7:15AM</option>
<option value="7:30AM">7:30AM</option>
<option value="7:45AM">7:45AM</option>
<option value="8:00AM">8:00AM</option>
<option value="8:15AM">8:15AM</option>
<option value="8:30AM">8:30AM</option>
<option value="8:45AM">8:45AM</option>
<option value="9:00AM">9:00AM</option>
<option value="9:15AM">9:15AM</option>
<option value="9:30AM">9:30AM</option>
<option value="9:45AM">9:45AM</option>
<option value="10:00AM">10:00AM</option>
<option value="10:15AM">10:15AM</option>
<option value="10:30AM">10:30AM</option>
<option value="10:45AM">10:45AM</option>
<option value="11:00AM">11:00AM</option>
<option value="11:15AM">11:15AM</option>
<option value="11:30AM">11:30AM</option>
<option value="11:45AM">11:45AM</option>
<option value="12:00PM">12:00PM</option>
<option value="12:15PM">12:15PM</option>
<option value="12:30PM">12:30PM</option>
<option value="12:45PM">12:45PM</option>
<option value="1:00PM">1:00PM</option>
<option value="1:15PM">1:15PM</option>
<option value="1:30PM">1:30PM</option>
<option value="1:45PM">1:45PM</option>
<option value="2:00PM">2:00PM</option>
<option value="2:15PM">2:15PM</option>
<option value="2:30PM">2:30PM</option>
<option value="2:45PM">2:45PM</option>
<option value="3:00PM">3:00PM</option>
<option value="3:15PM">3:15PM</option>
<option value="3:30PM">3:30PM</option>
<option value="3:45PM">3:45PM</option>
<option value="4:00PM">4:00PM</option>
<option value="4:15PM">4:15PM</option>
<option value="4:30PM">4:30PM</option>
<option value="4:45PM">4:45PM</option>
<option value="5:00PM">5:00PM</option>
<option value="5:15PM">5:15PM</option>
<option value="5:30PM">5:30PM</option>
<option value="5:45PM">5:45PM</option>
<option value="6:00PM">6:00PM</option>
<option value="6:15PM">6:15PM</option>
<option value="6:30PM">6:30PM</option>
<option value="6:45PM">6:45PM</option>
<option value="7:00PM">7:00PM</option>
<option value="7:15PM">7:15PM</option>
<option value="7:30PM">7:30PM</option>
<option value="7:45PM">7:45PM</option>
<option value="8:00PM">8:00PM</option>
<option value="8:15PM">8:15PM</option>
<option value="8:30PM">8:30PM</option>
<option value="8:45PM">8:45PM</option>
<option value="9:00PM">9:00PM</option>
<option value="9:15PM">9:15PM</option>
<option value="9:30PM">9:30PM</option>
<option value="9:45PM">9:45PM</option>
<option value="10:00PM">10:00PM</option>
<option value="10:15PM">10:15PM</option>
<option value="10:30PM">10:30PM</option>
<option value="10:45PM">10:45PM</option>
<option value="11:00PM">11:00PM</option>
<option value="11:15PM">11:15PM</option>
<option value="11:30PM">11:30PM</option>
<option value="11:45PM">11:45PM</option>
</select>
<br/>
<fieldset data-role="controlgroup" data-type="horizontal" id="travelTypeControls">
<legend>
<div onClick="document.getElementById('tt1').style.display='block'" onMouseOut="document.getElementById('tt1').style.display='none'" class="questionMark">
Travel type: <img src="images/question-mark.png" width="14" height="14" alt="What's This?">
<div id="tt1" class="toolTip">
A <strong>Point to Point</strong> reservation is a one way trip that is based on a flat fee. An <strong>Hourly Rental</strong> is a fixed rate that is billed according to the number of hours the vehicle is reserved for.
</div>
</div>
</legend>
<input type='radio' id="radio-choice-1" class="pointtopoint" name='travel_type' value='pointtopoint'>
<label class="" for="radio-choice-1">Point to Point</label>
<input type='radio' id="radio-choice-2" class="hourly" name='travel_type' value='hourly'>
<label class="" for="radio-choice-2">Hourly</label>
</fieldset>
<br/>
<select name="hours_requested" id="hours_requested" class="">
<option value="">Hours Requested</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="24 Plus">24+</option>
</select>
<br/>
<input type="text" name="pickup_location" id="pickup_location" value="" placeholder="Pick-up Location" class="" />
<input type="text" name="dropoff_location" id="dropoff_location" value="" placeholder="Drop-off Location" class="" />
<br/>
<textarea name="notes" id="notes" placeholder="Special Instructions"></textarea>
<br/>
<div id="submit_button">
<input type="submit" value="Submit" name="submit" />
</div>
</form>
</div>
</div>
<div id="footer" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="left">
© 2012 MY Site
</div>
<div class="right">
<a href="http://www.mysite.com" title="View Full Site">View Full Site</a>
</div>
</div>
</div>
</div>
</body>
</html>
Upvotes: 0
Views: 653
Answers (1)
adamdehaven
Reputation: 5920
Adding data-ajax="false" may cure the issue. This submits the form via the form action. Also, JQM recommends putting in the full url for the form action.
So for example, your form tag should start like shown below
<form action="http://www.example.com/quote.php" data-ajax="false" id="travel_form" method="post">
Upvotes: 1
Related Questions
- JQuery Mobile Form Submit not working
- jQuery mobile form submit is reloading instead of loading new page
- Jquery form submit works only once
- jquery mobile form submit resets form when trying to prevent submission
- Jquery Form disappears after one submission
- Android-Phonegap-Jquery Mobile: form submit does not work 2nd time
- Why Does the Form on this Page Only Work Once?
- jQuery Mobile and Form Submission
- jquery mobile form not submitting
- JQuery Mobile Form Submit