How do I enable textfield based on radio button choice?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Bbob
Forum Commoner
Posts: 57
Joined: Sat Aug 07, 2010 4:46 am

How do I enable textfield based on radio button choice?

Post 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>
 
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

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

Post 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
Bbob
Forum Commoner
Posts: 57
Joined: Sat Aug 07, 2010 4:46 am

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

Post 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.
User avatar
PHPHorizons
Forum Contributor
Posts: 175
Joined: Mon Sep 14, 2009 11:38 pm

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

Post 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
vishal5085
Forum Newbie
Posts: 3
Joined: Thu Aug 05, 2010 11:58 pm

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

Post 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>
Post Reply