PDA

Click to See Complete Forum and Search --> : How do you create a dynamic text field when radio button clicked?

zonome
10-29-2003, 12:03 PM
Hi,

I want to create a textfield dynamically when the user checks a radio button.

I have tried the following but it does not work!


This is teh radio button...ignore the JSP code for the time being

<input TYPE="RADIO" name="settlementtype" class="formtext" <%if (("Digital").equals(trade.getSettlementType())) {out.print("CHECKED");}%> value="Digital" onClick="displayPayoutField();">Digital

and then I call the function when the user selects the radio button..

function displayPayoutField(){
document.write("payout %");
document.write("<input type="text" name="payout" size="3">");

}

I want the text field to appear next to the radio button when the radio button is selected....

This ...as you have guesse4d does not work!
Xin
10-29-2003, 05:48 PM
add an ID property to the radio button:

<input type="radio" id="settlementtype" name="settlementtype" .. >Digital

and use this function:

function displayPayoutField() {
var newField=document.createElement("INPUT");
newField.type="TEXT";
newField.name="payout";
newField.size="3";
var radioField=document.getElementById("settlementtype");
radioField.parentNode.insertBefore(newField, radioField.nextSibling.nextSibling);
}

the text field will show up next to the "Digital" text.

only works with DOM-able browsers though
Charles
10-29-2003, 06:03 PM
Originally posted by Xin
add an ID property to the radio button:

<input type="radio" id="settlementtype" name="settlementtype" .. >Digital

and use this function:

function displayPayoutField() {
var newField=document.createElement("INPUT");
newField.type="TEXT";
newField.name="payout";
newField.size="3";
var radioField=document.getElementById("settlementtype");
radioField.parentNode.insertBefore(newField, radioField.nextSibling.nextSibling);
}

the text field will show up next to the "Digital" text.

only works with DOM-able browsers though That'll give you a page that doesn't work for those DOM free users - and there are a great number of them out there. This method will keep things working for all users:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>

<style type="text/css">
<!--
label {display:block; margin:1em 0em}
-->
</style>

<body onload="document.getElementById('payout').style.display = 'none'">

<form action="">
<div>
<label><input onclick="document.getElementById('payout').style.display = this.checked ? 'block' : 'none'" type="checkbox">Digital</label>
<label id="payout">Payout<input style="display:block" type="text"></label>
<button type="submit">Submit</button>
</div>
</form>
Xin
10-29-2003, 06:17 PM
yes that's safer. it's actually the "I want to create a textfield dynamically..." made me come up with my codes.

if my codes will be used, be sure to add some checking so that the new field will be created only once.