title: Javascript not working in php project and user is still getting routed to php page instead of holding at current page
body: <p>Here is my index.html page code:-</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&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;/meta&gt;
          &lt;title&gt;School&lt;/title&gt;
          &lt;script type="text/javascript" src="script/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="my_script.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div style="margin:auto; width:1000px;"&gt;
  
              &lt;div class="flt topblock"&gt; &lt;a href="" class="flt1 tp_txtplay"&gt;Play School&lt;/a&gt;
                  &lt;br/&gt;&lt;br/&gt;
                  &lt;div&gt;
  
                      &lt;form id='myform' method='post' action='welcome.php' &gt;
                          &lt;span class="flt1 lp_txtlog"&gt;Email ID&lt;/span&gt;
                          &lt;input name="username" type="text" id="username" class="flt lp_textbox" /&gt;
                          &lt;br /&gt;
                          &lt;span class="flt1 lp_txtlog2"&gt;Password&lt;/span&gt;
  
                          &lt;input name="password" type="password" id="password" class="flt lp_textbox2" /&gt;
                          button id="submit" class='flt lp_button'&gt;Login&lt;/button&gt;
                      &lt;/form&gt;
                      &lt;div id="ack"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my_script.js code :-</p>
  
  <pre><code>$("button#submit").click(function() {
      if ($("#username").val() == "" || $("#password").val() == "")
          $("div#ack").html("Please enter both username and password");
      else
          $.post($("#myForm").attr("action"),
                  $("#myForm :input").serializeArray(),
                  function(data) {
                      $("div#ack").html(data);
                  });
  
      $("#myForm").submit(function() {
          return false;
      });
  
  });
  </code></pre>
  
  <p>and below is my welcome.php code :- </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;?php
          $con = mysql_connect('localhost', 'root', 'Wahegurug@9');
          mysql_select_db('test', $con);
          if (!$con) {
              die('Could not connect: ' . mysql_error());
          }
  
          $sql = "SELECT * FROM user ";
  
          $res = mysql_query($sql);
          if ($row = mysql_fetch_array($res)) {
              if ($row['Username'] == $_POST['username']) {
                  if ($row['Password'] == $_POST['password']) {
                      echo'login successful';
                  } else {
                      echo'login failed';
                  }
              }
          }
          ?&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Details are :- I have made this project in Netbeans 7.3 and using xampp server. I have created a simple login page and am trying to use javascript to prevent the page submitting if the wrong credentials are entered.</p>
  
  <p>In my_script.js I'm using a div with id ack to show the user a success or error message.</p>
  
  <p>My problem is that the user is still being redirected to welcome.php (my form's target) even if the wrong credentials are entered. How can I prevent this from happening?</p>