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.
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>$ 25.00 </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>$ 50.00 </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>$ 75.00 </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>$ 100.00 </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>$ 250.00 </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>$ 500.00 </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>$ 1,000.00 </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>$ 1,500.00 </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>$ 2,300.00 </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>$ 4,600.00 </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>
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>$ 25.00 </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>$ 50.00 </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>$ 75.00 </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>$ 100.00 </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>$ 250.00 </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>$ 500.00 </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>$ 1,000.00 </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>$ 1,500.00 </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>$ 2,300.00 </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>$ 4,600.00 </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>ASKER
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?
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?
>>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.
I found the onkeypress and onkeyup to be to problematic to work with. That's why I used the onblur.
ASKER
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.
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.
>>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.
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>$ 25.00 </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>$ 50.00 </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>$ 75.00 </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>$ 100.00 </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>$ 250.00 </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>$ 500.00 </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>$ 1,000.00 </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>$ 1,500.00 </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>$ 2,300.00 </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>$ 4,600.00 </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> ASKER
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?
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();
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Implemented, works great!
Thanks!
Thanks!
Open in new window