the submit button is not clicked

Question

i am trying to validate a form along with a php script. validations are perfectly working, but if i submit correct details the button is not clicked. when i dont enter any details the msg of required field is displayed. when i enter wrong details the alert message is displayed. but when i enter correct details the login button is not clicked. In alls() function i tried to return true but then the problem that it gets refreshed after displaying the required field message for a second.

HTML code:

<form id="frm_login" method="post" name="frm_login" onSubmit="return alls()">

      UserName: <input type="text" name="txt_usrnm" /><label id="i"></label>
      <br/><br/>
      Password: <input type="password" name="pswd" /><label id="i1"></label>
      <br/><br/>

       <input type="submit" name="submit" value="Login" style:"width=10px"/>&nbsp;&nbsp;&nbsp;
      <a href="forgotPassword.php">Forgot Password ?</a>

      <br/><br/>
      <font size="+1"><a href="reg.html">Register Here</a></font>
    </form>

Javascript:

<script type="text/javascript">
function req() 
{

if (document.frm_login.txt_usrnm.value=="") 
{

    document.getElementById('i').innerHTML="*This field is required";
    document.getElementById('i').style.color="red";
    document.getElementById('i').style.fontSize="12px";
}

if (document.frm_login.pswd.value=="") 
{

    document.getElementById('i1').innerHTML="*This field is required";
    document.getElementById('i1').style.color="red";
    document.getElementById('i1').style.fontSize="12px";
}
return false;
}
function validateUname() 
{
submitFlag = true;
var len=document.frm_login.txt_usrnm.value.length;
if((len>0) && (len<6)){
    submitFlag=false;
    document.getElementById('i2').innerHTML="*Enter atleast 6 characters";
    document.getElementById('i2').style.color="red";
    document.getElementById('i2').style.fontSize="12px";
}
return submitFlag;
}
function alls()
{
req();
validateUname();
//CheckPassword(this);
//num();
//confirm_pswd();
//namevalid();
//ValidateEmail(this);  
return false;
}

</script>

PHP code:

<?php
      if(isset($_POST['submit']))
{
 $usrnm1=$_POST['txt_usrnm'];
 $pswd1=$_POST['pswd'];

 $user_name = "root";
 $password = "";
 $database = "show_your_talent";
 $server = "127.0.0.1";
 $db_handle = mysql_connect($server, $user_name, $password);
 $db_found = mysql_select_db($database, $db_handle);

 $res="select * from username where UserName='$usrnm1' and Password='$pswd1'";
 $result2 = mysql_query($res,$db_handle);   


    $count=mysql_num_rows($result2);
    if($count==1)
    {   

         $_SESSION['user'] =$usrnm1;
         //echo $_SESSION['user'];
         header("Location: category.php");   

   }
    else
    {
        //$_SESSION['user']="false";
        echo "<script type='text/javascript'> alert('Incorrect UserName/Password.')</script>"; 
        //header('Location: index.php');            
    }
    mysql_close($db_handle);

  }
  ?>

Answer 1

You submit function, alls() , always returns false which means form will not submit. Try this:

function req() {
    var submitFlag = true;
    if (document.frm_login.txt_usrnm.value == "") {
        submitFlag = false;

        document.getElementById('i').innerHTML = "*This field is required";
        document.getElementById('i').style.color = "red";
        document.getElementById('i').style.fontSize = "12px";
    }

    if (document.frm_login.pswd.value == "") {
        submitFlag = false;

        document.getElementById('i1').innerHTML = "*This field is required";
        document.getElementById('i1').style.color = "red";
        document.getElementById('i1').style.fontSize = "12px";
    }
    return submitFlag;
}

function validateUname() {
    submitFlag = true;
    var len = document.frm_login.txt_usrnm.value.length;
    if ((len > 0) && (len < 6)) {
        submitFlag = false;
        document.getElementById('i').innerHTML = "*Enter atleast 6 characters";
        document.getElementById('i').style.color = "red";
        document.getElementById('i').style.fontSize = "12px";
    }
    return submitFlag;
}

function alls() {
    var valid = true;
    valid *= req();
    valid *= validateUname();

    //CheckPassword(this);
    //num();
    //confirm_pswd();
    //namevalid();
    //ValidateEmail(this);  

    return valid ? true : false;
}

which will prevent form from submitting when req() or validateUname() returns false.

Answer 2

alls() always returns false . Hence you form is never submitted. When onsubmit callback returns false, the submission to the server is stopped.