show form elements using javascript

javascript onclick

19,902

This is because of your <input> declaration:

<input type="button" onClick="show()" name="show" value="show" />

When you call show() JavaScript will attempt to resolve the symbol show first; because you're calling show() from inlined code, the resolution takes place in document, which attempts to resolve the symbol based on the name or id attribute of your input box.

Solutions

Rename the button:

<input type="button" onClick="show()" name="showbutton" value="show" />

Rename the function:

function showPasswordInputBox()
{
  // your code here
}

<input type="button" onClick="showPasswordInputBox()" name="show" value="show" />

Don't use in-line code:

function show()
{
  // whatever
}

var showButton = document.getElementsByName('show')[0];

showButton.addEventListener('click', show, false);

Javascript Function and Form Name conflict

19,902

Author by

Pradip Borde

Updated on June 04, 2022

Comments

Pradip Borde almost 2 years

Can anyone please help me through this.... I have two input fields in my form . One of which is hidden and I want to show it using a button. Now when i tried to show it using onClick() function its not responding...

can anyone give me code snippet to do so....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password"  style="display:none;" />
<input type="button" onClick="show()" name="show" value="show" />
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>

plz help

Quentin about 11 years

You don't need to add a semi-colon (although it is good style to do so) as JavaScript has semi-colon insertion which will take care of it there. The label you've added (javascript:) is entirely useless as there is no loop to break or continue from.
Jashwant about 11 years

Why this strange behaviour ?
Riju Mahna about 11 years

My Bad... @PradipBorde , please see Jack's answer above. Thanks Quentin for pointing it out
Admin about 11 years

Yeah... the name of the functon needs to be changed here
Ja͢ck about 11 years

@Jashwant There's an exact reason for it, but pragmatically it's just browser quirkiness :)
Jashwant about 11 years

Thanks Jack, Guffa's answer on second link explains it all :)
Ja͢ck about 11 years

@Jashwant Yeah, gives me more ammunition to advocate against inline code :)