Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Esmobrander Ozpedelamo
9,136 PointsAjax with forms, cant submit data & retrieve data.
When i click submit on my form my Ajax call should send the data to a php file and return an answer but this doesn't seem to be happening... i don't understand why.
<form action="checkEmail.php" method="POST" accept-charset="UTF-8" id="create">
<input type="text" name="name" id="name" placeholder="Full name" ></input>
<input type="email" name="email" id="email" placeholder="Email" value="testing@gmail.com"></input>
<span id="results"></span>
<input type="password" name="password" id="password" placeholder="Password"></input>
<select name="role" id="role">
<option value="Select" disabled selected> Select Position </option>
<option value="Teacher"> Teacher </option>
<option value="Designer"> Designer </option>
<option value="Illustrator"> Illustrator </option>
<option value="Developer"> Developer </option>
</select>
<input type="submit" name="submit" id="send" value="Sign Up"></input>
</form>
/*********************************************************************************
IM ALMOST 100% SURE THAT THE preventDefault(); ITS PREVENTING ME FROM SUBMITTING & RETRIEVING DATA.
********************************************************************************/
$('#create').submit(function(e) {
e.preventDefault();
console.log("working...");
// getting the value that user typed
var searchString = $("#email").val();
// forming the queryString
var data = 'user=' + searchString;
// if searchString is not empty
if (searchString) {
// ajax call
$.ajax({
type: "POST",
url: "checkEmail.php",
dataType: 'text',
data: {test: '1'},
success: function(data) {
// this happen after we get results
window.alert(data);
},
error: function(response) {
console.log("error");
}
});
}
});
/*******************************************************************************
window.alert(data); shows an empty alert....
*******************************************************************************/
include 'inc/connection.php';
//if we got something through $_POST
$name=$_POST['name'];
$email=$_POST['email'];
$password=md5($_POST['password']);
$role=$_POST['role'];
$dbEmail;
$username = $email;
if (isset($_REQUEST['submit'])) {
echo "<script> console.log('$username') </script>";
// build your query to the database
$sql = $db->query("SELECT `email` FROM users WHERE email = '$username'");
$films = $sql->fetchAll(PDO::FETCH_ASSOC);
foreach ($films as $films) {
//Email form DB
$exist= $films['email'];
echo "<script> console.log('$exist') </script>";
}
if( $exist == $username ){
echo 'Username <em>'.$username.'</em> is already taken!';
}else{
echo 'Username <em>'.$username.'</em> is available!';
try {
$result = $db->query("INSERT INTO users (name, email, password, role) VALUES ('$name','$email','$password','$role') ");
} catch (Exception $e) {
echo "Data could not be submitted";
print_r($e);
exit;
}
}
}
1 Answer
Benjamin Payne
8,142 PointsHey Pedro,
try removing the single quotes around $username
$sql = $db->query("SELECT `email` FROM users WHERE email = '$username'");
should be
$sql = $db->query("SELECT `email` FROM users WHERE email = $username");
Also you should look into prepared statements to automatically escape that variable.
Esmobrander Ozpedelamo
9,136 PointsEsmobrander Ozpedelamo
9,136 PointsIf I remove the ' ' the php doesn't work at all...
If i remove the preventDefault(); the form redirect me to checkEmail.php and show's the echo that says:
Username <em>'.$username.'</em> is already taken!
or
Username <em>'.$username.'</em> is available!
the php its working but for some reason it seems that the preventDefault(); its not allowing the data to be send to the emailCheck.php...
( What i've been trying to do since the begging its to append a lil message to the form telling that certain email was already registered or not... I read that the right way to prevent a page from reload or avoid redirect to other page was to use the preventDefault(); )
Benjamin Payne
8,142 PointsBenjamin Payne
8,142 PointsHey Pedro, I see what you're saying. When you echo something in the PHP script it sets a header and once a header is set the AJAX script will end. So a couple of things.
Remove the script tags from the echo statement and just launch the alert from success callback of the AJAX call.
Don't echo anything until the very end or if a stop condition is met like no email was given or something like that. If a stop condition is met end the PHP script by calling exit, return, end or die.
Let me know if that helps.
Best, Ben