json, ajax and php. Making it wok together

json, ajax and php. Making it wok together

Hi. I downloaded and adapted an Ajax and PHP based Contact Form, to match my form and my purpose. The downloaded file works the way I want, but the changed file doesn't. I can't find what is wrong. Can some one help me finding the problem? Here is my code

  1. index.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>Formulário de Registo</title>
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  3. <script type="text/javascript">
    $(document).ready(function() {
        $("#submit_reg_form").click(function() {
            //get input field values
            var first_name       = $('input[name = fname]').val();
            var last_name        = $('input[name = lname]').val();
            var user_email       = $('input[name = email]').val();
            var password1        = $('input[name = pwd1]').val();
            var password2        = $('input[name = pwd2]').val();
  4.         //simple validation at client's end
            //we simply change border color to red if empty field using .css()
            var proceed = true;
            if(first_name==""){
                $('input[name = fname]').css('border-color','red');
                proceed = false;
            }
            if(last_name==""){
                $('input[name = lname]').css('border-color','red');
                proceed = false;
            }
            if(user_email==""){
                $('input[name = email]').css('border-color','red');
                proceed = false;
            }
            if(password1=="") {   
                $('input[name = pwd1]').css('border-color','red');
                proceed = false;
            }
            if(password2=="") {   
                $('input[name = pwd2]').css('border-color','red');
                proceed = false;
            }
  5.         //everything looks good! proceed...
            if(proceed)
            {
                //data to be sent to server
                post_data = {'fname':first_name, 'lname':last_name, 'email':user_email, 'pwd1':password1, 'pwd2':password2};
               
                //Ajax post data to server
                $.post('contact_me.php', post_data, function(response){ 
  6.                 //load json data from server and output message    
        if(response.type == 'error')
        {
         output = '<div class="error">'+response.text+'</div>';
        }else{
            output = '<div class="success">'+response.text+'</div>';
         
         //reset values in all input fields
         $('#regist_form input').val('');
        }
        
        $("#result").hide().html(output).slideDown();
                }, 'json');
       
            }
        });
       
        //reset previously set border colors and hide all message on .keyup()
        $("#regist_form input, #regist_form textarea").keyup(function() {
            $("#regist_form input, #regist_form textarea").css('border-color','');
            $("#result").slideUp();
        });
       
    });
    </script>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
  7. <body>
    <fieldset id="regist_form">
    <legend>Sua Identificação</legend>
        <div id="result"></div>
        <label for="fname"><span>Primeiro Nome: </span>
        <input type="text" name="fname" id="fname" placeholder="Primeiro nome" />
        </label>
       
        <label for="lname"><span>Último Nome: </span>
        <input type="text" name="lname" id="lname" placeholder="Último nome" />
        </label>
       
        <label for="email"><span>Endereço de Email: </span>
        <input type="email" name="email" id="email" placeholder="Endereço de email" />
        </label>
       
        <label for="pwd1"><span>Senha: </span>
        <input type="password" name="pwd1" id="pwd1" placeholder="Senha" />
        </label>
       
        <label for="pwd2"><span>Confirme a Senha: </span>
        <input type="password" name="pwd2" id="pwd2" placeholder="Confirme a senha" />
        </label>
       
       <label><span>&nbsp;</span>
        <button class="submit_reg_form" id="submit_reg_form">Registar</button>
        </label>
    </fieldset>
    </body>
    </html>

the contact_me.php


  1. <?php
    if($_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["fname"]) || !isset($_POST["lname"]) || !isset($_POST["email"]) || !isset($_POST["pwd1"]) || !isset($_POST["pwd2"]))
     {
      $output = json_encode(array('type'=>'error', 'text' => 'Há campos vazios! Todos os campos são obrigatórios'));
      die($output);
     }
  2.  //Sanitize input data using PHP filter_var().
     $first_name = filter_var($_POST["fname"], FILTER_SANITIZE_STRING);
     $last_name  = filter_var($_POST["lname"], FILTER_SANITIZE_STRING);
     $user_email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
     $password1  = filter_var($_POST["pwd1"], FILTER_SANITIZE_STRING);
     $password2  = filter_var($_POST["pwd2"], FILTER_SANITIZE_STRING);
  3.  //additional php validation
     if(strlen($first_name)<2) // If length is less than 2 it will throw an HTTP error.
     {
      $output = json_encode(array('type'=>'error', 'text' => 'Primeiro Nome tem menos de 2 caracteres ou está vazio'));
      die($output);
     }
  4.  if(strlen($last_name)<2) // If length is less than 2 it will throw an HTTP error.
     {
      $output = json_encode(array('type'=>'error', 'text' => 'Ultimo Nome tem menos de 2 caracteres ou está vazio'));
      die($output);
     }
  5.  if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)) //email validation
     {
      $output = json_encode(array('type'=>'error', 'text' => 'Introduza um email válido'));
      die($output);
     }
  6.  if(strlen($password1)<5) // If length is less than 2 it will throw an HTTP error.
     {
      $output = json_encode(array('type'=>'error', 'text' => 'Senha tem menos de 2 caracteres ou está vazia'));
      die($output);
     }
  7.  if(strlen($password2)<5) // If length is less than 2 it will throw an HTTP error.
     {
      $output = json_encode(array('type'=>'error', 'text' => 'Confimação da senha tem menos de 2 caracteres ou está vazia'));
      die($output);
     }
  8.  if($password1 != $password2) //check if passwords are the same
     {
      $output = json_encode(array('type'=>'error', 'text' => 'As Senhas não coorrespondem'));
      die($output);
     }
    }
    ?>

Thank You