I have an HTML form and a JavaScript file that processes the form data (The event onsubmit=validate()). I am trying to use Ajax to send an ID to a PHP script. The PHP script should send back an array (JSON?). Each element in that array will be a column from a query, based on the ID that was sent. Then I want to compare the results found in the database with the one the user entered in the HTML form. My question are: Is this good practice? How can I implement this idea if it is, if not, what is the better approach?
I am putting what I have so far and will add to the morning. I have not been able to find what I am looking for on my own. Here is my code so far:
function validate() {
var first=document.getElementById("b1j").value;
var last=document.getElementById("b2j").value;
var password=document.getElementById("b3j").value;
var ID=document.getElementById("b4j").value;
var number=document.getElementById("b5j").value;
var email=document.getElementById("b6j").value;
var cbox=document.getElementById("check");
if(first.search(/^[aA-zZ]+[aA-zZ]$/) < 0) {
alert("Invalid first name.");
return;
}
if(last.search(/^[a-zA-Z]+[a-zA-Z]$/) < 0) {
alert("Invalid last name.");
return;
}
if(password.search(/(?=.*[A-Z])(?=.*[0-9])(?=.*[!##$%^&*()_\-=+<>]).{3,10}/) < 0) {
alert("Invalid password.");
return;
}
if(ID.search(/[0-9]{4}/) < 0) {
alert("Invalid ID");
return;
}
if(number.search(/^(\d{3}[\s\-]){2}[0-9]{4}/) < 0) {
alert("Invalid phone number.");
return;
}
if(email.search(/^\w*#\w{2,5}\.com$/) < 0 && cbox.checked) {
alert("Invalid email.");
return;
}
verify(ID);
}
function verify(id) {
//communicate with the php script
//if not verfied, stay on same page and give an alert saying why the credentials are wrong.
//verfied? Go to the page that is being requested in the options (implement in the php script along with session info)
var xhr = new XMLHttpRequest();
xhr.onload = function () {
//Completely lost beyond here.
const result = JSON.parse(this.responseText);
if (result.found !== 0) {
}
else {
}
};
alert("sending");
xhr.open("GET", "../php/vmc4a4.php?id="+ID, false);
xhr.send();
alert(errorMsg);
}
<?php
//Server info hidden
$con = mysqli_connect($servername,$username,$password,$dbname);
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
$id = $_GET['id'];
$query = "SELECT * FROM Stylists WHERE Stylists.id = '$id';";
$result = mysqli_query($con, $query);
$row = mysqli_fetch_assoc($result);
}
?>
Related
Please guys help me because i can't find out what i can do in order to read my javascript a json file which contains an array with one element.
My php file is working fine and the output is a .json file which contains this line: {"posts":[["30"]]}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("127.0.0.1", "root", "", "mysql3");
// Check connection
if($link === false) {
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$user_id =$_POST['user_id'];
$book_id =$_POST['book_id'];
$game_id =$_POST['game_id'];
$site_id =$_POST['site_id'];
$sql= "SELECT site_id FROM components WHERE user_id='$user_id' && book_id='$book_id' && game_id='$game_id' ORDER BY site_id DESC LIMIT 1";
$response = array();
$posts = array();
$result=mysqli_query($link, $sql);
while($row=mysqli_fetch_assoc($result)) {
$site_id=$row['site_id'];
$posts[] = array($site_id);
}
$response['posts'] = $posts;
$fp = fopen('results.json', 'w');
fwrite($fp, json_encode($response));
fclose($fp);
// Close connection
mysqli_close($link);
?>
Can anybody help me what i have to do (without using ajax) in order my javascript function reads that value? I want to rerad this value cause i want to manipulate this number.
function load3() {
var flag1 = true;
do{
var selection = window.prompt("Give the User Id:", "Type a number!");
if ( /^[0-9]+$/.test(selection)) {
flag1=false;
}
}
while(flag1!=false);
$("#user_id").val(selection)
var flag2 = true;
do{
var selection2 = window.prompt("Give the Book Id:", "Type a number!");
if ( /^[0-9]+$/.test(selection2)) {
flag2=false;
}
}
while(flag2!=false);
$("#book_id").val(selection2)
var flag3= true;
do{
var selection3 = window.prompt("Give the Game Id:", "Type a number!");
if ( /^[0-9]+$/.test(selection3)) {
flag3=false;
}
}
while(flag3!=false);
$("#game_id").val(selection3)
//i do not want to do with ajax!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
$.ajax({
type: 'POST',
url: 'http://127.0.0.1/PHP/loo.php',
data: $('#LoadGame').serialize(),
success: function (html) {
//do something on success?
$('#outPut').html(html);
var bingoValue=4;
if( $('#outPut').text().indexOf(''+bingoValue) > 0){
//alert('bingo!');
window.location.href='https://support.wwf.org.uk/';
//document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
}
else {
alert('No!');
}
}
});
}
Thank you for your help!
Assuming this PHP code runs during your doc request,
You can read that json if you put it in a script tag
<script type="text/javascript">
window.myJson = <?php echo(json_encode($response)); ?>
</script
and it will be accessible as window.myJson in frontend
I feel like I'm missing something really simple, so I've decided to get over my stubbornness and actually ask a question here instead of wasting any more time.
I've started making my personal blog from scratch (for the personal challenge and learning experience of it) not too long ago and I'm currently on writing the code for email validation; the standard send email with token & email GET variables. It works properly (hooray), but there's one problem that was introduced when I decided to add email validation to the back end. The ajax call is still successful and returns the right string; however, once I added an else if statement to my javascript to handle showing error messages for invalid email that gets (or is forced) through, it seems to act as though there isn't a curly bracket--my success boolean which determines the success/failure of my alert is set to false and the string displayed to the user is also not as I intended. Here's my code and a screenshot to illustrate:
*I changed the if..else to a switch to see if it would change anything--it didn't.
//JAVASCRIPT
$("form").submit(function(event) {
if(request) request.abort;
var message = "";
var success = false;
var formMessageBox = document.getElementById("form-message");
var form = $(this);
var inputs = form.find("input");
var data = inputs.serialize();
inputs.prop("disabled", true);
request = $.ajax({
url: "php/form.php",
type: "post",
data: data
});
request.done(function(data) {
var submission = data;
switch (submission) {
case "success":
message = "You're good to go! You'll be receiving an email shortly from <strong>my_email</strong>, just to make sure everything's in the green";
$("form").innerHTML = "";
success = true;
break;
case "fail":
message = "Seems this email is already in my database; you may have submitted twice, or somebody might have hijacked your email--don't worry, it's more than likely the former.";
success = false;
break;
default:
message = submission;
success = false;
break;
}
});
request.always(function() {
inputs.prop("disabled", false);
if(success) {
formMessageBox.classList.add("alert-success");
if (formMessageBox.classList.contains("alert-danger")) formMessageBox.classList.remove("alert-danger");
}
else {
formMessageBox.classList.add("alert-danger");
if (formMessageBox.classList.contains("alert-success")) formMessageBox.classList.remove("alert-success");
}
formMessageBox.innerHTML = message;
});
event.preventDefault();
})
//PHP
<?php
if(!$_POST["email"]) {
echo "Please enter an email address";
exit(0);
}
if($_POST["email"] AND !filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
echo "Please enter a valid email address";
exit(0);
}
$dbconn = mysqli_connect("localhost","username", "password", "db");
if (mysqli_connect_error()) die("There seems to be something wrong. Sorry, try again later");
require_once('CryptoLib.php');
$token = CryptoLib::randomString(16);
$name = isset($_POST['name']) ? $_POST['name'] : "user";
$email = $_POST['email'];
$emailTo="$email";
$subject="Web Devs' Corner Verification";
$body="http://www.allen-mcintoshii.com/webdevscorner/php/verify.php?conf-token=".$token."&email=".$email;
$headers="From: my_email";
$query = "INSERT INTO `users` (`name`, `email`, `conf_token`) VALUES ('$name', '$email', '$token')";
$result = mysqli_query($dbconn, $query);
if ($result AND mail($emailTo, $subject, $body, $headers)) echo "success";
else echo "fail"; ?>
My 'successful error'
To be honest, it's not all that critical, but it definitely is not what I intend to happen, so why not use this little quirk as a chance to learn something? Thanks in advance to everyone who decides to help me out.
Well, while I was trying to do something similar for another small project, I actually found my own soloution. I'll just leave it here in case anyone finds themselves in a similar predicament.
//PHP
<?php
session_start();
$errors = array();
$errors[] = "You have been successfully signed up! Welcome to your diary!";
$min_chars = 8;
$email = $_POST['email'];
$password = $_POST['password'];
if (!$email) {
$errors[] = "Please enter an email address.";
}
if ($email AND !filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = "Please enter a valid email address";
}
if (!$password) {
$errors[] = "Please enter a password.";
}
else {
if (strlen($password) < $min_chars) $errors[] = "Your password must be at least $min_chars characters";
if (!preg_match('`[A-Z]`', $password)) $errors[] = "Your password is required to have at least on capital letter";
}
if (!$errors[1]) {
$dbconn = mysqli_connect(args) //just hiding what needs to be hidden here;
if (mysqli_connect_error()) die("There seems to be something wrong. Sorry, try again later");
$query = "SELECT * FROM users WHERE `email` ='".mysqli_real_escape_string($dbconn, $email)."'";
$results = mysqli_num_rows(mysqli_query($dbconn, $query));
if ($results != 0) $errors[] = "We're sorry, that email is already in our database, did you mean to log in?";
else {
$query = "INSERT INTO `users` (`email`, `password`) VALUES ('".mysqli_real_escape_string($dbconn, $email)."', '".password."')";
$result = mysqli_query($dbconn, $query);
$_SESSION['id'] = mysqli_insert_id($dbconn);
}
}
if ($errors[1]) session_destroy();
echo json_encode($errors);
?>
//Javascript
$(document).ready(function() {
var msgBox = $("#message-box");
$("#signup").submit(function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.post("signup.php", formData, function(data) {
var success = data.length == 1 ? true : null,
numErrors = data.length,
errors = "";
if (success != null) {
msgBox.addClass("alert-success");
msgBox.removeClass("alert-danger");
msgBox.html(data[0]);
}
else {
msgBox.addClass("alert-danger");
msgBox.removeClass("alert-success");
var i;
for (i = 1; i < numErrors; i++) {
errors = errors + "<li>" + data[i] + "</li>";
}
msgBox.html("<ul>" + errors + "</ul>");
}
}, "json")
})
$("#login").submit(function(e) {
$.post()
})
})
Instead of trying to return different strings in the event of pass/fail, I decided to let PHP return one JSON object at the end no matter what. By placing the success message at the very top and pushing any error messages as the code moves along, it becomes way easier to just check if the return data's length is only 1 or greater. If it's 1, there were no errors and everything went fine; else, a for loop iterates through all the returned messages starting from the second one, effectively printing out all errors occurred. I hope this helps anybody who found themselves in a similar bind
SOLVED by #Hanky 웃 Panky!
I am implementing a login function.
The javascript part:
function login() {
var n = $('#userl').val();
var p = $('#passl').val();
if ( n != "" && p != ""){
$.post("functions.php",{userl: n, passl: p}).done(function(mesaj){
if(mesaj == "")
alert("!!!!!!!!!!EMPTY STRING!!!!!");
else
alert(mesaj);
});
}
else {
alert("Enter name and/or passwort");
}
};
And the function from function.php looks:
function login($nume,$parola)
{
$sql = "SELECT id FROM `Users` WHERE nume ='".$nume."' ANY password = '".md5($parola)."'";
$q = mysql_query($sql);
if(!$q)
die(json_encode(array("mesaj" => "Invalid")));
else{
$x = mysql_fetch_array($q);
if (empty($x))
die(json_encode(array('mesaj' => 'The user does not exist')));
else {
// $user = new User($x['id']);
session_start();
$_SESSION['user_id'] = $x['id'];
$_SESSION['loggedin'] = "yes";
die(json_encode(array("mesaj"=>"you were logged")));
}
}
//this part may be useless
die(json_encode(array("mesaj"=>"you were not logged")));
}
if (isset($_POST['nume']) AND isset($_POST['parola']))
login($_POST['nume'], $_POST['parola']);
The problem is it keeps alerting the EMPTY STRING and I think it doesn'n even acccess my login function from php...so the message comes back the way it went: empty
$.post("functions.php",{userl: n, passl: p})
Compare that with
if (isset($_POST['nume']) AND isset($_POST['parola']))
And spot your error :)
You are sending user1 and pass1 and in PHP you are checking for nume and parola which don't exist obviously.
I think this might be the cause of why my code is not working.. The 'if(name.val().length > 3)' is never can execute so I put an alert to test the returned data, this is what it look like :
my js
$(document).ready(function(){
var form = $("#customForm");
var name = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var pass1 = $("#pass1");
var passInfo = $("#pass1Info");
var pass2 = $("#pass2");
var pass2Info = $("#pass2Info");
var state = false;
name.keyup(validateName);
function validateName(){
if(name.val().length <= 3){
name.removeClass("valid");
nameInfo.removeClass("valid");
name.addClass("error");
nameInfo.addClass("error");
nameInfo.text("Minimum 4 characters!");
state = false;
}else{
if(name.val().length > 3){
var username=name.val();
$.post('validate.php',{names: username},function(data){
alert(data);
if(data!=0){
name.removeClass("valid");
nameInfo.removeClass("valid");
name.addClass("error");
nameInfo.addClass("error");
nameInfo.text("The username is already taken!");
state = false;
}else{
name.removeClass("error");
nameInfo.removeClass("error");
name.addClass("valid");
nameInfo.addClass("valid");
nameInfo.text("username available");
state = true;
}
});
}
}
}
return state;
//end
});
my PHP code :
<?php
$name = $_POST['names'];
$email = $_POST['emails'];
if($name !=""){
mysql_connect("localhost","root","") or die("Fail to connect to database");
mysql_select_db("reglog");
$uname = mysql_query("SELECT username FROM users WHERE username='$name'");
$count = mysql_num_rows($uname);
if($count !=0){
echo 1;
}else{
echo 0;
}
}
if($email !=""){
mysql_connect("localhost","root","") or die("Fail to connect to database");
mysql_select_db("reglog");
$useremail = mysql_query("SELECT email FROM users WHERE email='$email'");
$countemail = mysql_num_rows($useremail);
if($countemail !=0){
echo 1;
}else{
echo 0;
}
}
?>
It is throwing an warning. Make a habit of checking if a index is available in an array, thus removing possibilities of such error.
$email = isset($_POST['emails']) ? $_POST['emails'] : '';
or do not display any errors to suppress such warning (not recommended).
And as mentioned by Kai, you haven't passed any variables as emails.
$.post('validate.php',{ names: username, 'emails' : email }, ... }
You aren't passing emails as a post variable.
$.post('validate.php',{names: username},function(data){
should be
$.post('validate.php',{names: username, emails: email},function(data){
AS starx says, you should check post values with isset before running processes on the variables
Make return type to html and it will work.
I have a JavaScript function as follows:
function popup(username) {
var req = createAjaxObject();
var message = prompt("Message:","");
if(message != ""){
req.onreadystatechange = function() {
if (req.readyState == 4) {
alert(req.responseText);
}
}
req.open('POST','getmessage.php',true);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send("username=" + username +"&message="+message);
} else {
alert("Please enter a message");
}
}
When the Cancel button is hit, the form is still processed through getmessage.php. Any way to have the Cancel button do nothing?
EDIT:
Here is the way this function is called:
<?php
mysqlLogin();
$username = $_COOKIE['sqlusername'];
$sql = mysql_query("SELECT username FROM `users` WHERE username!='$username'");
if(mysql_num_rows($sql) != 0) {
echo "<table class='usertable' align='center'>";
while($row = mysql_fetch_array($sql)){
$username = $row['username'];
echo "<tr><td><center>" . $row['username'] . "</center></td><td> Send Message</td></tr>";
}
echo "</table>";
} else {
echo "<center>No users found!</center>";
}
?>
The PHP script its linked to:
<?php
$id = rand(1,1500);
$poster = $_POST['username'];
$message = $_POST['message'];
$to = $_COOKIE['sqlusername'];
require('functions.php');
mysqlLogin();
$sql = mysql_query("INSERT INTO `messages` VALUES ('$id','$message','$to','$poster','')");
if($sql){
echo "Message sent!";
} else {
echo "Woops! Something went wrong.";
}
?>
In the case of Cancel, the prompt result is null, and null != '' (as per ECMA-262 Section 11.9.3).
So, add an extra explicit check for null inequality:
if(message != "" && message !== null) {
However, since the message is either some string or null and you only want to pass when it's a string with length > 0, you can also do:
if(message) {
This means: if message is truthy (i.e. not null or an empty string, amongst other falsy values), then enter the if clause.
Are you using Safari by any chance? I have found that Safari seems to be returning empty string instead of null when the user clicks Cancel.
See here: Safari 5.1 prompt() function and cancel.
Yeah, my suggested comment does work
var message = prompt("Message:","");
if(message){
alert("Not working!");
} else {
alert("Working!");
}
JSFiddle
var message = prompt("Message:","");
if(message){
alert("Message accepted, now i can process my php or script and blablabla!");
} else {
alert("Cancel Press or Empty Message, do nothing!");
}
var message = prompt('type any...', '');
if(message+'.' == 'null.')
{
alert("you've canceled");
}
else
{
alert("type ok");
}
$.messager.prompt('Save To File', 'FileName:', function(e){
if (e.response!='undefined'){
if (r!="")
{
alert('Your FileName is:' + r);
}
else
{
$.messager.alert('Err...','FileName cannot empty!!!');
}
}
});