Enable/Disable Fields

dniwebdesign

04-15-2005, 04:44 AM

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?

<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

<!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:

<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

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