Home/ Questions/Q 9230733
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:53:42+00:00

Can anyone please help me through this…. I have two input fields in my

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    See also

    Don’t give event handler the same name as a field!

    Javascript Function and Form Name conflict

    • 0