Javascript function not called by onclick property

Question

<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.

I want to call servlet, but before it, want to validate in the java script. so how i can do this — DEVANG SHARMA
– DEVANG SHARMA, Commented Nov 8, 2011 at 6:29
see my answer, it is kinda the standard way of doing this. — James.Xu
– James.Xu, Commented Nov 8, 2011 at 7:02

Community · Accepted Answer · 2017-05-23 12:03:10Z

2

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.

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Nov 8, 2011 at 14:58

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

BalusC Over a year ago

Read the error message and/or ask a new question and/or just re-read the whole line a few times yourself. This is offtopic to the current question.

DEVANG SHARMA Over a year ago

but it gives not any error, and also not functionally correct

BalusC Over a year ago

Back to your initial question, please. Did renaming the function name solve the initial problem of the function not being called or not?

DEVANG SHARMA Over a year ago

yes renaming the function name is the solution, now it executes correctly. and the wrong line is now i write as document.frmLogin.txtusername.value

DEVANG SHARMA Over a year ago

Now when i print the value of username and password it gives me undefined. can you hint me how i can do this to correct fetch the values

|

James.Xu · Accepted Answer · 2011-11-08 05:20:21Z

2

add the onsubmit event handler for the form:

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

answered Nov 8, 2011 at 5:20

James.Xu

8,2975 gold badges27 silver badges36 bronze badges

2 Comments

DEVANG SHARMA Over a year ago

i want to call the java script method right form the Button click event

James.Xu Over a year ago

it just doesnt work that way, you can change type=submit to type=button, your javascript method will be called, but your jsp will not be called. boil down to one sentence： it is just by design.

Mister Jojo · Accepted Answer · 2024-07-17 15:21:06Z

1

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

});

edited Jul 17, 2024 at 15:21

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

answered Nov 8, 2011 at 5:35

satin

7072 gold badges7 silver badges19 bronze badges

Collectives™ on Stack Overflow

Javascript function not called by onclick property

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related