Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    845
    Thanks
    15
    Thanked 10 Times in 10 Posts

    Enable/Disable Fields

    Code:
    function changecontent(which)
    {
    	if(document.addflyer.flyer.value == "add")
    	{
    		document.addflyer.uploader.disabled = true;
    	}
    	else
    	{
    		document.addflyer.uploader.disabled = false;
    	}
    }
    Alright... I got 2 different radio buttons which hold the values (I have shown them below). Uploader is a "file" input type. I want to disable if the user selects the remove radio button and I want it enabled (so users can choose a file) if they select the add button.

    However the code I have doesn't do squat... if I have the "uploader" file input set as disabled both options enable it. Which should do. What is wrong?

    Code:
                      <input type="radio" name="flyer" value="add" onClick="changecontent(this)">
                      Add Flyer 
                      <input type="radio" name="flyer" value="remove" onClick="changecontent(this)">
                      Remove Flyer<br>
                      <br>
                      <input type="file" name="uploader" size="25" class="textinput">
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>57010</title>
    	</head>
    	<body>
    		<form action="57010" method="get">
    			<fieldset>
    				<div>
    					<input id="flyer_add" name="flyer" type="radio" value="add" checked="checked">
    					<label for="flyer_add">Add Flyer</label>
    				</div>
    				<input id="uploader" name="uploader" type="file" size="25">
    				<div>
    					<input id="flyer_rem" name="flyer" type="radio" value="remove" onClick="changecontent(this)">
    					<label for="flyer_rem">Remove Flyer</label>
    				</div>
    			</fieldset>
    		</form>
    
    		<script type="text/javascript">
    			var flyer = document.getElementsByName('flyer');
    			for(var i = 0; i < flyer.length; i++)
    			{
    				flyer[i].onclick = toggleUploader;
    			}
    
    			function toggleUploader()
    			{
    				document.getElementById('uploader').disabled = (document.getElementById('flyer_add').checked) ? false : true;
    			}
    		</script>
    	</body>
    </html>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You have a parameter named "which" but you did not use it.

    if(which.value == "add")

  • #4
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    Asside from hemebond's code, I think you just had a little mistake with your original code:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function changecontent(which)
    {
    	if(which == "add")
    	{
    		document.addflyer.uploader.disabled = true;
    	}
    	else
    	{
    		document.addflyer.uploader.disabled = false;
    	}
    }
    </script>
    </head>
    <body>
    <form name="addflyer">
    <input type="radio" name="flyer" value="add" onClick="changecontent(this.value)">
    Add Flyer
    <input type="radio" name="flyer" value="remove" onClick="changecontent(this.value)">
    Remove Flyer<br>
    <br>
    <input type="file" name="uploader" size="25" class="textinput">
    </form>
    </body>
    </html>

  • #5
    Regular Coder dniwebdesign's Avatar
    Join Date
    Dec 2003
    Location
    Carrot River, Saskatchewan
    Posts
    845
    Thanks
    15
    Thanked 10 Times in 10 Posts
    Quote Originally Posted by glenngv
    You have a parameter named "which" but you did not use it.

    if(which.value == "add")
    Thanks glen, it works now...

    As far as the "<form>" fields, I did have them, just didn't include it with the rest of the code.
    Dawson Irvine
    CEO - DNI Web Design
    http://www.dniwebdesign.com

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    To optimize the function a bit, you can make the form reference generic.
    Code:
    function changecontent(which)
    {
    	if(which.value == "add")
    	{
    		which.form.uploader.disabled = true;
    	}
    	else
    	{
    		which.form.uploader.disabled = false;
    	}
    }
    All HTML fields have form property that refers to the form they belong to.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •