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?
 
hieloConnect With a Mentor 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

0
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
 
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
 
amakaramAuthor Commented:
Implemented, works great!

Thanks!
0
All Courses

From novice to tech pro — start learning today.