I want to have an account signup page where I check if the is email already used. If so the PHP should send a message saying so, else there should be an insert statement. What I have now is an html form which gets submitted via javascript to php, this all works, but i cant't get any error messages to work. How can i use an server (PHP) response in my javascript?
Server:
<?php
require 'config.php';
require 'resources/password.php';
$con = mysqli_connect($url,$username,$password,$database);
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$name = $_POST['name'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$password = $_POST['password'];
$username = $_POST['username'];
$verifyemail = mysqli_real_escape_string($_POST['email']);
$numberofrowsquery = "select * from `users` where `user_email`='$email'";
$numberofrows=mysqli_query($con,"select * from `users` where `user_email`='$email'");
//$exitst = mysqli_num_rows($numberofrows);
if($numberofrows->num_rows)
{
//echo "exist";
echo json_encode(array(
'status' => 'exist',
'message'=> 'exist message'
));
}
else
{
$hash = password_hash($password, PASSWORD_BCRYPT, array("cost" => 10));
$query = "INSERT INTO users(user_email, username, user_voornaam,user_achternaam,user_password,user_hash) VALUES ('$email', '$username', '$name','$lastname','$password','$hash')";
$succes = mysqli_query($con,$query);
if($succes){
//echo "success";
echo json_encode(array(
'status' => 'success',
'message'=> 'success message'
));
}
else{
//echo"failed";
echo json_encode(array(
'status' => 'failed',
'message'=> 'failed message'
));
}
}
mysqli_close($con);
//echo "Uw account is succesvol geregistreerd.";
?>
HTML / Javascript:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ajax example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="message"></div>
<form id="myform" action="http://stopfoodwaste.stefspakman.com/app/signup.php">
<input type="text" name="name" required/>
<input type="text" name="lastname" required/>
<input type="text" name="username" required/>
<input type="text" name="email" required/>
<input type="password" name="password" required/>
<input type="submit" value="submit"/>
</form>
<div id="response"></div>
<script>
$(function() {
$("#myform").on("submit", function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: 'POST',
data: $(this).serialize(),
beforeSend: function() {
$("#message").html("sending...");
},
success: function(data) {
if(data.status === "success"){
$("#message").hide();
$("#response").html(data);
alert("succes");
location.reload();
}
else if(data.status === "exist"){
$("#message").hide();
alert("Dit emailadress is reeds in gebruik, probeer in te loggen of gebruik een ander mailadres.");
}
else if(data.status === "failed"){
alert("Something Went wrong");
}
}
});
});
});
</script>
</body>
</html>
Anyone some suggestions?
Replace your submit button with simple button and form submit event to button click event. Since you used the submit button, it always submits to action php file.
Update you HTML code like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ajax example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="message"></div>
<form id="myform" action="http://stopfoodwaste.stefspakman.com/app/signup.php">
<input type="text" name="name" required/>
<input type="text" name="lastname" required/>
<input type="text" name="username" required/>
<input type="text" name="email" required/>
<input type="password" name="password" required/>
<input type="button" id="submitBtn" value="submit"/>
</form>
<div id="response"></div>
<script>
$(function() {
$("#submitBtn").on("click", function(e) {
e.preventDefault();
$.ajax({
url: 'http://stopfoodwaste.stefspakman.com/app/signup.php',
type: 'POST',
data: $('#myform').serialize(),
beforeSend: function() {
$("#message").html("sending...");
},
success: function(data) {
if(data.status === "success"){
$("#message").hide();
$("#response").html(data);
alert("succes");
location.reload();
}
else if(data.status === "exist"){
$("#message").hide();
alert("Dit emailadress is reeds in gebruik, probeer in te loggen of gebruik een ander mailadres.");
}
else if(data.status === "failed"){
alert("Something Went wrong");
}
}
});
});
});
</script>
</body>
</html>
Related
I have created a PHP login form where I want to add ajax code in which it helps me to successfully login without loading windows bit during the ajax code are adding .This code is not working. Please help me fix this issue and it is possible that I dont want to show login after page in Jquery . What I mean is that after the login page i dont want dashboard.php to show the user. But my main issue is that my code is not working.Please help and fix my issue.
Thanks in advance.
$.ajax({
method: "POST",
url: "loginpage.php",
dataType: "json",
data: { email: email, password: pass},
success:function(data)
{
if(data.type=='success')
window.location = 'welcomepage_hideme.php';
else
//server side error from php but now
alert("Incorrect email or and password");
}
});
<?php
$msg = "";
if (isset($_POST['submit'])) {
$con = new mysqli('localhost', 'research_emailC', 'test123', 'research_phpEmailConfirmation');
$email = $con->real_escape_string($_POST['email']);
$password = $con->real_escape_string($_POST['pass']);
if ($email == "" || $password == "")
$msg = "Please check your inputs!";
else {
$sql = $con->query("SELECT id, password, isEmailConfirmed FROM users WHERE email='$email'");
if ($sql->num_rows > 0) {
$data = $sql->fetch_array();
if (password_verify($password, $data['password'])) {
if ($data['isEmailConfirmed'] == 0)
$msg = "Please verify your email!";
else {
$msg = "You have been logged in";
header("location: welcomepage_hideme.php");
}
} else
$msg = "Please check your inputs!";
} else {
$msg = "Please check your inputs!";
}
}
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Log In</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container" style="margin-top: 100px;">
<div class="row justify-content-center">
<div class="col-md-6 col-md-offset-3" align="center">
<img src="images/logo.png"><br><br>
<?php if ($msg != "") echo $msg . "<br><br>" ?>
<form method="post" action="loginpage.php">
<input class="form-control" name="email" type="email" placeholder="Email..."><br>
<input class="form-control" name="password" type="password" placeholder="Password..."><br>
<input class="btn btn-primary" type="submit" name="submit" value="Log In">
</form>
</div>
</div>
</div>
</body>
</html>
The problem in the name of getting parameter from $_POST array:
$password = $con->real_escape_string($_POST['pass']);
should be:
$password = $con->real_escape_string($_POST['password']);
Because, in the form it has password name:
<input class="form-control" name="password" type="password" placeholder="Password..."><br>
Please try this.
Ajax code
$(document).ready(function(){
$("#login").submit(function(e) {
e.preventDefault();
$.ajax({
method: "POST",
url: "login.php",
dataType: "json",
data: $(this).serialize(),
success:function(data){
console.log(data);
if(data.type=='success')
window.location = 'welcomepage_hideme.php';
else
//server side error from php but now
alert("Incorrect email or and password");
}
});
});
})
Html code
<div class="container" style="margin-top: 100px;">
<div class="row justify-content-center">
<div class="col-md-6 col-md-offset-3" align="center">
<form method="post" name="login_form" id="login_form">
<input class="form-control" name="email" type="email" placeholder="Email..."><br>
<input class="form-control" name="password" type="password" placeholder="Password..."><br>
<input class="btn btn-primary" type="submit" name="submit" value="Log In">
</form>
</div>
</div>
</div>
The hole logic here is incorrect.
First you should move php code out from loginpage.php into fetchLogin.php:
<?php
$result = [ 'status' => false, 'msg' => "Please check your inputs!" ];
if ( isset( $_POST['email'] ) && isset( $_POST['password'] ) ) {
$con = new mysqli( 'localhost', 'research_emailC', 'test123', 'research_phpEmailConfirmation' );
$email = $con->real_escape_string( $_POST['email'] );
$password = $con->real_escape_string( $_POST['pass'] );
if ( $email !== "" && $password !== "" ) {
$sql = $con->query( "SELECT id, password, isEmailConfirmed FROM users WHERE email='$email'" );
if ( $sql->num_rows > 0 ) {
$data = $sql->fetch_array();
if ( password_verify( $password, $data['password'] ) ) {
if ( $data['isEmailConfirmed'] == 0 ) {
$result['msg'] = "Please verify your email!";
} else {
$result['status'] = true;
$result['msg'] = "You have been logged in";
}
}
}
}
}
echo json_encode( $result );
die();
Then update your js:
$.ajax({
method: "POST",
url: "fetchLogin.php",
dataType: "json",
data: { email: email, password: pass}
}).done( function( response ) {
// code for render response.msg
if ( ! response.status ) {
return false;
} else {
setTimeout( window.location = "welcomepage_hideme.php", 3000 );
}
});
I have written a code by watching some tutorial. What it does is, if one writes a message, it adds it to database without reloading. The problem is it doesnt show me the updated database. It shows the database that was at the time of loading. What function should i add in function() to be able to that. I dont have much knowledge of javascript so if you can add it in the code it will me really helpful. Thanks
<html>
<?include_once('database.php')?>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'home.php',
data: $('form').serialize(),
success: function () {
$('#comment').val('');
}
});
});
});
</script>
</head>
<!--body-->
<body>
<?php
if(isset($_GET["new_message"]))
{
$new_message = $_GET["new_message"];
$sql="INSERT INTO Messages(id, message, time, me) VALUES ('$session_usernumber', '$new_message',now(),'1')";
if(!mysqli_query($con,$sql))
{
echo"can not";
}
}
?>
</body>
<?php
$message_query="SELECT * FROM Messages Where id='$session_usernumber'";
$result = $con->query($message_query);
if ($result->num_rows > 0) {
while($row= $result->fetch_assoc())
{
echo $row['message'];
}
}
else
{
echo"Oops! You don't have any message";
}
?>
<div class="footer">
<form class="search_footer" name="sentMessage" id="contactForm" novalidate >
<input id='comment' autocomplete="off" autofocus="autofocus" type="text" name="new_message" placeholder="Type your message here.." required="required" class="textbox">
<input value="Send message" name="submit" type="submit" class="button">
</form>
</html>
Try this snippet, i think the problem is because your form doesn't send the message data to the database.
<div class="footer">
<form class="search_footer" name="sentMessage" id="contactForm" novalidate >
<input id='comment' autocomplete="off" autofocus="autofocus" type="text" name="new_message" placeholder="Type your message here.." required="required" class="textbox">
<input value="Send message" name="submit" type="submit" class="button">
</form>
</html>
<script>
$(document).ready(function(){
$.ajax({
url:'getmessages.php',type:'GET',success: function(message){console.log(message);}
});
$('form').on('submit', function (e) {
e.preventDefault();
var data = $('#comment').val();
$.ajax({
type: 'POST',
url: 'home.php',
data: {new_message: data},
success: function(response) {
console.log(response);
}
});
});
});
</script>
home.php file:
<?php
if(isset($_POST["new_message"]))
{
$new_message = $_POST["new_message"];
$sql="INSERT INTO Messages(id, message, time, me) VALUES ('$session_usernumber', '$new_message',now(),'1')";
if(!mysqli_query($con,$sql))
{
echo"can not";
}
getmessages.php
<?php
$message_query="SELECT * FROM Messages Where id='$session_usernumber'";
$result = $con->query($message_query);
if ($result->num_rows > 0) {
while($row= $result->fetch_assoc())
{
echo $row['message'];
}
}
else
{
echo"Oops! You don't have any message";
}
?>
**This is my php index.php file. I want to type first name and last name type and auto it has to be save the database. I wrote the code using ajax. but, this is not working properly. Please can any one help me. **
index.php
<?php
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("type", $connection);
if(isset($_POST['submit'])){
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
if($firstName !=''||$lastName !=''){
//Insert Query of SQL
$query = mysql_query("insert into users(firstName, lastName) values ('$firstName', '$lastName')");
echo "<br/><br/><span>Data Inserted successfully...!!</span>";
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank....!!</p>";
}
}
mysql_close($connection);
?>
<html>
<head>
<meta><title>Home Page</title>
<script type="text/javascript">
$(document).on('keyup','firstName','lastName',function(){
var rel = $(this).attr('rel');
var flatvalue = $(this).val();
$("#firstName"+rel).val(flatvalue);
});
</script>
</head>
<body>
<form action="" method="post">
<label for="firstName">First Name</label>
<input type="text" name="firstName" ><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" ><br><br>
<input type="submit" id="submit" name="submit" value="submit"/>
</form>
</body>
</html>
onKeyPress event not proper because it call many times as per user hit.
Use onBlur event instead of onKeyPress for submit the form and save it to MySql users table.
Try below example,
PHP
<?php
$connection = mysql_connect("localhost", "jaydeep_mor", "jaydeep_mor");
$db = mysql_select_db("jaydeep_mor", $connection);
if(isset($_POST['firstName']) && isset($_POST['lastName'])){
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
if($firstName != '' || $lastName != ''){
//Insert Query of SQL
$query = mysql_query("insert into users(firstName, lastName) values ('$firstName', '$lastName')");
header("Location: test.php?msg=Data Inserted successfully...!!");
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank....!!</p>";
}
}
mysql_close($connection);
?>
HTML / JAVASCRIPT
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta><title>Home Page</title>
<script type="text/javascript">
function saveData(){
document.forms["userDataForm"].submit();
}
</script>
</head>
<body>
<?php if(isset($_GET['msg']) && trim($_GET['msg'])!=""){ ?>
<br /><div><?php echo $_GET['msg']; ?></div><br />
<?php } ?>
<form action="test.php" method="post" name="userDataForm">
<label for="firstName">First Name</label>
<input type="text" name="firstName" value="<?php echo isset($_POST['firstName'])?$_POST['firstName']:''; ?>" ><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" value="<?php echo isset($_POST['lastName'])?$_POST['lastName']:''; ?>" onblur="return saveData();" ><br><br>
<!--input type="submit" id="Submit" name="Submit" value="submit"/-->
</form>
</body>
</html>
<?php
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("type", $connection);
if(isset($_REQUEST['firstName'])){
$firstName = $_REQUEST['firstName'];
$lastName = $_REQUEST['lastName'];
if($firstName !=''||$lastName !=''){
//Insert Query of SQL
$query = mysql_query("insert into users(firstName, lastName) values ('$firstName', '$lastName')");
echo "<br/><br/><span>Data Inserted successfully...!!</span>";
die();
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank....!!</p>";
die();
}
}
//mysql_close($connection);
?>
<html>
<head>
<meta><title>Home Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function(){ alert('d');
var firstname = $('#firstName').val();
var lastname = $('#lastName').val();
$.ajax({
url:'',
data:{'firstname':firstname,'lastname':lastname, },
type: 'POST',
success: function(data){
alert("Data Save: " + data);
}
});
});
});
</script>
</head>
<body>
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName"><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName"><br><br>
<input type="submit" id="submit" name="submit" value="submit"/>
</body>
</html>
may be this can help you,
if you want to do it via form submit then just you need to give the url of your controller function in the action method of the form
<form action="" method="post">
<label for="firstName">First Name</label>
<input type="text" name="firstName" ><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" ><br><br>
<input type="submit" id="submit" name="submit" value="submit"/>
</form>
if you want to do it via ajax then you can add id attribute for first_name and last_name input and can do it in following way,
$('#submit').on('click', function(){
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
$.ajax({
url: url of your controler, //url of your controller function
type: "POST",
data: {'first_name' : first_name,'last_name':last_name},
success: function (data) {
//whatever you want to do on success
} else {
//in case of no data
}
}
});
});
in the same way you can give a class attribute to the input box and on keyup event can save the data via class
have you try doing it this way
$('body').delegate('input[type="text"]', 'keypress keydown keyup change propertychange paste', function(event) {
event.stopImmediatePropagation();
if (event.type === 'keydown' || event.type === 'keypress') {
return;
}
//insert what you want to do here
//perform some ajax
/*
$.ajax({
url: 'index.php',
method: 'POST',
data: {
'firstName' : $('input[name=firstName]).val(),
'lastName' : $('input[name=lastName]).val()
},
success: function(mResponse) {
alert(mResponse);
}
});
*/
});
This question already has answers here:
jQuery AJAX submit form
(20 answers)
Closed last year.
Can anyone tell me why this bit of code isn't working?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').bind('submit', function () {
$.ajax({
type: 'post',
url: 'post.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
return false;
});
});
</script>
</head>
<body>
<form>
<input name="time" value="00:00:00.00"><br>
<input name="date" value="0000-00-00"><br>
<input name="submit" type="button" value="Submit">
</form>
</body>
</html>
When I push submit nothing happens. In the receiving php file I'm using $_POST['time'] and $_POST['date'] to put the data in a mysql query but it's just not getting the data. Any suggestions? I'm assuming it's something to do with the submit button but I can't figure it out
The form is submitting after the ajax request.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
</script>
</head>
<body>
<form>
<input name="time" value="00:00:00.00"><br>
<input name="date" value="0000-00-00"><br>
<input name="submit" type="submit" value="Submit">
</form>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').bind('click', function (event) {
// using this page stop being refreshing
event.preventDefault();
$.ajax({
type: 'POST',
url: 'post.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
</script>
</head>
<body>
<form>
<input name="time" value="00:00:00.00"><br>
<input name="date" value="0000-00-00"><br>
<input name="submit" type="submit" value="Submit">
</form>
</body>
</html>
PHP
<?php
if(isset($_POST["date"]) || isset($_POST["time"])) {
$time="";
$date="";
if(isset($_POST['time'])){$time=$_POST['time']}
if(isset($_POST['date'])){$date=$_POST['date']}
echo $time."<br>";
echo $date;
}
?>
JS Code
$("#submit").click(function() {
//get input field values
var name = $('#name').val();
var email = $('#email').val();
var message = $('#comment').val();
var flag = true;
/********validate all our form fields***********/
/* Name field validation */
if(name==""){
$('#name').css('border-color','red');
flag = false;
}
/* email field validation */
if(email==""){
$('#email').css('border-color','red');
flag = false;
}
/* message field validation */
if(message=="") {
$('#comment').css('border-color','red');
flag = false;
}
/********Validation end here ****/
/* If all are ok then we send ajax request to email_send.php *******/
if(flag)
{
$.ajax({
type: 'post',
url: "email_send.php",
dataType: 'json',
data: 'username='+name+'&useremail='+email+'&message='+message,
beforeSend: function() {
$('#submit').attr('disabled', true);
$('#submit').after('<span class="wait"> <img src="image/loading.gif" alt="" /></span>');
},
complete: function() {
$('#submit').attr('disabled', false);
$('.wait').remove();
},
success: function(data)
{
if(data.type == 'error')
{
output = '<div class="error">'+data.text+'</div>';
}else{
output = '<div class="success">'+data.text+'</div>';
$('input[type=text]').val('');
$('#contactform textarea').val('');
}
$("#result").hide().html(output).slideDown();
}
});
}
});
//reset previously set border colors and hide all message on .keyup()
$("#contactform input, #contactform textarea").keyup(function() {
$("#contactform input, #contactform textarea").css('border-color','');
$("#result").slideUp();
});
HTML Form
<div class="cover">
<div id="result"></div>
<div id="contactform">
<p class="contact"><label for="name">Name</label></p>
<input id="name" name="name" placeholder="Yourname" type="text">
<p class="contact"><label for="email">Email</label></p>
<input id="email" name="email" placeholder="admin#admin.com" type="text">
<p class="contact"><label for="comment">Your Message</label></p>
<textarea name="comment" id="comment" tabindex="4"></textarea> <br>
<input name="submit" id="submit" tabindex="5" value="Send Mail" type="submit" style="width:200px;">
</div>
PHP Code
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
//check if its an ajax request, exit if not
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
//exit script outputting json data
$output = json_encode(
array(
'type' => 'error',
'text' => 'Request must come from Ajax'
));
die($output);
}
//check $_POST vars are set, exit if any missing
if (!isset($_POST["username"]) || !isset($_POST["useremail"]) || !isset($_POST["message"])) {
$output = json_encode(array('type' => 'error', 'text' => 'Input fields are empty!'));
die($output);
}
//Sanitize input data using PHP filter_var().
$username = filter_var(trim($_POST["username"]), FILTER_SANITIZE_STRING);
$useremail = filter_var(trim($_POST["useremail"]), FILTER_SANITIZE_EMAIL);
$message = filter_var(trim($_POST["message"]), FILTER_SANITIZE_STRING);
//additional php validation
if (strlen($username) < 4) { // If length is less than 4 it will throw an HTTP error.
$output = json_encode(array('type' => 'error', 'text' => 'Name is too short!'));
die($output);
}
if (!filter_var($useremail, FILTER_VALIDATE_EMAIL)) { //email validation
$output = json_encode(array('type' => 'error', 'text' => 'Please enter a valid email!'));
die($output);
}
if (strlen($message) < 5) { //check emtpy message
$output = json_encode(array('type' => 'error', 'text' => 'Too short message!'));
die($output);
}
$to = "info#wearecoders.net"; //Replace with recipient email address
//proceed with PHP email.
$headers = 'From: ' . $useremail . '' . "\r\n" .
'Reply-To: ' . $useremail . '' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$sentMail = #mail($to, $subject, $message . ' -' . $username, $headers);
//$sentMail = true;
if (!$sentMail) {
$output = json_encode(array('type' => 'error', 'text' => 'Could not send mail! Please contact administrator.'));
die($output);
} else {
$output = json_encode(array('type' => 'message', 'text' => 'Hi ' . $username . ' Thank you for your email'));
die($output);
}
This page has a simpler example
http://wearecoders.net/submit-form-without-page-refresh-with-php-and-ajax/
Here is a nice plugin for jQuery that submits forms via ajax:
http://malsup.com/jquery/form/
its as simple as:
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$(document).ready(function() {
$('#myForm').ajaxForm(function() {
alert('form was submitted');
});
});
</script>
It uses the forms action for the post location.
Not that you can't achieve this with your own code but this plugin has worked very nicely for me!
JS Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var time = $("#time").val();
var date = $("#date").val();
var dataString = 'time='+ time + '&date=' + date;
if(time=='' || date=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
HTML Form
<form>
<input id="time" value="00:00:00.00"><br>
<input id="date" value="0000-00-00"><br>
<input name="submit" type="button" value="Submit">
</form>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Form Submitted Success</span>
</div>
PHP Code
<?php
if($_POST)
{
$date=$_POST['date'];
$time=$_POST['time'];
mysql_query("SQL insert statement.......");
}else { }
?>
Taken From Here
type="button"
should be
type="submit"
In event handling, pass the object of event to the function and then add statement i.e.
event.preventDefault();
This will pass data to webpage without refreshing it.
$(document).ready(function(){
$('#userForm').on('submit', function(e){
e.preventDefault();
//I had an issue that the forms were submitted in geometrical progression after the next submit.
// This solved the problem.
e.stopImmediatePropagation();
// show that something is loading
$('#response').html("<b>Loading data...</b>");
// Call ajax for pass data to other place
$.ajax({
type: 'POST',
url: 'somephpfile.php',
data: $(this).serialize() // getting filed value in serialize form
})
.done(function(data){ // if getting done then call.
// show the response
$('#response').html(data);
})
.fail(function() { // if fail then getting message
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12"></div>enter code here
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="msg"></div>
<form method="post" class="frm" id="form1" onsubmit="">
<div class="form-group">
<input type="text" class="form-control" name="fname" id="fname" placeholder="enter your first neme" required>
<!--><span class="sp"><?php// echo $f_err;?></span><!-->
</div>
<div class="form-group">
<input type="text" class="form-control" name="lname" id="lname" placeholder="enter your last neme" required>
<!--><span class="sp"><?php// echo $l_err;?></span><!-->
</div>
<div class="form-group">
<input type="text" class="form-control" name="email" id="email" placeholder="enter your email Address" required>
<!--><span class="sp"><?php// echo $e_err;?></span><!-->
</div>
<div class="form-group">
<input type="number" class="form-control" name="mno" id="mno" placeholder="enter your mobile number" required>
<!--><span class="sp"><?php //echo $m_err;?></span><!-->
</div>
<div class="form-group">
<input type="password" class="form-control" name="pass" id="pass" pattern="(?=.*[a-z])(?=.*[A-Z]).{4,8}" placeholder="enter your Password" required>
<!--><span class="sp"><?php //echo $p_err;?></span><!-->
</div>
<div class="radio">
<input type="radio" value="male" name="gender" id="gender" checked>male<br>
<input type="radio" value="female" name="gender" id="gender">female<br>
<input type="radio" value="other" name="gender" id="gender">other<br>
<!--><span class="sp"> <?php //echo $r_err;?></span><!-->
</div>
<div class="checkbox">
<input type="checkbox" name="check" id="check" checked>I Agree Turms&Condition<br>
<!--><span class="sp"> <?php //echo $c_err;?></span><!-->
</div>
<input type="submit" class="btn btn-warning" name="submit" id="submit">
</form>enter code here
</div>
<div class="col-md-3 col-sm-6 col-xs-12"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" >
$(function () {
$(".submit").click(function (event) {
var time = $("#time").val();
var date = $("#date").val();
var dataString = 'time=' + time + '&date=' + date;
console.log(dataString);
if (time == '' || date == '')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
} else
{
$.ajax({
type: "POST",
url: "post.php",
data: dataString,
success: function (data) {
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
$("#data").html(data);
}
});
}
event.preventDefault();
});
});
</script>
<form action="post.php" method="POST">
<input id="time" value=""><br>
<input id="date" value=""><br>
<input name="submit" type="button" value="Submit" class="submit">
</form>
<div id="data"></div>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Form Submitted Success</span>
<?php
print_r($_POST);
if ($_POST['date']) {
$date = $_POST['date'];
$time = $_POST['time'];
echo '<h1>' . $date . '---' . $time . '</h1>';
}
else {
}
?>
I'm working on a login form that is ran through different switches so I can have the functions on the same page.
<?php require_once($_SERVER['DOCUMENT_ROOT']."/config.php");
if(isset($_POST['process'])) {
print_r($_POST);
switch($_POST['process']) {
case "login":
echo "Boxes";
break;
case "register":
Register($_POST['user'],$_POST['password'],$_POST['newsletter']);
break;
case "forgot_pw":
ForgotPassword($_POST['user']);
break;
}
}
else { ?>
<h1>Login</h1><br>
<form id="login" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="process" id="process" value="login">
<p class="error"></p>
<input type="text" name="user" id="user" placeholder="Username">
<input type="password" name="pass" id="pass" placeholder="Password">
<input type="submit" name="login" class="login loginmodal-submit" value="Login">
</form>
<script>
$("#login").submit(function(e) {
e.preventDefault();
var continuescript = true;
var username = $("#user").val();
var password = $("#pass").val();
if(username == "") { var continuescript = false; $(".error").html("<i class='fa fa-cross'></i> Username Cannot Be Empty");
$("#user").css("border-color", "#FF3D3D"); }
if(password == "") { var continuescript = false; $(".error").append("<p><i class='fa fa-cross'></i> Password Cannot Be Empty</p>");
$("#pass").css("border-color", "#FF3D3D"); }
if(continuescript == true) {
$.ajax({
type: "POST",
url: $("#login").attr("action"),
data: $("#login").serialize(),
cache: false,
success: function(data) {
alert(data);
}
});
}
});
</script>
<?php } ?>
The return works fine other than the issue that it returns little boxes around the returned value that will impact the if(data == "thisdata") return values. Does anybody know what these boxes are or why they're showing up?
The little boxes are because you have some control characters in the file after the final ?>. It's often recommended that you don't end a script with ?>. It's not needed, and if there are invisible characters after it, they'll be sent in the returned data and cause problems like this.
So delete that tag and everything after it. The end of the file should be
<?php }
I'm not sure what these lines are supposed to be doing else { ?> and <?php } ?> and they are likely the cause of your encoding issue but it could also be related to the fact that your html is missing all of the <!DOCTYPE html> ,<head>, <body> etc...
The logic I use for stuff like this is something like:
<?php require_once($_SERVER['DOCUMENT_ROOT'] . "/config.php");
$command = isset($_POST['process']) ? $_POST['process'] : NULL;
switch ($command) {
case "login":
echo "Boxes";
// do some operations, redirect etc...
exit; // exit instead of break so the rest of the page is not served
case "register":
Register($_POST['user'], $_POST['password'], $_POST['newsletter']);
// do some operations, redirect etc...
exit;
case "forgot_pw":
ForgotPassword($_POST['user']);
// do some operations, redirect etc...
exit;
};
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>Login</h1><br>
<form id="login" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="process" id="process" value="login">
<p class="error"></p>
<input type="text" name="user" id="user" placeholder="Username">
<input type="password" name="pass" id="pass" placeholder="Password">
<input type="submit" name="login" class="login loginmodal-submit" value="Login">
</form>
<script>
$("#login").submit(function (e) {
e.preventDefault();
var continuescript = true;
var username = $("#user").val();
var password = $("#pass").val();
if (username == "") {
var continuescript = false;
$(".error").html("<i class='fa fa-cross'></i> Username Cannot Be Empty");
$("#user").css("border-color", "#FF3D3D");
}
if (password == "") {
var continuescript = false;
$(".error").append("<p><i class='fa fa-cross'></i> Password Cannot Be Empty</p>");
$("#pass").css("border-color", "#FF3D3D");
}
if (continuescript == true) {
$.ajax({
type: "POST",
url: $("#login").attr("action"),
data: $("#login").serialize(),
cache: false,
success: function (data) {
alert(data);
}
});
}
});
</script>
</body>
</html>