...

View Full Version : Javascript to highlight text field w/radio button click?



ahclem
12-12-2004, 02:53 AM
I'm trying to build a form with a radio button group for various charitable donation amounts. Here's the basic coding so far:

<p>
<label>
<input type="radio" name="DonationAmount" value="1000">
$1000</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="500">
$500</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="250">
$250</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="100">
$100</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="50">
$50</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="30">
$30</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="Other">
Other</label>
<input name="OtherAmount" type="text" id="OtherAmount" value=" $">
</p>

What I want to happen is have the text field shaded out by default. If someone clicks the "Other" radio button, this will cause the text field to highlight and the user can enter an amount there.

I've seen this done elsewhere but can't remember where. I assume it's a script that does it.

Any help will be appreciated!!

Bobo
12-12-2004, 03:30 AM
<script language="JAVASCRIPT">
var Temp;
function Whatever()
{
for (var i=0;i<donationAmount.length;i++)
{
if (donationAmount[i].checked) {Temp=donationAmount[i].value}
}
if (Temp=='other') {textBoxNameHere.disabled=false;textBoxNameHere.focus()}
}

</script>

Willy Duitt
12-12-2004, 07:32 AM
I do not know what you mean by shaded out by default....

If you mean disabled... I would not advise disabling any form elements by default which you would like to use and have work for those visitors with javascript disabled... Particularly in this case where the form will be used to elicit donations from your visitors... After all, it would be rather rude to tell visitors that wish to donate that they can not donate unless they have javascript enabled... In other words... Your form should work without javascript enabled and javascript should only be used to enhance the interactivity of the form but not dependant upon it...

Anyways, the below placed into the HEAD should add some functionality to the form (hide/show the OtherAmount text input, change the background color to yellow, validate that only numbers are enter into the field and round the value to two decimal places)... No changes should be needed to the form itself...



<script type="text/javascript">
<!--//
function chkDonation(){
var form = document.forms[0]; // FORM NAME OR PLACE IN FORMS COLLECTION //;
var amount = form['OtherAmount']; // TARGETTED INPUT NAME ( OtherAmount ) //;
amount.style.visibility = 'hidden';

for(var i=0, input=form.getElementsByTagName('input'); i<input.length; i++){
if(input[i].type.match(/radio/i) && input[i].name.match(/DonationAmount/i)){
if(input[i].value.match(/Other/i)){
input[i].onclick = function(){
amount.style.visibility = 'visible';
amount.style.backgroundColor = 'yellow';
amount.value = '';
amount.focus();
amount.onchange = function(){
if(isNaN(this.value)){
alert('Please enter only numbers in this field!');
this.style.backgroundColor = 'yellow';
this.value = ''; return;
} this.style.backgroundColor = '';
this.value = Number(this.value).toFixed(2);
}
}
}
else{
input[i].onclick = function(){
amount.style.visibility = 'hidden';
}
}
}
}
}

window.onload = chkDonation;
//-->
</script>
</head>

<body>
<form>
<label>
<input type="radio" name="DonationAmount" value="1000">
$1000</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="500">
$500</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="250">
$250</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="100">
$100</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="50">
$50</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="30">
$30</label>
<br>
<label>
<input type="radio" name="DonationAmount" value="Other">
Other</label>
<input name="OtherAmount" type="text" id="OtherAmount" value="$">
</form>


.....Willy

ahclem
12-12-2004, 05:55 PM
Good point, Willy. I'll rethink how I construct the form. But I'll also try your script, to see what it does so I can further my understanding. Thanks!

Thanks also, Bobo, for your response.

One other question, off topic: How do you get the code in your message to appear in a textarea (in this forum)? As you can see from my original, I don't know how to do this and I can't seem to find it in the FAQ.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum