This question already has answers here:
jQuery AJAX submit form
(20 answers)
Closed 4 years ago.
I created a contact page.
When I click on the submit button, this form sends my form information to the server-side file (PHP), but the submit button does nothing.
I do not get an answer in the AJAX!
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function(response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
return false;
});
});
</script>
<!doctype html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<meta charset="utf-8">
<title>My Contact form</title>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="#contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="submit" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</body>
</html>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['description'];
$to = 's3dhossein#gmail.com';
$subject = 'the subject';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: s3dhossein#gmail.com' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}else{ echo "Invalid Email, please provide an correct email.";
}
?>
Where do you think the problem is?
Can an error come from AJAX?
Found problems:
1) An error is raised: Error: Bootstrap's JavaScript requires jQuery. It means that the bootstrap's js file must be loaded after the jQuery's js file. So invert their positions:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
2) An error is raised: ReferenceError: $ is not defined for the line $(document).ready(function () {. This means that the jquery is not recognized inside your script. So bring all the js imports in the page head. The times for the js imports at the bottom of the page are long gone.
3) The form tag must be <form id="contactform">, not <form id="#contactform">.
4) If you are submitting through an ajax request, then you must use a button of type "button", not of type "submit". Then you can remove the return false; from the $('#submit').click(function (){...} function too.
Suggestions:
Define an "error" callback for the ajax request.
Define the meta tags as the first ones in the head tags.
Working code:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>My Contact form</title>
<!-- CSS resources -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<!-- JS resources -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function () {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function (response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
});
});
</script>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="button" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
Related
Javascript Jquery Experts,
I need a little help here.
This is my code, when i click on login button without putting any value in user-name & password it show message "All fields are required" but instantly as showen this message it dissapear and display unexpected message like you see when click on login button.
Now what i want ? i want when it display "All fields are required" then this message should be stable not redirect to the other unexpected message.
check also in jsfiddle: https://jsfiddle.net/m1aaaqo9/14/
1: when you click on login button checking in jsfiddle it redirect to this message: {"error":"key missing: title"}
2: I also put the same coding in my page: https://testjsvascripts.blogspot.com/p/javascript-test.html
Now when you click on login on my given page, it will redirect to display this message "Method not allowed error 405" and also add # after .html in url which i dont want.
3: same when you click on run snippet here and click on login without putting any value in user-name & password fields it will show this message "The custom error module does not recognize this error."
So my question is that: i want to display only this message " All fields are required " thats is..there should be no further redirections....So how to fix it in my code. ?
jQuery(document).ready(function($){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html("All Fields Are Required").css("color","red");
}else if(name == "admin" && pass == "123"){
$("#form").html('<h4>User Login Successfully</h4>Back').css('color','green');
}else{
$("#error").html("User Are Not Valid");
}
});
});
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Validation Form</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
</html>
jQuery(document).ready(function($){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html("All Fields Are Required").css("color","red");
}else if(name == "admin" && pass == "123"){
$("#form").html('<h4>User Login Successfully</h4>Back').css('color','green');
}else{
$("#error").html("User Are Not Valid");
}
return false;
});
});
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Validation Form</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
</html>
jQuery(document).ready(function($){
$("#submit").click(function(){
var name= $("#name").val();
var pass = $("#pass").val();
if(name == '' || pass == ''){
$("#Required").html("All Fields Are Required").css("color","red");
}else if(name == "admin" && pass == "123"){
$("#form").html('<h4>User Login Successfully</h4>Back').css('color','green');
}else{
$("#error").html("User Are Not Valid");
}
});
});
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Validation Form</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<span>Name:admin</span>
<span>password:123</span>
<div class="row">
<div class="col-md-4">
<form action="#" method="post" class="form-box" id="form">
<div class="form-group">
<label>Name:</label>
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
</div>
<div class="form-group">
<input type="button" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
<span id="Required" style="color:#ff0000;"></span>
</div>
<span id="error" style="color:#ff0000"></span>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</body>
</html>
In my below code only angular validation is working. When I click on login button, then no angular script works. Can some body help me? Where is my mistake?
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Talkiedo</title>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrapValidator.min.css" rel="stylesheet">
<link href="assets/datatables/css/dataTables.bootstrap.css" rel="stylesheet">
<link href="assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/style.css" rel="stylesheet">
<script src="assets/bootstrap/js/angular.js"></script>
<script src="assets/bootstrap/js/angular-route.min.js"></script>
<script src="assets/bootstrap/js/angular-resource.min.js"></script>
<script src="assets/bootstrap/js/angular-messages.js"></script>
<script src="loginController.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
\\\
<![endif]-->
<style>
.form-group.required .control-label:after {
content:"*";
color:red;
}
</style>
</head>
<body style="background-color:#EEF2F5;" ng-app="loginApp" ng-controller="loginController">
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-4 col-md-4 well" style="padding-left:50px;padding-right:50px">
<h1>Login</h1>
<form class="form-horizontal" name="adminForm" role="form" ng-submit="submitLogin()" novalidate="novalidate">
<div class="form-body">
<div class="form-group required" ng-class="{'has-error': adminForm.admin_username.$touched && adminForm.admin_username.$invalid }">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<input type="email" class="form-control" name="admin_username" id="admin_username" ng-model="admin.admin_username" required style="padding-top: 0px;" placeholder="Enter Your Email Id">
</div>
<div class="help-block" ng-messages="adminForm.admin_username.$error" ng-if="adminForm.admin_username.$touched && adminForm.admin_username.$invalid" >
<p ng-message="required">Your email is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{'has-error': adminForm.admin_password.$touched && adminForm.admin_password.$invalid }">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
<input type="password" class="form-control" name="admin_password" id="admin_password" ng-model="admin.admin_password" required style="padding-top: 0px;" placeholder="Enter Your Password">
</div>
<div class="help-block" ng-messages="adminForm.admin_password.$error" ng-if="adminForm.admin_password.$touched && adminForm.admin_password.$invalid" >
<p ng-message="required">Your Password is required.</p>
</div>
</div>
<span class="help-block" id="wrong_password" name="wrong_password"></span>
<div class="form-group">
<div class="input-group">
<div class=" col-sm-6">
<button type="button" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
</div>
<div class="col-sm-6">
<button type="" class="btn btn-default btn-cancel center-block">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="assets/jquery/jquery-2.1.4.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrapValidator.min.js"></script>
<script src="assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js"> </script>
<script src="assets/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/js/bootbox.min.js"></script>
<script src="assets/js/custome.js"></script>
</body>
</html>
AngularJS code:
// Defining angularjs application.
var loginApp = angular.module('loginApp', ['ngMessages']);
// Controller function and passing $http service and $scope var.
loginApp.controller('loginController', function($scope, $http) {
// create a blank object to handle form data.
$scope.admin = {};
// calling our submit function.
$scope.submitLogin = function() {
// Posting data to php file
alert('dasdas');
if ($scope.adminForm.$valid) {
$http({
method : 'POST',
url : 'http://localhost/talk/admin/login',
data : $scope.admin, //forms user object
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
if (data.errors) {
// Showing errors.
// $scope.errorName = data.errors.address1;
// $scope.errorUserName = data.errors.address2;
// $scope.errorEmail = data.errors.address13;
} else {
$scope.message = data.message;
}
});
}else {
alert("There are invalid fields");
}
};
});
I think you have to change
<button type="button" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
with a submit type button
<button type="submit" class="btn btn-default center-blocks btn-save" ng-disabled="adminForm.$invalid" id="btn-save">Login</button>
So you can submit your form
The problem is that your button is not a submit, but a normal button, so it does not trigger the submit action.
Try to change the submit button type to submit
If you want to submit the form by using jQuery,than you can doing $('.formClass').submit
I'm stuck with a strange problem where a javascript function isn't getting invoked when I click on submit button(LOG IN) from inside a form.
<html>
<head>
<title></title>
<script>
$('#loginBtn').click(function () {
$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
});
</script>
</head>
</html>
Is there anything different I should do here? I'm unable to figure this out. Please could I ask for help?
Remove the extra ) at the end of function hideBtn().
It should look like this
function hideBtn(){
alert('hello');
};
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="app/js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/js/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="app/css/bootsnipLogin.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="app/js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="app/js/login.js"></script>
<link rel="shortcut icon" href="app/image/favicon.ico" />
</head>
<body >
<div class="container">
<div class="card card-container">
<br/>
<center><img src="app/image/wd-logo.gif"></center>
<br/><br/>
<img id="profile-img" class="profile-img-card" src="app/image/avatar_2x.png" />
<br/>
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" action="" method="post">
<input id="username" name="username" placeholder="User Name" class="form-control" required autofocus>
<br/><br/><br/>
<input type="password" id="password" name="password" placeholder="Password" class="form-control" required >
<br/><br/><br/>
<div align="center">
<span id = "errorspan"><?php echo $error; ?></span>
</div>
<br/><br/><br/>
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" name="submit" id="loginBtn">SIGN IN</button>
</form><!-- /form -->
</div><!-- /card-container -->
</div><!-- /container -->
<script>
$('#loginBtn').click(function(){
// alert('as');
$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
});
</script>
</body>
</html>
There's an extra ');' in your script. Remove it and it will work.
function hideBtn(){
//$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
alert('hello');
}
Remove the extra ) then your code will work properly like below
function hideBtn()
{
alert('Hii');
}
I am experiencing a weird issue... when I load the page the first time this works completely:
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
but if I try POSTing to the same page again, with my "Add" or "Remove" button, the above function doesn't work any longer. In other works, the phone field will be perfect and filtered when the page is first loaded, but when you try and add more club fields, the phone filter no longer works. Why isn't the phone field being masked anymore, am I doing something wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<title>Test Page</title>
<meta http-equiv="cache-control" content="no-cache"/>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/framework.css">
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
</head>
<body>
<div data-role="page">
<!-- header -->
<div data-role="header" class="page-header">
</div>
<!--/header -->
<form style="" method="POST">
<fieldset style="text-align: center;">
<label for="phone">Cell Phone</label>
<input type="tel" id="phone" style="" value="<?php if(isset($_POST['phone'])) echo $_POST['phone'];?>" name="phone" />
<br />
<?php
if(isset($_POST['add']))
$_POST['club_num']++;
if(isset($_POST['remove']) && $_POST['club_num'] > 1)
$_POST['club_num']--;
if(!isset($_POST['club_num']))
$_POST['club_num'] = 1;
?>
<input type="hidden" value="<?php if(isset($_POST['club_num'])) echo $_POST['club_num'];?>" name="club_num" />
<h3 style="font-size: 1.5em; margin-top: 40px;">Are you in a Club?</h3>
<?php
$count = 0;
do {
$count++;
?>
<label for="clubs<?=$count?>"><?=$count?>. Club</label>
<input type='text' id="clubs<?=$count?>" name="clubs<?=$count?>" value="<?php if(isset($_POST['clubs'.$count])) echo $_POST['clubs'.$count];?>" />
<?php if($count == $_POST['club_num']){ ?>
<div style="text-align: center; display: inline-block;" data-type="horizontal" data-role="controlgroup" data-mini="true">
<input data-theme="e" data-icon="plus" type="submit" name="add" value="Add" />
<input data-theme="e" data-icon="minus" <?=($_POST['club_num']==1)?'disabled="disabled"':''?> data-iconpos="right" type="submit" name="remove" value="Remove"/>
</div>
<?php
}
} while ($count < $_POST['club_num']);
?>
</fieldset>
</form>
<br />
<!-- footer -->
<div data-role="footer" class="footer">
<div class="ui-grid-solo">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="height:120px">
</div>
</div>
</div>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
When one of the buttons is pressed the page content is reloaded using AJAX. This means the original element '#phone' (that you bound the mask function to) is replaced.
I can't see where you are doing the AJAX request from, but you need to call $("#phone").mask("(999) 999-9999"); again once the page has reloaded.
I figured out how to solve this problem, by using jd182 answer and jeroen comment and link here: http://demos.jquerymobile.com/1.2.0/docs/forms/forms-sample.html
Since it is submitting an ajax form, like jd182 stated, and because it was mobile jquery, all post automatically send as a ajax post.
All I had to do was change
<form style="" method="POST">
to
<form style="" method="POST" data-ajax="false">
and it fixed the problem, because it posted regularly!
Thanks jeroen and jd182!
I have a form that submits then sends information to email using the PHP email function in process.php. That part works fine but I cannot get the redirect(to the same page) after the form is submitted to process.php. I can redirect back to the same page using header on the process.php but then I don't have a popup success message. I tried using Jquery.mobile.Changepage but did not get it to work.
My question is- how can I redirect in Jquery mobile to the same page after the form is processed in process.php? I then need to add a popup success message.
Is mobile.changePage the best way to do it in this situation?
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<div data-role="page" id="one">
<div data-role="header">
<h1>Hitch Fox </h1>
</div>
<form id="myForm" action="process1.php" method="POST">
<div data-role="fieldcontain"> <label for="Email"><em> * </em>
Email: </label> <input name="email" id="email" value="" required="true"
type="email"> </div>
<div data-role="fieldcontain"> <label for="verifyEmail"><em> * </em>
Verify Email: </label> <input name="verifyemail" id="verifyemail"
value="" required="required" type="email"> </div>
<br>
<div data-role="fieldcontain"> <label for="GPSlat"><em> * </em>
GPS Lat: </label> <input name="GPSlat" id="GPSlat" value="" type="text">
</div>
<br>
<div data-role="fieldcontain"> <label for="GPSlong"><em> * </em>
GPS Long: </label> <input name="GPSlong" id="GPSlong" value="" type="text">
</div>
<br>
<input value="SetGPS" id="SetGPS" type="button">
<div data-role="fieldcontain"><label for="LicensePlate"><em> * </em>License
Plate: </label> <input name="LicensePlate" id="LicensePlate" value=""
required="true" type="text"> </div>
<button id="submit">Submit</button>
</form> <!--/fieldcontain-->
<div data-role="footer">
<h4>Hitch Fox</h4>
</div>
<!--/page--> </div>
<!-- Start of second page -->
<div data-role="page" id="two">
<div data-role="header">
<h1>Hitch Fox</h1>
</div><!-- /header -->
<div data-role="content">
<p>Your location was successfully sent to your email.</p>
<p>Back to page 1</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Hitch Fox</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script type="text/javascript">
var lat, lng;
navigator.geolocation.getCurrentPosition(function(position)
{
lat = position.coords.latitude;
lng = position.coords.longitude;
console.log( lat + ":" + lng);
});
// ...
$("#SetGPS").click(function()
{
$("input#GPSlat").val(lat);
$("input#GPSlong").val(lng);
});
</script>
<script type="text/javascript">
$("#submit").submit(function()
{
$.mobile.changePage("../index.html", {allowSamePageTransition: true, transition: "slideup"});
</script>
</body>
</html>
process.php
<?php
$Email = $_POST['email'];
$GPSlat = $_POST['GPSlat'];
$GPSlong = $_POST['GPSlong'];
$LicensePlate = $_POST['LicensePlate'];
$subject = 'Your last GPS Location';
$message = "Your last GPS location was - latitude: $GPSlat longitude: $GPSlong and you were picked up by vehicle license: $LicensePlate";
mail ( $Email, 'Your geolocation', $message);
//**header("location: http://example.com")**//
?>