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

amakaramAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
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

0
hieloCommented:
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

0
amakaramAuthor 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?

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

hieloCommented:
>>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.
0
amakaramAuthor 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.
0
hieloCommented:
>>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

0
amakaramAuthor 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

0
hieloCommented:
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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
amakaramAuthor Commented:
Implemented, works great!

Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.