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

JavaScript

AJAX form submit

Hey all I am try to submit form using ajax but whenever i echo $_POST['firstName'] error popup

form action="" method="post" id="#user_reg">
    <!--printing error or success message -->

       <li>
           <input type="text" name="firstName" id="firstName" placeholder="First Name"
              <?php 
                     //restoring values
                  if(!empty($error)){
                    echo "value = ".$firstName;
                  }
              ?>
           >
       </li>
       <li>
           <input type="text" name="lastName" id="lastName" placeholder="Last Name"
             <?php 
                     //restoring values
                  if(!empty($error)){
                    echo "value = ".$lastName;
                  }
              ?>
           >
       </li>
       <li>
           <input type="text" name="userName" id="userName" placeholder="Username (must be greater than 5 characters)"
            <?php 
                     //restoring values
                  if(!empty($error)){
                    echo "value = ".$userName;
                  }
              ?>
           >
       </li>
       <li>
           <input type="email" name="email" id="email" placeholder="Email"
             <?php 
                     //restoring values
                  if(!empty($error)){
                    echo "value = ".$email;
                  }
              ?>
           >
       </li>
       <li>
           <input type="password" name="password" id="password" placeholder="Password (must be greater than 8 characters)">
       </li>
       <li>
           <input type="password" name="con_password" id="con_password" placeholder=" Confirm Password">
       </li>
       <li>
           <input type="button" name="submit" id="reg" value="Register">
       </li>
    </form>
$.ajax({

        url  : "request/register.php",
        type : "POST",
        data : $("#user_reg").serialize(),
        dataType : "text",
        success : function(response,status,http){
            $('#show').html(response);
        },
        error : function(http,status,error){
            alert('server error');
        }
<?php
echo $_POST['firstName'];
?>

1 Answer

When you declare your form id, try using just id="user_reg". The # symbol is needed when grabbing the element by id using jQuery. So right now you would need to do $("##user_reg"), but you don't see that much.

Most browsers will allow you to check the post variables as well in the developer tools if you are having trouble.