CODEWITHSUNDEEP
javascripthtml
DEVANG SHARMA
DEVANG SHARMA

Reputation: 2662

Javascript function not called by onclick property

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Login Page</title>
    </head>
    <br><br><br><br>
    <body style="background-color: cornflowerblue" >
        <form action="Login" method="post" name="frmLogin">
            <table style="background-color: darkgrey" align="center" border="1">
                <thead>
                    <tr>
                        <th colspan="2" style="font-size: xx-large;color:darkmagenta" >Login Details</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="font-weight: bold" >Username</td>
                        <td><input type="text" name="txtUsername" value="" /></td>
                    </tr>
                    <tr>
                        <td style="font-weight: bold">Password</td>
                        <td><input type="password" name="txtPassword" value="" /></td>
                    </tr>
                    <tr>
                        <td align="center" colspan="2" >
                            <input type="button" onclick="return reset();" value="Reset" name="btnReset" />
                            <input type="submit" onclick="return submit();" value="Submit" name="btnSubmit" />
                        </td>
                    </tr>
                </tbody>
            </table>
        
        <script type="text/javascript"  language="javascript">
            function submit()
            {
             
                var username=frmlogin.document.txtUsername.vlaue;
                var password=frmlogin.document.txtPassword.vlaue;
                if(username=="")
                {
                    alert("Username Must be filled");
                    return false;
                }
                if(password=="")
                {
                    alert("Password Must be filled");
                    return false;
                }
                return true;
            }
            function reset()
            {
                frmlogin.document.txtUsername.vlaue="";
                frmlogin.document.txtPassword.vlaue="";
                return false;
            }
        </script>
        </form>
    </body>
</html>

I have html code above, and on successfully submit I call a servlet name Login.

But it directly call the servlet. It skips the javascript function.

And if i remove the form then javascript executes.

Upvotes: 0

Views: 926

Answers (3)

satin
satin

Reputation: 707

devang you need to capture event for the submit button click if you want to execute that javascript code. i am having the same problem but i solved it using jquery click events, because the by default it submits directly without moving through the code . if any alternate solution is there , please letme know too

btw jquery code can be written as

$("input[name=btnSubmit]").click(function(e) {

 /* if fails conditions.. */
     e.preventDefault();

});

Upvotes: 1

BalusC
BalusC

Reputation: 1109635

Your problem is that you gave the custom form validator function the same name as the form's default submit function form.submit(). The form's default submit function will have precedence in this context.

To fix this, you need to rename submit() to something else. E.g.

onclick="return validate();"

with

function validate() {
    // ...
}

Unrelated to the concrete problem, you've several major bugs in your JS function, the following line for example is completely wrong:

var username=frmlogin.document.txtUsername.vlaue;

but that's subject for a different question if you can't figure it out.

Last but not least, I hope that you're aware that JS can be disabled/spoofed by the client? Ensure that you're also validating the form in the server side. See also our servlets wiki page for a concrete example.

Upvotes: 2

James.Xu
James.Xu

Reputation: 8295

add the onsubmit event handler for the form:

<form action="Login" method="post" name="frmLogin" onsubmit="return submit();">

Upvotes: 2

Related Questions