Been scouring this site and find many AJAX to PHP examples but following these I cannot figure why on earth my scripts are not working.
I have an HTML form with a button. You click the button it calls a Bootstrap modal window. You enter an email address click Submit.
It posts to a PHP file that will email me.
The reason I am implementing using AJAX is because I do not want the ACTION and METHOD submit on the form. I want to submit via AJAX so the user is not redirected to my PHP page.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script>
$(document).ready(function () {
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "email.php", //
data: $('form.icontact').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("#contact").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
</script>
</head>
<body>
<div class="container"> <!-- numbers cannot total more than 12 for rows-->
<div id="thanks"><p>Submit!</p></div>
</div>
<!--contact modal-->
<div class="modal fade"id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class ="form-horizontal" name="icontact" id="icontact">
<div class="modal-header">
<h4>testemail</h4>
</div>
<div class="modal-body">
<p>Please enter your email address and click submit to receive your free first chapter</p>
<div class="form-group">
<label for ="contact-email" class="col-lg-2 control-label">Email: </label>
<div class="col-lg-10">
<input type="email" class="form-control" id="fromaddress" placeholder="new#example.com" name="fromaddress" />
<input type="hidden" id ="subject" value="enter in your email" name="subject" />
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Cancel</a>
<button class="btn btn-primary" type="submit" id="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script src="js/bootstrap.js"></script>
</body>
and here is the php file. I get failure when I run it and it is passing the data in the URL like a GET. What am I doing wrong?
<?php
function spamcheck($field) {
// Sanitize e-mail address
$field=filter_var($field, FILTER_SANITIZE_EMAIL);
// Validate e-mail address
if(filter_var($field, FILTER_VALIDATE_EMAIL)) {
return TRUE;
} else {
return FALSE;
}
}
if (isset($_POST["fromaddress"])) {
// Check if "from" email address is valid
$mailcheck = spamcheck($_POST["fromaddress"]);
if ($mailcheck==FALSE) {
echo "Invalid input";
} else {
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span><br><br>";
$from = strip_tags($_POST["fromaddress"]); // sender
$subject = strip_tags($_POST["subject"]);
$message = "Thanks.";
// message lines should not exceed 70 characters (PHP rule), so wrap it
$message = wordwrap($message, 70);
// send mail
mail("test#test.com",$subject,$message,"From: $from\n");
}
}
?>
The problem is, you form is submitting either ways. You haven't prevented the default behaviour of the submit button. i.e. Submitting the form and redirecting to the form-action.
Do something like this
$("button#submit").click(function(e){
e.preventDefault(); // This line avoids the default submit event.
//Rest of stuff as you have it.....
});
A better option is to do the AJAX call on the .submit() rather than on the .click() as below
$("form#icontact").submit(function(e){
e.preventDefault();
//Proceed with other stuff as is...
});
Hope this helps! :)
Related
So I am trying to get my form to use jquery to send an email. I know email is server side, so I have connected my jquery to php, and what I want to do is get an alert back after the email has been sent from the php file, but I don't get any alerts back as of right now.
<!-- JS FILE -->
<script type="text/javascript" src="js/includes.js"></script>
<!-- HTML FORM -->
<div id="id01" class="modal">
<form class="modal-content animate" action="#" method="POST">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close">×</span>
</div>
<div class="container_form">
<span><b>Account Information</b></span>
<input id="email" type="email" placeholder="Enter Email Address" name="email_name" required>
<input id="lbutton" type="submit" value="Submit"/>
</div>
Java Script Code:
$(function() { //shorthand document.ready function
$('#lbutton').on('submit', function(e) { //use on if jQuery 1.7+
e.preventDefault(); //prevent form from submitting
$.ajax({
type : 'POST',
url : './helpers/sendmail.php',
data: {
action: "lost_info",
email : $('#email').val()
},
success:function (data) {
if (data == "sent")
alert("An email has been sent to you, please check your email");
else
alert("Something went wrong, please try again");
}
});
});
});
PHP Code for testing:
<?php
echo "sent";
?>
I have set up a page that is still in construction and i'm building a webform for users to contact me.
When i fill the webform and hit the "send" button, message gets send succesfully and i receieve it on my mail...but when i hit the "send" button, i get re-directed off page, saying it was sent successfully.
How can i prompt user that the message was sent successfully, without getting redirected of page, and get the message in same window?
This is my HTML code
<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">
<div class="row">
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required />
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required />
</div>
</div>
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="5"></textarea>
<div class="row">
<div class="col-xs-12 col-md-12">
<button class="btn btn btn-lg">Send Message</button>
</div>
</div>
</form>
And this is my contactUs.php code
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$message = <<<EMAIL
$message
From: $name
My email is: $email
EMAIL;
$to = "mymail#mymail.com";
$subject = "New Customer Enquiry";
mail($to, $subject, $message, "From: " . $email);
echo "Thank you, your message has been successfully sent!";
?>
AJAX
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(){
$.post( "assets/php/contactUs.php", $( "#contact" ).serialize(), function(msg){
alert(msg);
} );
});
});
</script>
This is a result of successfully sent message.
Please guys help me out! Thanks!
REDIRECT OPTION
$firstpageurl = 'http://example.com';
echo "Your message has been successfully sent!";
$header('Location: '.$firstpageurl);
Use Ajax as below.Change the submit type button to a normal button by removing the type attribute.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(event){
$.post( "config.php", $( "#contact" ).serialize(), function(msg){
alert(msg);
} );
event.preventDefault();
});
});
</script>
The action part of your form tag is "assets/php/contactUs.php"
<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">
That means that posting this form will bring you to that page. You can either code that page to send the email and redirect them back like this...
header('Location: '.$firstpageurl);
or put the php code into this first page and remove the entire action property. If you put the php on this page, you need to wrap your code in an if so that people can load the page before posting the form.
if (isset($_POST['email'])){
echo "Sent email";
[email send code here]
}
as for putting the message saying it's sent...that will only work with the second method. To do it without a full page load at all do it with ajax.
You want to use JQuery for that.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#contact").submit(function(){
var form_data=$("form").serialize();
$.post( "assets/php/contactUs.php",form_data, function( data ) {
alert(data);
});
event.preventDefault();
});
</script>
You can do it without using Javascript. Do the following:
Set the form to post to itself (e.g. if your form was on index.php, set action="index.php"
When the page loads, check $_POST to see if the form values were sent.
If the $_POST values are empty, display the form
If the $_POST values are set, do what you need to do with those values, then output your results into the page.
Here's a really simple example demonstrating what I mean.
<?php
$submitted = false;
if (isset($_POST["myinput"]) && $_POST["myinput"] != '') {
$submitted = true;
}
?>
<?php
if ($submitted == false) {
?>
<form action="index.php" method="post">
<input name="myinput"><input type="submit">
</form>
<?php } else { ?>
<h1>Form Submitted</h1>
<?php } ?>
I am using 000webhost for my website and they keep suspending my account because I am apparently sending more that 1000 emails. This happens about 30 seconds after submitting an email via my contact form. I am only receiving one email and all emails outbound from the form go to me, they arent in my spam either.
I just wanted an opinion on whether this form is actually looping and sending the message but im not getting them or this is 000webhost fault. I had a contact form since I made this website and its only causing issues now.
Heres the code for the contact form:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/primary.css"> <!--Address Using URL to prevent no styling when slash is typed-->
<link rel="shortcut icon" href="Images/tabIcon.ico">
<title>Harry Felton | Welcome</title>
</head>
<script language="php">
require_once'header.php';
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('body').hide()
$("#notify").hide()
</script>
<script>
function toggleAbout(){
if ($("#center").hasClass("up")) {
$("#about").slideToggle(500);
setTimeout(function() {
$("#center").css({
msTransform: 'translateY(10px)',
webkitTransform: 'translateY(10px)',
transform: 'translateY(10px)',
})
}, 500);
} else {
$("#center").css({
msTransform: 'translateY(-75px)',
webkitTransform: 'translateY(-75px)',
transform: 'translateY(-75px)',
})
setTimeout(function() {
$("#about").slideToggle(500);
}, 1000);
}
$($("#center").toggleClass("up"))
};
</script>
<body onunload="" class="pg-index">
<div class="overwrap">
<div id="center">
<h1 id="title1">Welcome</h1>
<h2 id="title2">Harry Felton</h2>
<h2 id="subTitle">Auckland | New Zealand</h2>
<br><br><br><br>
<div id="about" style="display: none;">
<p>Hi, My name is Harry and I am an amateur programmer, I just do it as a hobby until I can actually take it as a course, I have created many programs, and love doing it, I am also into ComputerCraft which is a mod for Minecraft that adds programmable computers.<br><br>This website domain was initially created around September 2014, It took about a week to create, It was awesome, As it was the first time I had ever used HTML, CSS or JavaScript. On the 20th November I chose to completely recreate the website, So I deleted all files, And now... Here we are.<br><br>My absolute favorite thing to do in this world is code, I enjoy making, distributing and using my programs, And the feedback is always awesome, If you feel like leaving feedback, then click HERE</p>
</div>
</div>
</div>
<script type="text/javascript" src="JavaScript/element.js"></script>
<script type="text/javascript" src="JavaScript/pageNav.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<div id="contactForm" class="hidden">
<title>Contact Us</title>
<div id="mainPageCont">
<?php error_reporting(0); ?>
<?php if(isset($_POST['Email'])): ?>
<?php
$to = 'harryfelton12#gmail.com';
$subject = 'ALERT! Website Form Submission';
$message = 'Users Name: '.strip_tags($_POST['Name'])."\n";
$message .= 'Users Email: '.strip_tags($_POST['Email'])."\n";
$message .= 'Submitted Message: '.strip_tags($_POST['Comment'])."\n";
$headers = 'From: noReply#harryfelton.com' . "\r\n" .
'Reply-To: '.strip_tags($_POST['Email']) . "\r\n";
?>
<?php if(mail($to, $subject, $message, $headers)): ?>
<script type="text/javascript">
console.log('Mail OK')
location.href="/"
</script>
<?php endif ?>
<?php else: ?>
<script>console.log('Loading Contact Script')</script>
<form method="post" id="comments_form">
<h2>Please Leave Some Feedback, It Helps!</h2>
<div class="row">
<div class="label">
Your Name
</div>
<!--.label end-->
<div class="input">
<input type="text" id="fullname" class="detail" name="Name"
value="<?php echo isset($_POST['Name'])? $_POST['Name'] : ''; ?>" placeholder="e.g John Doe"/>
</div>
<!--.input end-->
<div class="context">
<span>We want to know who we are talking too</span>
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Email
</div>
<!--.label end-->
<div class="input">
<input type="text" id="email" class="detail" name="Email" placeholder="e.g test#example.com" value="<?php echo isset($_POST['Email'])? $_POST['Email'] : ''; ?>" />
</div>
<!--.input end-->
<div class="context">
<span>We will send an email to this address containing a confirmation and any further replies</span>
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Message
</div>
<!--.label end-->
<div class="input2">
<textarea id="Comment" name="Comment" class="mess"><?php echo isset($_POST['Comment'])? $_POST['Comment'] : ''; ?></textarea>
</div>
<!--.input end-->
</div>
<!--.row end-->
<div class="submit">
<input type="submit" id="submit" name="Submit" value="Send Message" />
</div>
</form>
<?php endif; ?>
<script>
function CheckVal() {
var SetMess = $('#option').val();
$('#feedback').html(SetMess);
if (SetMess !== '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
}
// As one types, check that the message is not empty
$('#option').keyup(function () {
CheckVal();
});
// As one clicks into the field, see if it has content
$('#option').click(function () {
CheckVal();
});
$(document).ready(function() {
// validate form
$("#comments_form").validate({
// This will allow you to extend the validator functions
invalidHandler:
function(form, validator) {
// $("#get_online").val("CHECK");
},
rules: {
// For every named input that you want to validate,
// you create a little set of prefs
Name: {
required: true,
},
Email: {
required: true,
email: true
},
Comment: { required: true },
},
messages: {
// Here are just the custom messages you can modify per field
Name: {
required: 'Please Enter Your Name',
},
Email: {
required: 'Please Enter An Email',
email: 'Email address not valid',
},
Comment: { required: 'Please Enter A Message'},
},
});
});
</script>
</div>
</div>
</div>
<script>
$(document).ready(function() {
fadeIn("body");
setTimeout(function() {
notification();
}, 500)
});
</script>
<script>changeWelcome("#title1");</script>
<div id="notify">Disabled JavaScript Is Now Supported, Contact Form Is Being Worked On Again!<a onclick="notification();" id="notifyClose">x</a></div>
<script>
function notification() {
isNotify = true
notifyID = "#notify"
if (isNotify) {
if ($(notifyID).hasClass("vis")) {
console.log("Notification Bar Enabled, Hiding: "+notifyID);
$(notifyID).slideUp(500);
} else {
$(notifyID).slideDown(500);
console.log("Notification Bar Enabled, Showing: "+notifyID);
}
$(notifyID).toggleClass("vis");
}
}
</script>
</body>
</html>
If you guys wanna visit the webiste then heres the link: http://www.harryfelton.host56.com/ Although it may be offline due to the account being suspended.
So... what do you think, is this loop sending 1000 emails? Ive been doing some console and alert testing and it never seems to send a message more than once, but I thought maybe the pause time had an effect.
I think if someone were to disable javascript in their browser, they could bypass your jQuery validation and send 1000 emails because you are not validating your Reply-To email server-side.
Try changing your server-side validation to something like:
$to = 'harryfelton12#gmail.com';
$subject = 'ALERT! Website Form Submission';
$message = 'Users Name: '.strip_tags($_POST['Name'])."\n";
$message .= 'Users Email: '.strip_tags($_POST['Email'])."\n";
$message .= 'Submitted Message: '.strip_tags($_POST['Comment'])."\n";
$headers = 'From: noReply#harryfelton.com' . "\r\n" .
'Reply-To: '.strip_tags($_POST['Email']) . "\r\n";
// User the filter_var() function to check that there is no manipulation
// of the $headers
if(filter_var($_POST['Email'], FILTER_VALIDATE_EMAIL)) {
if(mail($to, $subject, $message, $headers)) { ?>
<script type="text/javascript">
console.log('Mail OK')
location.href="/"
</script>
<?php }
} ?>
I don't see any loop and from what you have posted. aside from server-side validation, I don't see any reason why it should send 1000 emails.
Sorry for being a noob but I'm trying my best. I've done and read everything I could find and I have never got this to work. Would really appreciate the help. The form id matches in the html and javascript. The PHP is linked in the Javascript and I have the javascript linked in the head of my html. What am I missing? I've tried other codes I found online as well and nothing.. The issue is that no email ever gets sent through. If you hit send the page reloads and thats it.
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<script src="js/contact.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!-- Contact Form-->
<div class="content style4 featured">
<div class="container small">
<form id="contact" form method="post">
<div class="row half">
<div class="6u"><input type="text" class="text" name="name" placeholder="Name" /></div>
<div class="6u"><input type="text" class="text" placeholder="Email" name="email" /></div>
</div>
<div class="row half">
<div class="12u"><textarea name="text" placeholder="Message"></textarea></div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="button" value="Send Message" /></li>
<li><input type="reset" class="button alt" value="Clear Form" /></li>
<p class="success" style="display:none">Your message has been sent successfully.</p>
<p class="error" style="display:none">E-mail must be valid and message must be longer than 100 characters.</p>
</ul>
</div>
</div>
</form>
</div>
</div>
PHP
<?php
// Email Submit
// Note: filter_var() requires PHP >= 5.2.0
if ( isset($_POST['email']) && isset($_POST['name']) && isset($_POST['text']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {
// detect & prevent header injections
$test = "/(content-type|bcc:|cc:|to:)/i";
foreach ( $_POST as $key => $val ) {
if ( preg_match( $test, $val ) ) {
exit;
}
}
//send email
mail( "test#gmail.com", "Contact Form: ".$_POST['name'], $_POST['text'], "From:" . $_POST['email'] );
}
?>
JS
$('#contact').submit(function() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var dataString = 'name=' + name + '&email=' + email + '&message=' + message;
$.ajax({
type : "POST",
url : "mail.php",
data : dataString,
cache : false,
success : function() {
$("#contact").fadeOut(300);
$("#notice").fadeIn(400);
}
});
return false;
});
Thanks.
Maybe your js code run before jQuery has been loaded. Try to include jQuery before other js files:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.dropotron.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<script src="js/contact.js"></script>
By the way, you just need to include jQuery once, not twice.
Your textarea has a name="message" whereas you are looking for isset($_POST['text']) in the submission handler code
This is a jQuery Mobile question, but it also relates to pure jQuery.
How can I post form data without page transition to the page set into form action attribute. I am building phonegap application and I don't want to directly access server side page.
I have tried few examples but each time form forwards me to the destination php file.
Intro
This example was created using jQuery Mobile 1.2. If you want to see recent example then take a look at this article or this more complex one. You will find 2 working examples explained in great details. If you have more questions ask them in the article comments section.
Form submitting is a constant jQuery Mobile problem.
There are few ways this can be achieved. I will list few of them.
Example 1 :
This is the best possible solution in case you are using phonegap application and you don't want to directly access a server side php. This is an correct solution if you want to create an phonegap iOS app.
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
#login-button {
margin-top: 30px;
}
</style>
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div data-role="page" id="login" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Login Page</h3>
</div>
<div data-role="content">
<form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<div data-role="fieldcontain">
<label for="password">Enter your password:</label>
<input type="password" value="" name="password" id="password"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit">
</fieldset>
</form>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3></h3>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>Page footer</h3>
</div>
</div>
</body>
</html>
check.php :
<?php
//$action = $_REQUEST['action']; // We dont need action for this tutorial, but in a complex code you need a way to determine ajax action nature
//$formData = json_decode($_REQUEST['formData']); // Decode JSON object into readable PHP object
//$username = $formData->{'username'}; // Get username from object
//$password = $formData->{'password'}; // Get password from object
// Lets say everything is in order
echo "Username = ";
?>
index.js :
$(document).on('pagebeforeshow', '#login', function(){
$(document).on('click', '#submit', function() { // catch the form's submit event
if($('#username').val().length > 0 && $('#password').val().length > 0){
// Send data to server through ajax call
// action is functionality we want to call and outputJSON is our data
$.ajax({url: 'check.php',
data: {action : 'login', formData : $('#check-user').serialize()}, // Convert a form to a JSON string representation
type: 'post',
async: true,
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success: function (result) {
resultObject.formSubmitionResult = result;
$.mobile.changePage("#second");
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('Network error has occurred please try again!');
}
});
} else {
alert('Please fill all nececery fields');
}
return false; // cancel original event to prevent form submitting
});
});
$(document).on('pagebeforeshow', '#second', function(){
$('#second [data-role="content"]').append('This is a result of form submition: ' + resultObject.formSubmitionResult);
});
var resultObject = {
formSubmitionResult : null
}
I have run into same issue where I am calling another .php page from my index.html.
The .php page was saving and retrieving data and drawing a piechart. However I found that when piechart drawing logic was added, the page will not load at all.
The culprit was the line that calls the .php page from my index.html:
<form action="store.php" method="post">
If I change this to:
<form action="store.php" method="post" data-ajax="false">
, it will work fine.
On using PHP and posting data
Use
data-ajax = "false" is the best option on <form> tag.
Problem is that JQuery Mobile uses ajax to submit the form. The simple solution to this is to disable the ajax and submit form as a normal form.
Simple solution: form action="" method="post" data-ajax="false"