CODEWITHSUNDEEP
javascripthtml
techno
techno

Reputation: 6500

Java Script not Executing

I have the following html form before the get request is send a password match is done using js,but the js is not working

<html>
<title>Login System</title>
<head>
<script type="text/javascript">
function match()
{
var s1=document.getElementById('t4').value;
var s2=document.getElementById('t5').value;
if (s1 == s2)
{
alert('yep');
}
else
{
alert('Passwords Does not Match');
}
}
</script>
</head>
<style type="text/css">
div.ex {
width:220px;
padding:10px;
border:5px solid gray;
margin:10px;
}
</style>

<body>
<div class="ex">
<strong>User Login</strong>
<form name=f1 method=get action="http://localhost:8080/login">
User &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type=text name=t1><br>
Password <input type=password name=t2><br>
<input type=submit name=sub value="Login">
</form>
</div>
<div class="ex">
<strong>User Registration</strong>
<form name=f2 method=get action="http://localhost:8080/login">
User Name &nbsp&nbsp&nbsp&nbsp&nbsp<input type=text name=t3><br>
Password <input type=password name=t4><br>
Password <input type=password name=t5><br>
<input type=submit name=sub value="reg" onclick='match();'>
</form>
</div>

</body>
</html>

Upvotes: 0

Views: 109

Answers (4)

Rahul Gokani
Rahul Gokani

Reputation: 1708

You can also try this by not chanidn textboxes only change the follwing code 

var s1=document.getElementByName('t4');
var s2=document.getElementByName('t5');

This will also help you to get those values.

Upvotes: 0

Chittaranjan Sethi
Chittaranjan Sethi

Reputation: 442

Try this:

<html>
<title>Login System</title>
<head>
<script type="text/javascript">
function match()
{
    var s1=document.getElementById('t4').value;
    var s2=document.getElementById('t5').value;

    if(s1!="" && s2!="")
    {
        if (!(s1 == s2))
        {
            alert('Passwords does not Match');
            return false;
        }
    }
    else
    {
        alert("Please enter password");
        return false;
    }
}
</script>
</head>
<style type="text/css">
div.ex {
    width:220px;
    padding:10px;
    border:5px solid gray;
    margin:10px;
}
</style>

<body>
    <div class="ex">
        <strong>User Login</strong>
        <form name=f1 method=get action="http://localhost:8080/login">
            User &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type=text name=t1><br>
            Password <input type=password name=t2 /><br />
            <input type=submit name=sub value="Login" />
        </form>
    </div>
    <div class="ex">
        <strong>User Registration</strong>
        <form name=f2 method=get action="http://localhost:8080/login" onsubmit="return match();">
        User Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type=text name='t3' id='t3'><br>
        Password <input type=password name='t4' id='t4' /><br />
        Password <input type=password name='t5' id='t5' /><br />
        <input type=submit name=sub value="reg" />
</form>
</div>

</body>
</html>

Upvotes: 0

asifsid88
asifsid88

Reputation: 4701

This is because you have just given then name attribute 

Password <input type=password name=t4><br>
Password <input type=password name=t5><br>

Make it

Password <input type=password name=t4 id=t4><br>
Password <input type=password name=t5 id=t5><br>

It's a good practice to give both name and id. Helps you and it doesn't fail :)
As js will take id (as your code) and request object will take name

Upvotes: 1

ericosg
ericosg

Reputation: 4965

getElementById looks for the id property and not the name as you used it above.

Change:

Password <input type=password name=t4><br>

to

Password <input type=password name=t4 id='t4'><br>

Upvotes: 3

Related Questions