Debt Consolidation - Wordpress Theme - Debt Consolidation - Kamala Harris - US Business Directory
PDA

View Full Version : Need An Urgent Help?

Fatima
Feb 19th 2007, 12:15 am
HI
I was wondering if someone could help me out with a small piece of javascript..

If a number of textfields depends on two radio button with same name...like if we provide two options YES or NO (with two radio buttons) and the user clicks YES all fields acitivate accordingly otherwise become disable (if he use NO).....?
I need to know how a number of textfields can depends on two radio buttons ....if the user click on the YES all fields
activate and if he use to choose NO then all fields disable...?
Can anyone help me out with this one?
Thanks!
nico_swd
Feb 19th 2007, 1:07 am
Not 100% sure if I understood you right, but tis should work. (Untested)



<script type="text/javascript">
<!--
function toggle_fields(radio)
{
var fields = document.getElementsByTagName('input');
var enable = (radio.getAttribute('value') == 'yes');

for (var i = 0; i < fields.length; i++)
{
if (fields[i].getAttribute('type').toLowerCase() == 'text')
{
fields[i].setAttribute('disabled', enable);
}
}
}
//-->
</script>


Disable all fields:

<input type="radio" value="no" onclick="toggle_fields(this);" />


Enable all fields:

<input type="radio" value="yes" onclick="toggle_fields(this);" />
Fatima
Feb 19th 2007, 2:32 am
Ohh! You did it.....thtt wht I really want..... THanks alot !!:)
Fatima
Feb 19th 2007, 3:04 am
<html>
<head>
<script type="text/javascript">
function toggle_fields(radio)
{
var fields = document.getElementsByTagName('input');
var enable = (radio.getAttribute('value') == 'yes');
for (var i = 0; i < fields.length; i++)
{
if (fields[i].getAttribute('type').toLowerCase() == 'text')
{
fields[i].setAttribute('disabled', enable);
}
}
}

</script>
</head>
<body>
<form name=form action="post">
If U Choose This Option:<br>
<input type="radio" value="no" name="r" onclick="toggle_fields(this);" /> NO
<input type="radio" value="yes" name="r" onclick="toggle_fields(this);" />Yes<br><br>
<input type=text name="name1" value=";;;;;;;;;;"><br>
<input type=text name="name2" value="..........."><br><br>
!!!!!!!!!!!!!!!!!<br>
Hows tht code goes sperately...like this?<br>
!!!!!!!!!!!!!!!<br>
And If U Choose THis One : <br>
<input type="radio" value="no" name="r1" onclick="toggle_fields(this);" /> NO
<input type="radio" value="yes" name="r1" onclick="toggle_fields(this);" />Yes<br><br>
<input type=text name="name3" value=";;;;;;;;;;"><br>
<input type=text name="name4" value="..........."><br><br>

But Not Distrub These Fields 2 :<br>
<input type=text name="name5" value=";;;;;;;;;;"><br>
<input type=text name="name6" value=";;;;;;;;;;"><br>
<input type=text name="name7" value=";;;;;;;;;;"><br>


</form>
</body>
</html>

I tried your code .....its working but how tht can achieve if I applied ur code like this ....as i coded above.....is tht possible with this code?
nico_swd
Feb 19th 2007, 3:38 am
I modified the function slightly.

<script type="text/javascript">
function toggle_fields(radio, fieldset)
{
var fields = document.getElementById(fieldset).getElementsByTagName('input');
var enable = (radio.getAttribute('value') == 'no');

for (var i = 0; i < fields.length; i++)
{
if (fields[i].getAttribute('type').toLowerCase() == 'text')
{
fields[i].disabled = enable;
}
}
}

</script>



IN order to achieve what you want to, I divided the fields into field sets, buy placing them into separate div's, each with its own ID.

Example:

<div id="fieldset_1">
<input type="radio" value="no" name="r" onclick="toggle_fields(this, 'fieldset_1');" /> NO
<input type="radio" value="yes" name="r" onclick="toggle_fields(this, 'fieldset_1');" />Yes<br><br>
<input type="text" name="name1" value=";;;;;;;;;;"><br>
<input type="text" name="name2" value="..........."><br><br>
</div>


I also added a second argument to the function to tell it in which Div the fields are.

Here's the whole code.

<html>
<head>
<script type="text/javascript">
function toggle_fields(radio, fieldset)
{
var fields = document.getElementById(fieldset).getElementsByTagName('input');
var enable = (radio.getAttribute('value') == 'no');

for (var i = 0; i < fields.length; i++)
{
if (fields[i].getAttribute('type').toLowerCase() == 'text')
{
fields[i].disabled = enable;
}
}
}

</script>
</head>
<body>
<form name="form" method="post" action="">
<div id="fieldset_1">
<input type="radio" value="no" name="r" onclick="toggle_fields(this, 'fieldset_1');" /> NO
<input type="radio" value="yes" name="r" onclick="toggle_fields(this, 'fieldset_1');" />Yes<br><br>
<input type="text" name="name1" value=";;;;;;;;;;"><br>
<input type="text" name="name2" value="..........."><br><br>
</div>

<div id="fieldset_2">
<input type="radio" value="no" name="r1" onclick="toggle_fields(this, 'fieldset_2');" /> NO
<input type="radio" value="yes" name="r1" onclick="toggle_fields(this, 'fieldset_2');" />Yes<br><br>
<input type=text name="name3" value=";;;;;;;;;;"><br>
<input type=text name="name4" value="..........."><br><br>
</div>

<input type=text name="name5" value=";;;;;;;;;;"><br>
<input type=text name="name6" value=";;;;;;;;;;"><br>
<input type=text name="name7" value=";;;;;;;;;;"><br>

</form>
</body>
</html>
Fatima
Feb 19th 2007, 5:32 am
Yes! again u did a great job .....THanks for ur kind help