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

PHP

Esmobrander Ozpedelamo
Esmobrander Ozpedelamo
9,136 Points
Posted by Esmobrander Ozpedelamo
Esmobrander Ozpedelamo
9,136 Points

Ajax 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
Benjamin Payne
8,142 Points
Benjamin Payne
Benjamin Payne
8,142 Points

Hey 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.

http://php.net/manual/en/class.pdostatement.php

Esmobrander Ozpedelamo
Esmobrander Ozpedelamo
9,136 Points
Esmobrander Ozpedelamo
Esmobrander Ozpedelamo
9,136 Points

If 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
Benjamin Payne
8,142 Points
Benjamin Payne
Benjamin Payne
8,142 Points

Hey 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