FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Javascript hiding form sections problem.

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Dougie1
Ok it is easiest just to show you the code I have:

Code:
<form name="FileSearch" action="search.php" method="post"><label for="Search"><font color="white">File Name: </label><input type="text" id="Search" name="Search">  <label>File Type: </font>
  <select name="type" id="type">
    <option selected="selected" onclick="javascript:document.FileSearch.Custom.type=hidden">MP3</option>
    <option onclick="javascript:document.FileSearch.Custom.type=hidden">Zip</option>
    <option onclick="javascript:document.FileSearch.Custom.type=hidden">Rar</option>
   <option onclick="javascript:document.FileSearch.Custom.type=text">Custom</option>
  </select>
  </label><input size="10" disabled="false" type="hidden" id="Custom" name="Custom"> <input type="submit" name="Submit" value="Submit"></form>


So it is hidden at the start and then when I click custom it appears but then when I go back to something like Rar or MP3 it stays visible. Why doesn't it go back to hidden? Thanks.
snicker
Hi Dougie1,

just out of curiosity, have you tried the event "onChange" instead of "onClick"?

Good work Smile
Ranfaroth
Try first to valid your code...
Dougie1
Ranfaroth wrote:
Try first to valid your code...

Valid my code? What the hell? Try being more explicit. The page appears to have no errors when I test it...

Also the onChange event doesn't seem to work at all. Thanks for the suggestion though.
Ranfaroth
2 small examples :
font element is invalid
form element can't have inline children.

Please, read the specs if you really don't want to valid your code...
Dougie1
OK. I now get confirmation that this is fully valid. It is still not working though. Please could someone say what is wrong.

I get "This Page Is Valid XHTML 1.0 Transitional!" from http://validator.w3.org/

Code:
<!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>Form</title>
</head>

<body>  <form name="FileSearch" action="search.php" method="post"><label for="Search">File Name: </label><input type="text" id="Search" name="Search"/>  <label><br />
File Type:
  <select name="type" id="type">
    <option selected="selected" onclick="javascript:document.FileSearch.Custom.type=hidden">MP3</option>

    <option onclick="javascript:document.FileSearch.Custom.type=hidden">Zip</option>
    <option onclick="javascript:document.FileSearch.Custom.type=hidden">Rar</option>
   <option onclick="javascript:document.FileSearch.Custom.type=text">Custom</option>
  </select>
  </label>
  <p>
    <input size="10" type="hidden" id="Custom" name="Custom"/>

  </p>
  <p>
    <input type="submit" name="Submit" value="Submit"/>
  </p>
</form>
</body>
</html>
BlueVD
the option element doesn't have an onclick event handler...
Use onchange for the select element and make a function that checks what option was selected.
it's the only way
Ranfaroth
Now :
  • Attache the change event with javascript (and not in XHMTL)
  • Give an id to the inputs you want to modify (and use getElementById)
  • When you make one visible, don't forget to make the others hidden...
Zeferman
Dougie1 wrote:
Ranfaroth wrote:
Try first to valid your code...

Valid my code? What the hell? Try being more explicit. The page appears to have no errors when I test it...

Also the onChange event doesn't seem to work at all. Thanks for the suggestion though.

Go to:http://validator.w3.org/#validate_by_input
And insert the code into that box, then hit "check" it should tell you the errors in your code ^_^
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.