Enable/Disable Fields

dniwebdesign · 04-15-2005, 04:44 AM

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">

hemebond · 04-15-2005, 05:32 AM

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>

glenngv · 04-15-2005, 05:45 AM

You have a parameter named "which" but you did not use it.

if(which.value == "add")

Brandoe85 · 04-15-2005, 05:46 AM

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>

dniwebdesign · 04-15-2005, 05:53 AM

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.

glenngv · 04-15-2005, 06:00 AM

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.