We help IT Professionals succeed at work.

Java script to automatically deselect radio buttonsif you enter info in text box

Here is the code Im working with so far:

I have made this work-around (attached), however, what I am really looking for is 2 things.

1. if you select an amount via radio button, then change the amount in the input box, it will de-select the radio button and select the radio "Other Amount".  If you then select a radio button, it will de-select the radio button beside "other amount".  Remember, I cannot use radio number as this form may or may not have other radio buttons included.

2. I would like to give the option of entering 2 decimal places.  I have removed all other characters, and have 2 sets of script. One allows nothing except "0-9", the other allows "0-1 ." .  I would like this to allow the decimal, however, only 2 digits, in real time.

Let me know if I have been unclear.
<script type='text/javascript' language='JavaScript'>
<!--
function allow_numeric(obj){
 if (/[^0-9]/i.test(obj.value))
  obj.value=obj.value.replace(/[^0-9]/g,'')
  obj.value+=''
  obj.focus()
}
function allow_numeric_and_dec(obj){
 if (/[^0-9.]/i.test(obj.value))
  obj.value=obj.value.replace(/[^0-9.]/g,'')
  obj.value+=''
  obj.focus()
}
function FillInAmount(amount){										
	//alert('yes'+amount);
	document.Donation.CCOtherAmount.value= amount;
	//document.Donation.radio1[obj].checked = true;	
}
//-->
</script>
 
<table width='100%' cellpadding='5' cellspacing='0' border='0'>
<tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='25' onClick='FillInAmount("25");return false;' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;25.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='50' onClick='FillInAmount("50");return false;' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;50.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='75' onClick='FillInAmount("75");return false;' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;75.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='100' onClick='FillInAmount("100");return false;' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;100.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='250' onClick='FillInAmount("250");return false;' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;250.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='500' onClick='FillInAmount("500");return false;' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;500.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='1000' onClick='FillInAmount("1000");return false;' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;1,000.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='1500' onClick='FillInAmount("1500");return false;' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;1,500.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='2300' onClick='FillInAmount("2300");return false;' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;2,300.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='4600' onClick='FillInAmount("4600");return false;' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;4,600.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  checked   value='Other' name='CCAmount'></td>
	<td colspan='4' class='btext' valign='bottom'>Amount: <strong>$</strong>
		<input class='BoxShadow'   name='CCOtherAmount' type='text' 
										onkeyup='allow_numeric(this);' 
										size='5' maxlength='7' value=''><strong>.00</strong></span></NOBR></td>
</tr>
</table>

Open in new window

Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
Try this;
<script type='text/javascript' language='JavaScript'>
<!--
function allow_numeric(obj){
 if (/[^0-9]/i.test(obj.value))
  obj.value=obj.value.replace(/[^0-9]/g,'')
  obj.value+=''
  obj.focus()
}
function allow_numeric_and_dec(obj){
 if (/[^0-9.]/i.test(obj.value))
  obj.value=obj.value.replace(/[^0-9.]/g,'')
  obj.value+=''
  obj.focus()
}
function FillInAmount(amount){										
	//alert('yes'+amount);
	document.Donation.CCOtherAmount.value= amount;
	//document.Donation.radio1[obj].checked = true;	
}
//-->
</script>
 <form name="Donation">
<table width='100%' cellpadding='5' cellspacing='0' border='0'>
<tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='25' onClick='FillInAmount("25");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;25.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='50' onClick='FillInAmount("50");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;50.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='75' onClick='FillInAmount("75");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;75.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='100' onClick='FillInAmount("100");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;100.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='250' onClick='FillInAmount("250");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;250.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='500' onClick='FillInAmount("500");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;500.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='1000' onClick='FillInAmount("1000");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;1,000.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='1500' onClick='FillInAmount("1500");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;1,500.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='2300' onClick='FillInAmount("2300");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;2,300.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='4600' onClick='FillInAmount("4600");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;4,600.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  checked   value='Other' id="other" name='CCAmount'></td>
	<td colspan='4' class='btext' valign='bottom'>Amount: <strong>$</strong>
		<input class='BoxShadow'   name='CCOtherAmount' type='text' onfocus="document.getElementById('other').checked=true"
										onkeyup='allow_numeric(this);' 
										size='5' maxlength='7' value=''><strong>.00</strong></span></NOBR></td>
</tr>
</table>
</form>

Open in new window

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
Oops. Missed your second request before.
<script type='text/javascript' language='JavaScript'>
<!--
function allow_numeric(obj){
	var t = String(obj.value).replace(/[^\d\.]/ig,"");
	obj.value = parseFloat(t).toFixed(2);
 
}
 
function FillInAmount(amount){										
	//alert('yes'+amount);
	document.Donation.CCOtherAmount.value= amount;
	//document.Donation.radio1[obj].checked = true;	
}
//-->
</script>
 <form name="Donation">
<table width='100%' cellpadding='5' cellspacing='0' border='0'>
<tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='25' onClick='FillInAmount("25");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;25.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='50' onClick='FillInAmount("50");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;50.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='75' onClick='FillInAmount("75");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;75.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='100' onClick='FillInAmount("100");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;100.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='250' onClick='FillInAmount("250");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;250.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='500' onClick='FillInAmount("500");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;500.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='1000' onClick='FillInAmount("1000");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;1,000.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='1500' onClick='FillInAmount("1500");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;1,500.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='2300' onClick='FillInAmount("2300");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;2,300.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='4600' onClick='FillInAmount("4600");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;4,600.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  checked   value='Other' id="other" name='CCAmount'></td>
	<td colspan='4' class='btext' valign='bottom'>Amount: <strong>$</strong>
		<input class='BoxShadow'   name='CCOtherAmount' type='text' onfocus="document.getElementById('other').checked=true"
										onblur='allow_numeric(this);' 
										size='5' maxlength='7' value=''><strong>.00</strong></span></NOBR></td>
</tr>
</table>
</form>

Open in new window

Author

Commented:
Thanks for the quick response.

I wanted it to be more on the fly, just like how it was using onkeyup for taking out anything other characters.

I tried to change it to onkeyup, but keeps jumping around after you have entered in numbers

You need to click off to the side in order for it to change to 2 decimal places.

Also, its treating it as a number... and rounding up if 56.567 = 56.57

Convert to string, split at . then substring the two characters?

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
>>I tried to change it to onkeyup, but keeps jumping around after you have entered in numbers
I found the onkeypress and onkeyup to be to problematic to work with. That's why I used the onblur.

Author

Commented:
Yeah I know.

ok, how about an alert... eg.

You type in 1.566, you continue, and go onto the next... no more onblur, it triggers java and changes the value.

Now. If the numeric value is changed... was 1.566 to 1.57, an alert pops up instructing you to double check the amount.

If the amount is the same, ie, you typed 1.56, and it was not changed, then does nothing.

That would solve the problem as it is a one page submission for cc processing.
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
>>you continue, and go onto the next
That would trigger an onblur. So, I am not clear on what you mean by "no more onblur". The onblur is what you need because when it triggers that means that the user either "clicked out" or "tabbed out" of the text field, at which point your script can the "clean/sanitize" the entered data. Look at the code below.
<script type='text/javascript' language='JavaScript'>
<!--
function allow_numeric(obj){
	var t = String(obj.value).replace(/[^\d\.]/ig,"");
	var old = (-1==t.indexOf("."))? (t+".00") : t;
	obj.value = parseFloat(t).toFixed(2);
 	if(obj.value!=old)
		alert("Please verify the amount entered.");
}
 
function FillInAmount(amount){										
	//alert('yes'+amount);
	document.Donation.CCOtherAmount.value= amount;
	//document.Donation.radio1[obj].checked = true;	
}
//-->
</script>
 <form name="Donation">
<table width='100%' cellpadding='5' cellspacing='0' border='0'>
<tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='25' onClick='FillInAmount("25");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;25.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='50' onClick='FillInAmount("50");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;50.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='75' onClick='FillInAmount("75");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;75.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='100' onClick='FillInAmount("100");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;100.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='250' onClick='FillInAmount("250");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;250.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='500' onClick='FillInAmount("500");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;500.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='1000' onClick='FillInAmount("1000");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;1,000.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='1500' onClick='FillInAmount("1500");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;1,500.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='2300' onClick='FillInAmount("2300");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;2,300.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='4600' onClick='FillInAmount("4600");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;4,600.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  checked   value='Other' id="other" name='CCAmount'></td>
	<td colspan='4' class='btext' valign='bottom'>Amount: <strong>$</strong>
		<input class='BoxShadow'   name='CCOtherAmount' type='text' onfocus="document.getElementById('other').checked=true"
										onblur='allow_numeric(this);' 
										size='5' maxlength='7' value=''><!-- <strong>.00</strong> --></span></NOBR></td>
</tr>
</table>
</form> 

Open in new window

Author

Commented:
Sorry, maybe I had the 'onblur' backwards.  I meant click/tab outside.

No, you got it.

Looks great.

I made a slight change, however the focus does not seem to work.

Is this correct?

alert("Please verify the amount entered.\n\nThis was changed from '"+old+"' to '"+obj.value+"'.");
window.document.Donation.CCOtherAmount.focus();

Open in new window

CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008
Commented:
You need obj.focus() AND it must be within the if along with the alert. See below.
<script type='text/javascript' language='JavaScript'>
<!--
function allow_numeric(obj){
	var t = String(obj.value).replace(/[^\d\.]/ig,"");
	var old = (-1==t.indexOf("."))? (t+".00") : t;
	obj.value = parseFloat(t).toFixed(2);
 	if(obj.value!=old)
	{
		alert("Please verify the amount entered.\n\nThis was changed from '"+old+"' to '"+obj.value+"'.");
		obj.focus();
	}
}
 
function FillInAmount(amount){										
	//alert('yes'+amount);
	document.Donation.CCOtherAmount.value= amount;
	//document.Donation.radio1[obj].checked = true;	
}
//-->
</script>
 <form name="Donation">
<table width='100%' cellpadding='5' cellspacing='0' border='0'>
<tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='25' onClick='FillInAmount("25");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;25.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='50' onClick='FillInAmount("50");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;50.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='75' onClick='FillInAmount("75");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;75.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='100' onClick='FillInAmount("100");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;100.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='250' onClick='FillInAmount("250");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;250.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='500' onClick='FillInAmount("500");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;500.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='1000' onClick='FillInAmount("1000");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;1,000.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='1500' onClick='FillInAmount("1500");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;1,500.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='2300' onClick='FillInAmount("2300");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;2,300.00&nbsp;&nbsp;&nbsp;</td>
</tr><tr>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  value='4600' onClick='FillInAmount("4600");' name='CCAmount'></td>
	<td width='33%' valign='top' class='btext'><nobr>$&nbsp;4,600.00&nbsp;&nbsp;&nbsp;</td>
	<td width='1%' align='right' valign='top'>
		<input  type='radio'  checked   value='Other' id="other" name='CCAmount'></td>
	<td colspan='4' class='btext' valign='bottom'>Amount: <strong>$</strong>
		<input class='BoxShadow'   name='CCOtherAmount' type='text' onfocus="document.getElementById('other').checked=true"
										onblur='allow_numeric(this);' 
										size='5' maxlength='7' value=''><!-- <strong>.00</strong> --></span></NOBR></td>
</tr>
</table>
</form>  

Open in new window

Author

Commented:
Implemented, works great!

Thanks!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.