Radio button form w. one custom text box choice?

[russ_offord]

I would like to create a form to receive paypal donations. The form would have radio buttons to choose from a few predetermined donation values, as well as one radio button to allow people to enter a custom dollar amount for their donation.

Example:

(*) $25.00
( ) $50.00
( ) $100.00
( ) [_________] <--- this would be a custom text box to enter a dollar amount

Any ideas how I can pull that off with standard HTML and/or with the help of JS?

Thanks, Russ.

[Deadeye]

<script>
  if(document.formName.radiobutton1 == selected)
  {
    var OpenAmmount = document.formName.textBoxAmmount;
  }
</script>

The selected part of the code is most likly wrong, I forgot the name off hand, so a little googleing for that will work, or someone else can correct it for me

Wesley

*EDIT*
You will have to make your submit button call this fuction to check for this and submit your form.

[curtiss]

If I were you, I would simply use the following code for your form:

<form name="donations" action="mailto:me@mydomain.com" method="post"> 
<label><input type="radio" name="donation" value="25" onchange="radio_checker();" /> $25.00</label>
<br />
<label><input type="radio" name="donation" value="50" onchange="radio_checker();" /> $50.00</label>
<br />
<label><input type="radio" name="donation" value="100" onchange="radio_checker();" /> $100.00</label>
<br />
<input type="radio" name="donation" value="custom" id="custom_amount" onchange="radio_checker();" /> <input type="text" name="custom_donation" disabled="true" />
<br />
<input type="submit" value="Send Me Money" />
</form>

and place the following javascript in the head of your document:

<script type="text/javascript" language="javascript">
function radio_checker() {
		if (document.donations.custom_amount.checked) {
			document.donations.custom_donation.disabled = false;
			document.donations.custom_donation.focus();
		}
		else {
			document.donations.custom_donation.disabled = true;
		}
}
</script>

[Deadeye]

yeah, I would use curtiss recomendation.

[temaurer]

curtiss,

This code works really great for just one form. I have a survey that I am creating which includes up to 6 forms (questions) per page. How can I expand your code here to include this option on all 6 forms within the one page?

[curtiss]

Try this:

<script type="text/javascript" language="javascript">
function radio_checker(var what, var where) {
		if (document.getElementById(what).checked) {
			document.getElementById(where).disabled = false;
			document.getElementById(where).focus();
		}
		else {
			document.getElementById(where).disabled = true;
		}
}
</script>

For the function above, the variable "what" would be the ID of the "other" radio button, and the variable "where" would be filled with the ID of the "other" text box. Your form code would look something like:

<form name="donations" action="mailto:me@mydomain.com" method="post"> 
<label><input type="radio" name="donation" value="25" onchange="radio_checker('custom_amount','custom_donation');" /> $25.00</label>
<br />
<label><input type="radio" name="donation" value="50" onchange="radio_checker('custom_amount','custom_donation');" /> $50.00</label>
<br />
<label><input type="radio" name="donation" value="100" onchange="radio_checker('custom_amount','custom_donation');" /> $100.00</label>
<br />
<input type="radio" name="donation" value="custom" id="custom_amount" onchange="radio_checker('custom_amount','custom_donation');" /> <input type="text" name="custom_donation" id="custom_donation" disabled="true" />
<br />
<input type="submit" value="Send Me Money" />
</form>

[temaurer]

have tried this, but obviously I am doing something wrong. I have added a bit of php in there, would this affect it? This is what I have:

function radio_checker(var 'custom_amount', var 'custom_other') {
		if (document.getElementById('custom_amount').checked) {
		    document.getElementById('custom_other').disabled = false;
		    document.getElementById('custom_other').focus();
		}
		else {
		     document.getElementById('custom_other').disabled = true;
		}
}

I have changed your 'custom_donation' to 'custom_other'

<input type="radio" name="q2" onchange="radio_checker('custom_amount','custom_other');" value="<?php
	if (isset($_POST['mum'])) 
	echo $_POST['mum']; ?>" /><b>Whatever mum uses</b></br>	
	 <input type="radio" name="q2" onchange="radio_checker('custom_amount','custom_other');" value="<?php
	if (isset($_POST['omo'])) 
	echo $_POST['omo']; ?>" /><b>Omo</b></br>	
	 <input type="radio" name="q2" id="custom_amount" onchange="radio_checker('custom_amount','custom_other');" value="<?php
	if (isset($_POST['other']))
	echo $_POST['other']; ?>"/><b>Other</b> 
	<input type="text" name="custom_other" id="custom_other" size="40" maxlength="40" disabled="true" value="<?php
	if (isset($_POST['other'])) 
	echo $_POST['other']; ?>" />

[curtiss]

Two things:

One: In the javascript function itself, the variables should have stayed the way I typed them. I just meant that when you call the function (inside your onchange events), you should put the appropriate IDs where they belong.

Two: I made a mistake in putting "var" before the var names. That seems to throw a javascript error when used inside of the function name. Normally, in javascript, when declaring a variable for the first time, you are supposed to precede it with a declaration type like "var", but apparently you are not supposed to do that when declaring the function input variables.

Therefore, your code should look like:

function radio_checker(what,where) {
		if (document.getElementById(what).checked) {
		    document.getElementById(where).disabled = false;
		    document.getElementById(where).focus();
		}
		else {
		     document.getElementById(where).disabled = true;
		}
}

Then, like I said, when you call the function, you should put the actual ID names inside of the parens, like:

onchange="radio_checker('custom_amount','custom_other')"

or:

onchange="radio_checker('radio_other','text_other')"

or whatever those IDs are.

[temaurer]

I have adjusted as suggested and I can now get the first form to function correctly. The button works and the text box works. But not the other 5 forms on the page. The buttons work, but I can't type in the text boxes.

[davy1dave]

OK, forgive me, but i'm a newbie. I have implemented this script successfully however I'm running into another problem. The cc processing system requires that the amount field be less than 13 char. I didn't run into this problem when they were all radio buttons, but now that I've added in the custom field it says the amount field is now 15 char. I have added the size and length in the line but i still get this error. What am I doing wrong?

<input name="ssl_amount" type="radio" class="radio" id="custom_amount" onchange="radio_checker();" size="7" maxlength="7"value="custom_donation" />
<label for= "custom_amount" class="fl-left">Other</label>
<input name="custom_donation" type="text" disabled="true" class="custom-donation" size="7" maxlength="7" />

Thanks!

[curtiss]

Greetings, David!
I believe the script is having a problem with the value "custom_donation", which is 15 characters long.

For your purposes, I think you should use a hidden form field to hold the actual value of the donation. Then, you can use javascript to transfer the appropriate value into that hidden form field upon submission.

That hidden form field should have the name "ssl_amount", and you should use a different name for your radio buttons (for the purposes of the script below, I would recommend giving all of the donation radio buttons the name of "radio_ssl_amount"). Then, your script might look something like:

<script type="text/javascript" language="javascript">
function checkamount() {
for(var i=0;i<document.form.radio_ssl_amount.length;i++) {
if(document.form.radio_ssl_amount[i].checked && document.form.radio_ssl_amount.value != 'custom_donation') {
document.getElementById('ssl_amount').value = document.form.radio_ssl_amount[i].value;
}
else {
document.getElementById('ssl_amount').value = document.getElementById('custom_donation').value;
}
}
}
</script>
<input name="radio_ssl_amount" type="radio" class="radio" id="custom_amount" onchange="radio_checker();" size="7" maxlength="7" value="custom_donation" />
<label for= "custom_donation" class="fl-left">Other</label>
<input name="custom_donation" id="custom_donation" type="text" disabled="true" class="custom-donation" size="7" maxlength="7" />
<input type="hidden" name="ssl_amount" id="ssl_amount" value="" />
<input type="submit" onclick="return checkamount()" name="submit" />

I haven't tested that code, but I think it should work. However, in the example above, I assumed that the name of your form is "form". If it's not, then you will need to change each instance of the word "form" in the javascript function to whatever the name of your form is. Good luck.

[davy1dave]

Ok, I found out the error. I have to pend “.00” to the field or it kicks it out….

What would I need to then add to the script to add that to the ssl_amount ? Thanks!

for example, the person will enter "1", but I need ssl_amount to send "1.00" on submit.

Thanks!

[curtiss]

Greetings, David!
To ensure that the value is formatted properly, you should use the toFixed function in your javascript code.

However, in doing so, I would also recommend checking to make sure that your value is a number before trying to format it. I believe (though I've not used this function before, as I do most of my validation in PHP rather than javascript), you can use the isNaN() function to check if a value is not a number (which means that, if the value is numeric, the function should return false).

I think your code would look something like:

<script type="text/javascript" language="javascript">
function checkamount() {
for(var i=0;i<document.form.radio_ssl_amount.length;i++) {
if(document.form.radio_ssl_amount[i].checked && document.form.radio_ssl_amount.value != 'custom_donation') {
document.getElementById('ssl_amount').value = document.form.radio_ssl_amount[i].value;
}
else {
document.getElementById('ssl_amount').value = document.getElementById('custom_donation').value;
}
if(!isNaN(document.getElementById('ssl_amount').value)) {
document.getElementById('ssl_amount').value = document.getElementById('ssl_amount').value.toFixed(2);
}
}
}
</script>

I hope that helps. Good luck.