title: Submit Login Form Using AJAX and get response
body: <p>I am trying to build a front end HTML page that takes in a username and password and then uses a javascript function to show response depending on the answer received from the server. I am a super noob when it comes to web development so can anyone help me correct my code ?
  Thank you</p>
  
  <p>This is my index.php </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="styles.css" type="text/css" /&gt;
          &lt;title&gt;Login Form&lt;/title&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function(){
                  $("#login").click(function(){
                      username=$("#user_name").val();
                      password=$("#password").val();
  
                      $.ajax({
                          type    : "POST",
                          url     : "login.php",
                          data    : "username="+username+"&amp;password="+password,
                          success : function(html){
                              if(html=='true'){
                                  $("#add_err").html("right username And password");
                                  //$("#login_form").fadeOut("normal");
                                  //$("#shadow").fadeOut();
                                  //$("#profile").html("&lt;a href='logout.php' class='red' id='logout'&gt;Logout&lt;/a&gt;");    
                              }else{
                                  $("#add_err").html("Wrong username And password");
                              }
                          },
                          beforeSend:function(){
                              $("#add_err").html("Loading...")
                          }
                      });
                      return false;
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;?php session_start(); ?&gt;
          &lt;div id="profile"&gt;
              &lt;?php if(isset($_SESSION['user_name'])){ ?&gt;
  
              &lt;?php } ?&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
      &lt;?php if(empty($_SESSION['user_name'])){ ?&gt;
      &lt;div class="container" id="login_form"&gt;
          &lt;section id="content"&gt;
              &lt;form action="login.php"&gt;
                  &lt;h1&gt;Login Form&lt;/h1&gt;
                  &lt;div&gt;
                      &lt;input type="text" placeholder="Username" required="" id="user_name"  name="user_name"/&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;input type="password" placeholder="Password" required="" id="password"  name="password"/&gt;
                  &lt;/div&gt;
                  &lt;div class="err" id="add_err"&gt;&lt;/div&gt;
                  &lt;div&gt;
                      &lt;input type="submit" value="Log in" id="login"  /&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
              &lt;div class="button"&gt; &lt;/div&gt; 
          &lt;/section&gt;
      &lt;/div&gt;
      &lt;?php } ?&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my login.php code which uses <code>curl</code> to forward username/pass to appropriate url</p>
  
  <pre><code>&lt;?php
  
  session_start();
  $url =  http://    //url that recieves username/password and responds if credentials are correct after contacting database
  $ch = curl_init($url);
  curl_setopt($ch, CURLOPT_POST, 1);
  curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($_POST));
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  $result = curl_exec($ch);
  curl_close($ch);
  return $result;
  
  ?&gt;  
  </code></pre>