Populate text field with radio button value

JavaScript
1

Hi everyone,

I have a form that is used for registering for a conference. There is an early bird special (member or non-member), regular registration (member or non-member), and on-site (member or non-member).

I would like for the form to function like this. If the user selects the early bird special for member (at 100.00) it populates the text field with the value for that row. Or, if the user selects regular registration for non-member it sets the early bird text field back to 0.00 and populates the text field with he value for the regular expression code. At the same time it populates the total field with the total price. I hope this makes sense.

How can I accomplish this using JavaScript or jQuery? The text fields are read only. Thank you in advance! The table is listed below.

Table code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="50%" border="1" cellspacing="0" cellpadding="0">
	<tr>
    	<th width="57%" scope="col">&nbsp;</th>
        <th width="14%" scope="col">Member</th>
        <th width="17%" scope="col">Non-Member</th>
        <th width="12%" scope="col">Total</th>
    </tr>

    <tr>
    	<td class="highlight"><strong>Early Bird:</strong></td>
        <td class="highlight"><div align="center"><input id="early-bird" type="radio" name="price" value="100.00" class="required" title="Please choose a rate package" /> $100.00</div></td>
        <td class="highlight"><div align="center"><input id="early-bird" type="radio" name="price" value="125.00" /> $125.00</div></td>
        <td class="highlight"><div align="center"><input type="text" class="text extra-sm" style="text-align:center;" id="early-bird-total" name="early-bird-total" size="6" value="0.00" readonly /></div></td>
    </tr>

    <tr>
    	<td><strong>Regular Registration:</strong></td>
        <td><div align="center"><input id="regular" type="radio" name="price" value="125.00" /> $125.00</div></td>
        <td><div align="center"><input id="regular" type="radio" name="price" value="250.00" /> $250.00</div></td>
        <td><div align="center"><input type="text" class="text extra-sm" style="text-align:center;" id="regular-total" name="regular-total" size="6" value="0.00" readonly /></div></td>
    </tr>

    <tr>
    	<td><strong>On-Site:</strong></td>
        <td><div align="center"><input id="on-site" type="radio" name="price" value="250.00" /> $250.00</div></td>
        <td><div align="center"><input id="on-site" type="radio" name="price" value="275.00" /> $275.00</div></td>
        <td><div align="center"><input type="text" class="text extra-sm" style="text-align:center;" id="on-site-total" name="on-site-total" size="6" value="0.00" readonly /></div></td>
    </tr>

    <tr>
    	<td colspan="3" align="right"><strong>TOTAL:</strong></td>
        <td><div align="center"><input type="text" class="text extra-sm" style="text-align:center;" id="total-amt" name="total-amt" size="6" value="0.00" readonly /></div></td>
    </tr>
</table>
</body>
</html>

mz

2

Hi zanfardinom,

Welcome to the forums (unofficially speaking…)

The code below will modify the text in the text field in response to a user selecting one of the radio buttons. With a little modification it should do the trick.

If you need more assistance please feel free to ask.

cheers,
floater

<html>
<head>
<title>Radio Test</title>
<script type="text/javascript">
function setText(target) {
var txt = document.getElementById(target);
var temp = txt.value;
var tf = document.getElementById("textField");
tf.value = temp;
}	
</script> 
</head>

<body>
<form id="radioform" action="">
<input id="radio1" type="radio" name="r1" value="Okay" onClick="setText('radio1');" />Yes <br/>
<input id="radio2" type="radio" name="r1" value="Nope" onClick="setText('radio2');" />No <br/>
<input id="textField" type="text" name="text" value="Choose One" />
</form>
<body/>
</html>
3

There are some problems with the way that example code has been coded.

It is popular to apply some indenting to code these days, and thanks to Microsoft, XHTML is now dead for virtually all web site situations.

Here is a good HTML 4.01 code template to use.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Radio Test</title>
</head>
<body>
    ...
</body>
</html>

The inline events are from the dark ages. Better is to have the script just before the </body> tag to attach the events onto the radio buttons.


var form = document.getElementById('radioform'),
    radios = form.elements.r1,
    i;
for (i = 0; i < radios.length; i += 1) {
    radios[i].onclick = setText;
}

You don’t need the identifiers within the form (unless you’re explicitly attaching labels)
The form identifier is all you need.

The form contents should all be block-level elements, so we’ll use paragraphs here.
The break tag is only be used only for poems and possibly addresses.

The labels can be associated either explicitly or implicitly. If we use explicit association then we need to put identifiers back in, but that’s only to support IE6. Because we don’t care about IE6 we can now use implicit association of labels instead.


<form id="radioform" action="">
    <p><label><input type="radio" name="r1" value="Okay">Yes</label></p>
    <p><label><input type="radio" name="r1" value="Nope">No</label></p>
    <p><input type="text" name="text" value="Choose One"></p>
</form>

This means that the setText function only needs to be:


function setText() {
    var form = this.form;
    form.elements.text.value = this.value;
}

Here is a reworking of the above code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Radio Test</title>
</head>
<body>
<form id="radioform" action="">
    <p><label><input type="radio" name="r1" value="Okay">Yes</label></p>
    <p><label><input type="radio" name="r1" value="Nope">No</label></p>
    <p><input type="text" name="text" value="Choose One"></p>
</form>
<script type="text/javascript">
function setText() {
    var form = this.form;
    form.elements.text.value = this.value;
}

var form = document.getElementById('radioform'),
    radios = form.elements.r1,
    i;
for (i = 0; i < radios.length; i += 1) {
    radios[i].onclick = setText;
}
</script>
</body>
</html>
4

Thanks, floater and pmw57!

This is on the right track. In my form example above I have three sections (Early Bird, Regular, and on-site registration). Each section has a text field attached associated with each group. But, the user can only select member or non-member for one group (i.e. Early Bird…etc.).

So, if the user selects member for Early Bird the text field is populated with the amount. What happens when the user decides to go with regular registration. If the user selects regular registration after selecting early bird the early bird text box should go back to 0.00 and no radio buttons are selected for fh and the regular registration show the price for member or non-member.

I really hope this makes sense. Any thoughts/suggestions?

Thank you,
mz

5

I don’t see a form element in your sample code, but I shall presume that you give the form an identifier of “registration” as follows:


<form id="registration" method="get" action="...">
    ...
</form>

The onclick event for the regular registration could go something like this. Please note that your existing table-based design means that you do have more complicated scripting work in order to achieve certain things.


var form = document.getElementById('registration');
// get the regular radios
var regularTotal = form.elements[regular-total];
var regularSection = regularTotal;
while (regularSection.nodeName !== 'TR' && regularSection.nodeName !== 'BODY') {
    regularSection = regularSection.parentNode;
}
if (regularSection.nodeName === 'BODY') { // TR not found
    return false;
}
var regularRadios = regularSection.getElementsByTagName('input');
// attach event to the regular radios
var i;
for (i = 0; i < regularRadios.length; i += 1) {
    regularRadios.onclick = regularOnclickEvent;
}

The regularOnclickEvent() function


function regularOnclickEvent() {
    var form = this.form;
    ...
}

would perform the following tasks:

That would be setting either:


form.elements[early-bird-total].value = '0.00';

or if you want to remain independant of the value, you can use defaultValue instead


var earlyBirdTotal = form.elements[early-bird-total];
earlyBirdTotal.value = earlyBirdTotal.defaultValue;

I don’t know what you mean by fh, but I’ll presume that you want the early-bird radio buttons to not be selected.

In some cases this is done by explicitly unchecking the other radio buttons, however, in this case they have the same name so that when someone selects one of the regular registration radio buttons, the early-bird radio buttons will automatically clear for us.

As the onclick event was fired from one of the radio buttons, we already have a reference to the radio button via the this keyword.


form.elements[regular-total] = this.value;

So those are the major parts that you would be dealing with.

It shouldn’t take much more to piece all of this together.