Page 1 of 1

How do I enable textfield based on radio button choice?

Posted: Thu Aug 12, 2010 4:33 am
by Bbob
Can this be done in PHP?

Ive already search it in the web but I dont understand how to do it so I was hoping you guys would explain.

Here are the things I dont understand

1: var currentEnabled = null; - why was it set to null?
2: Im confused about the syntax currentEnabled.disabled = true.
3: currentEnabled = elem
4: How do I modify the code or create a new one (preferred) so that a single radio button can control more than 1 textfield?

Code: Select all

<script type="text/javascript">
var currentEnabled = null;
function enableElement(elem) 
{
if (currentEnabled) 
    {
        currentEnabled.disabled = true;
    }
elem.disabled = false;
currentEnabled = elem;
}
</script>
<form action="">
<input type="text" name="inp1" disabled="disabled">
<input type="radio" name="sel" value="1"
onclick="enableElement(this.form.elements['inp1']);">
<br>
<input type="text" name="inp2" disabled="disabled">
<input type="radio" name="sel" value="2"
onclick="enableElement(this.form.elements['inp2']);">
<br>
<input type="text" name="inp3" disabled="disabled">
<input type="radio" name="sel" value="3"
onclick="enableElement(this.form.elements[inp3'']);">
</form>
 

Re: How do I enable textfield based on radio button choice?

Posted: Thu Aug 12, 2010 1:58 pm
by PHPHorizons
Hello Bbob,

1: That's inconsequential because currentEnabled is given a new value only a few lines later, before it's ever used.

2 and 3: I'm not sure what you're confused about. Can you be more specific?

4: I'm not sure how that would work. Radio buttons by their very nature require at least two radio buttons (otherwise, with only one radio, you cannot turn it off.). And Since any single radio button only has two states (on|off), I don't see how you can squeeze enough information from that to control three textfields (unless you're turning them all on|off). If you are doing that, then you need a checkbox.

Cheers

Re: How do I enable textfield based on radio button choice?

Posted: Thu Aug 12, 2010 7:38 pm
by Bbob
Hi

Thanks for the reply



I understand 2 & 3 now :D. Ive been doing research while waiting for answers

As for the code, Im trying different modifications on it.

My goal is

I have 5 textfields and 3 buttons and supposedly 3 radio buttons
[ ]description
[ ]qty
[ ]unit
[ ]unit price
[ ]id

o [ add ] o [ edit ] o [ delete ]

If the add radio button is selected, description, qty, unit, unitprice textfield will be enabled, and the id will be disabled.

If edit radion button is selected it would have the same effect as the add radio button (Difference is the MySQL query)

If the delete button is selected only the id textfield will be enabled. The rest will be disabled.

Re: How do I enable textfield based on radio button choice?

Posted: Thu Aug 12, 2010 8:25 pm
by PHPHorizons
You're welcome ;)

First, you should put an id on each of those text inputs (if you have multiple sets of these, then it's more complicated and you will need to use classes or an id that has some unique identification on it)
You can apply an onclick event handler to those radio buttons the same way the radio buttons have an event handler on them now. Then, for the add event handler, you can use getElementById to get the text inputs that you want disabled. See what you can come up with, and if you have trouble, I'll try and help you out with it.

Cheers

Re: How do I enable textfield based on radio button choice?

Posted: Thu Sep 09, 2010 11:31 pm
by vishal5085
Try this javascript, i think it works definitely


<HTML>
<HEAD>
<SCRIPT language="javascript">
function add(type)
{
var element = document.createElement("input");
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
var foo = document.getElementById("fooBar");
foo.appendChild(element);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT name="element">
<OPTION value="button">Button</OPTION>
<OPTION value="text">Textbox</OPTION>
<OPTION value="radio">Radio</OPTION>
</SELECT>
<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
<br>
<span id="fooBar">&nbsp;</span>
</FORM>
</BODY>
</HTML>