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);

  }
  ?>

Please, [don't use `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php), They are no longer maintained and are [officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). Learn about [prepared statements](http://en.wikipedia.org/wiki/Prepared_statement) instead, and use [PDO](http://us1.php.net/pdo) or [MySQLi](http://us1.php.net/mysqli). [This article](http://php.net/manual/en/mysqlinfo.api.choosing.php) will help you decide. — Jay Blanchard, Nov 03 '14 at 20:18

Johan Karlsson · Answer 1 · 2014-11-03T20:51:38.613

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.

edited Nov 03 '14 at 20:51

answered Nov 03 '14 at 20:26

Johan Karlsson

6,419
1
19
28

i tried this. but its getting refresh and then redirects to category.php page. – Disha Nov 03 '14 at 20:29
@Disha based on what your code, you should expect nothing more than a full page redirect to category.php since you aren't passing the form values using Ajax you are going to get a page refresh. Your php script then does a redirect to category.php. What you are seeing isn't a bug as much as it is exactly what you are telling the page to do. You might want to open a different question about this if it is something you need help understanding. – Brandon Kindred Nov 03 '14 at 20:39
But what if i dont want to use ajax? Is there any other way to solve this using javascript or php or html? – Disha Nov 03 '14 at 20:44
@Disha document.getElementById('i2').innerHTML in validateUname() will throw an exception and thus form will be submitted. I updated my post, also I think I made an error when returning form alls(). It should work now, try it out! – Johan Karlsson Nov 03 '14 at 20:53
thanks a lot ...it works.:) can you tell me what does that * mean in valid *=req(); – Disha Nov 03 '14 at 20:58
@caeth i tried another function as follows: function CheckPassword(paswd) { var submitFlag=false; var paswd= /^(?=.*[0-9])(?=.*[!@#$%^&*_])[a-zA-Z0-9!@#$%^&*]{7,15}$/; if(document.reg_indi_form.pswd.length>0) { if(!document.reg_indi_form.pswd.value.match(paswd)) { submitFlag=true; document.getElementById('i3').innerHTML="Use atleast one digit,character,specialCharacter"; document.getElementById('i3').style.color="red"; document.getElementById('i10').style.fontSize="12px"; //return false; } } return submitFlag; } but it is not getting validate – Disha Nov 09 '14 at 15:14
@Disha The `*=` is just some boolean multiplication, so if any of the validator function is false `valid` is false (true*true*true*false == false). The second one i would guess something wrong with the regex. (a bit hard to read in the comment) – Johan Karlsson Nov 09 '14 at 20:21

M. Page · Answer 2 · 2014-11-03T20:26:40.327

0

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

edited Nov 03 '14 at 20:26

answered Nov 03 '14 at 20:20

M. Page

2,694
2
20
35

but when i return true in alls() function the page gets refreshed after displaying the required field message for a second and redirects to another(category.php) page. – Disha Nov 03 '14 at 20:26

the submit button is not clicked

2 Answers2