I'm new to JS/AJAX/PHP and i'm trying to make the simplest login page:
HTML and JS/AJAX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript">
function login() {
if ($("#username").val() === "" && $("#psw").val() === ""){
alert("Username and Password required")
}else{
$.ajax({
type: "GET",
url: "login.php",
data: "username=" + $("#username").val() + "&password=" + $("#psw").val(),
dataType: "html",
success: function (responseText) {
if (responseText === 0){
alert("x");
}else if (responseText === 1){
alert("y");
}else{
alert("z");
}
}
});
}
}
</script>
</head>
<body>
<form id="form">
<h1>Login Page</h1>
<fieldset>
<legend>Login</legend>
<strong>Username</strong>
<input type="text" name="username" id="username" placeholder="min. 5 characters" />
<strong>Password</strong>
<input type="password" name="psw" id="psw" placeholder="min. 8 characters" />
<br>
<input type="submit" name="submit" value="LOGIN" onclick="login()" />
</fieldset>
</form>
</body>
</html>
PHP
<?php
if (isset($_REQUEST['username'])) {
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
$connection = mysqli_connect("localhost", "root", "");
$db = mysqli_select_db($connection, "login_esercizio");
$query = "SELECT * FROM users WHERE username = '$username'";
$data = mysqli_query($connection, $query);
$row = mysqli_num_rows($data);
if ($row <= 0){
echo 0;
}else{
echo 1;
}
}
As you can see it's a simple AJAX call.
I tried to understand why this code is not working, but i can't figure it out.
MySQL is working and PhpStorm have interpreter, everything is fine.
I made a select to see if there is data inside MySQL, and there is it.
I think there's something wrong in AJAX call, but i can't figure it out because i can't know/see the problem.
Tell me if i have to be more clearer, i'm pretty new here, also sorry for my english.
Your issue is that when you click the submit button to execute the AJAX request you're also submitting the form. As the form has no action, this cancels the AJAX request and refreshes the page.
To do what you require you need to stop the form submission by hooking to the submit event of the form and calling preventDefault(). You can also improve the logic by using unobtrusive event handlers in JS code, instead of the outdated on* event attributes.
Note that responseText will be a string, so you need to compare the values with that data type. It would even be more reliable to return JSON to avoid issues with whitespace when returning text, but the below should at least work for you:
$(function() {
$('#form').submit(function(e) {
e.preventDefault(); // stop form submission
if ($("#username").val() === "" && $("#psw").val() === "") {
alert("Username and Password required")
} else {
$.ajax({
type: "GET",
url: "login.php",
data: {
username: $("#username").val(),
password: $("#psw").val()
},
dataType: 'text',
success: function (responseText) {
if (responseText.trim() === '0'){
alert("x");
} else if (responseText.trim() === '1') {
alert("y");
} else {
alert("z");
}
}
});
}
})
});
<form id="form">
<h1>Login Page</h1>
<fieldset>
<legend>Login</legend>
<strong>Username</strong>
<input type="text" name="username" id="username" placeholder="min. 5 characters" />
<strong>Password</strong>
<input type="password" name="psw" id="psw" placeholder="min. 8 characters" /><br />
<input type="submit" name="submit" value="LOGIN" />
</fieldset>
</form>
Related
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 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 am trying to understand the basics of using AJAX in conjunction with PHP in order to use php pages to provide functions, but not change my 'view' on my MVC design.
So I created this basic login page...
<!DOCTYPE html>
<head>
<title>learning Php</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript">
$(document).ready(function() {
$(#"login").click(function() {
var action = $("#form1").attr("action");
var form_data = {
username: $("#username").val(),
password: $("#password").val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
{
$("#form1").slideUp('slow', function() {
$("#message").html('<p class="success">You have logged in.</p>');
};
}
else
$("#message").html('<p class="error">Incorrect password or username.</p>');
}
});
return false;
});
});
</script>
</head>
<body>
<div>
<form name="form1" id="form1" method="post" action="loginForm.php">
<p>
<label for="username"> Username: </label>
<input type="text" id="username" name="username" />
</p>
<p>
<label for="password"> Password: </label>
<input type="text" id="username" name="username" />
</p>
<p>
<input type="submit" id="login" name="login" value="login" />
</p>
</form>
<div id="message"></div>
<div>
</body>
</html>
And this was my php page to "handle" to login...
<?php
$is_ajax = $_REQUEST['is_ajax'];
if(isset($is_ajax) && $is_ajax)
{
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
if($username == 'demo' && $password == 'demo')
{
echo 'success';
}
}
?>
The problem I am having is that whenever I submit my login, I am redirected to "/loginForm.php" instead of staying on my current page and having the message change underneath the login form.
I tried using Firebug to help me track down what I suspected to be a javascript error, but to no avail.
Any idea on why I am being redirected or why the form is not submitting via Ajax?
One more mistake here
if(response == 'success')
{
$("#form1").slideUp('slow', function() {
}); <--- You Missed ")" here
}
a small mistake
$(#"login").click(function() {
This should be
$("#login").click(function() {
^ // # inside quotes.
Besides the typo and Rocky's good catch on the }); <--- You Missed ")" here
Both your username and password fields are the same.
<label for="username"> Username: </label>
<input type="text" id="username" name="username" />
and
<label for="password"> Password: </label>
<input type="text" id="username" name="username" />
the 2nd one should read as
<input type="text" id="password" name="password" />
In using everyone's answer, you will have yourself a working script.
Remember to hash your password once you go LIVE.
Edit sidenote: I've made a note below about using a button, rather than an input.
Here's a rewrite, just in case. However that input needs to be a <button>.
<!DOCTYPE html>
<head>
<title>learning Php</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript">
$(document).ready(function() {
$("#login").click(function() {
var action = $("#form1").attr("action");
var form_data = {
username: $("#username").val(),
password: $("#password").val(),
is_ajax: 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
{
$("#form1").slideUp('slow', function() {
$("#message").html('<p class="success">You have logged in.</p>');
});
}
else
$("#message").html('<p class="error">Incorrect password or username.</p>');
}
});
return false;
});
});
</script>
</head>
<body>
<div>
<form name="form1" id="form1" method="post" action="loginForm.php">
<p>
<label for="username"> Username: </label>
<input type="text" id="username" name="username" />
</p>
<p>
<label for="password"> Password: </label>
<input type="text" id="password" name="password" />
<!--
Your original input
<input type="text" id="username" name="username" />
-->
</p>
<button type="submit" id="login" name="login" />LOGIN</button>
<!--
Your original submit input. Don't use it
<p>
<input type="submit" id="login" name="login" value="login" />
</p>
-->
</form>
<div id="message"></div>
</div>
</body>
</html>
Your last div just before </body> was unclosed </div>, I've changed that above.
Additional edit from comments.
It seems that there was probably a space inserted somewhere and the use of trim() was the final nail to the solution.
response.trim();
A special thanks goes out to Jay Blanchard to have given us a helping hand in all this, cheers Sam!
References (TRIM):
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
http://php.net/manual/en/function.trim.php
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>
I'm trying to implement a form based on a tutorial found on the internet. Unfortunately I can't get it working. When I click on "Send" the page reloads and that's it.
Any idea what the issue is? Many thanks
HTML:
<div class="block-right"> <h1>Formulaire de contact</h1>
<!-- CONTACT FORM-->
<div class="contact-form">
<form id="contact" method="post" class="clearfix">
<div class="clearfix">
<input id="name" name="name" placeholder="Name" type="text" value="">
<input id="email" name="email" placeholder="Email" type="email" value="">
</div>
<textarea id="message" name="message" placeholder="Message"></textarea>
<input type="submit" value="Envoyer" name="submit">
<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>
</form>
</div><!-- /.contact-form -->
</div> <!-- End DIV block-right -->
JS:
// Contact Form
$(document).ready(function(){
$("#contact").submit(function(e){
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var dataString = 'name=' + name + '&email=' + email + '&message=' + message;
function isValidEmail(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};
if (isValidEmail(email) && (message.length > 100) && (name.length > 1)){
$.ajax({
type: "POST",
url: "../sendmessage.php",
data: dataString,
success: function(){
$('.success').fadeIn(1000);
}
});
} else{
$('.error').fadeIn(1000);
}
return false;
});
});
PHP:
<?php
// Email Submit
// Note: filter_var() requires PHP >= 5.2.0
if ( isset($_POST['email']) && isset($_POST['name']) && isset($_POST['message']) && 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( "xyz#gmail.com", "Contact Form: ".$_POST['name'], $_POST['message'], "From:" . $_POST['email'] );
}
?>
Remember to wrap your code inside $(document).ready
$(document).ready(function(){
$("#contact").submit(function(e){
e.preventDefault();
//Your code.
return false;
});
});
Or use delegated event:
$(document).on("submit","#contact",function(e){
e.preventDefault();
//Your code.
return false;
});
Update:
If you use .noConflict(); to relinquish control of $. You could try:
jQuery(document).ready(function(){
jQuery("#contact").submit(function(e){
e.preventDefault();
//Your code.
return false;
});
});