/    Sign up×
Community /Pin to ProfileBookmark

Help please: donation form with radio buttons or user entry, pass total to other page

Copy linkTweet thisAlerts:
Apr 29.2011

Hi,

I’m looking for help, please. I am trying to setup a donation form for a friend, where someone can click radio buttons for set donation amounts, or click the “other” radio buttons and enter a different amount. The donation amount is then passed over to a secure credit card entry page, hosted by a 3rd party merchant.

I can set up all the pre-defined radio buttons to correctly pass on the donation amount to the credit card page, but I cannot figure out how to work the “other” radio button amount.

Any help would be very much appreciated!

Thanks!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERApr 30.2011 — Something along these lines? ... ?
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;RBtn - Div Show/Hide&lt;/title&gt;
&lt;style type="text/css"&gt;
#Sect1 { display:none; background-color:yellow; border:1px solid cyan; width:30%; }
#Sect2 { display:none; background-color:orange; border:3px dotted blue; width:30%; }
#Sect3 { display:none; background-color:lightgreen; border:3px dotted blue; width:30%; }
#Sect4 { display:none; background-color:lightblue; border:3px dotted blue; width:30%; }
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
// From: http://www.webdeveloper.com/forum/showthread.php?t=235831
// Modified for: http://www.webdeveloper.com/forum/showthread.php?t=245727

function RBtnSet(IDS,flag) { // alert(IDS+' is '+flag);
var CState = document.getElementById(IDS);
if (flag) { CState.style.display = "block"; }
else { CState.style.display = "none"; }
}
function RBtnDisplay(IDS) {
var sel = document.getElementById('choices').getElementsByTagName('div');
for (var i=0; i&lt;sel.length; i++) { RBtnSet(sel[i].id,false);}
RBtnSet(IDS,true)
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;label&gt;&lt;input type="radio" name="RBtnControl" onclick="RBtnDisplay('Sect1')"&gt;Donation 1&lt;/label&gt;
&lt;label&gt;&lt;input type="radio" name="RBtnControl" onclick="RBtnDisplay('Sect2')"&gt;Donation 2&lt;/label&gt;
&lt;label&gt;&lt;input type="radio" name="RBtnControl" onclick="RBtnDisplay('Sect3')"&gt;Donation 3&lt;/label&gt;
&lt;label&gt;&lt;input type="radio" name="RBtnControl" onclick="RBtnDisplay('Sect4')"&gt;Other Donation&lt;/label&gt;
&lt;p&gt;
&lt;div id="choices"&gt;
&lt;div id="Sect1"&gt; Donation #1 Amount &lt;/div&gt;
&lt;div id="Sect2"&gt; Donation #2 Amount &lt;/div&gt;
&lt;div id="Sect3"&gt; Donation #3 Amount &lt;/div&gt;
&lt;div id="Sect4"&gt; Other Donation Amount &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@knujonauthorMay 04.2011 — Thanks very much for the reply.

With the generous help of some kind strangers this is what I ended up using:

<script type = "text/javascript">

function doAmount(rb) {

var rbval = rb.value * 1; // make number

document.getElementById("OTHER").style.display = "none";

document.donationForm.TransactionAmount.value = rbval;

document.donationForm.other_amount.value = "";

if (rbval > 249) {document.getElementById("ack").innerHTML = "Thank you for your very generous donation of $" + rbval.toFixed(2) +"!";

}

else {

document.getElementById("ack").innerHTML = "Thank you for your donation of $" + rbval.toFixed(2) +"!";

}

}

function doOther(rb) {

document.getElementById("OTHER").style.display = "inline";

document.donationForm.TransactionAmount.value = 0;

document.donationForm.other_amount.value = "";

document.getElementById("ack").innerHTML = "";

}

function otherDonate(fld) {

var amt = fld.value;

amt = amt.replace(/^[^0-9]*/,""); // strip leading $ or - sign

amt = parseInt(amt); // integer values only or

//amt= Math.round (amt*Math.pow(10,2))/Math.pow(10,2); // 2 decimal places

if (isNaN(amt) || amt < 10) {

alert("Please specify a donation amount of $10 or more");

fld.value = "";

return false;

}

fld.value = amt;

document.donationForm.TransactionAmount.value = amt;

if (amt > 249) {document.getElementById("ack").innerHTML = "Thank you for your very generous donation of $" + amt.toFixed(2) +"!";

}

else {

document.getElementById("ack").innerHTML = "Thank you for your donation of $" + amt.toFixed(2) +"!";

}

}

</script>

and

<form name="donationForm" method="post">

<input name="rbamount" type="radio" value="25" onClick="doAmount(this);"/>$25<br>

<input name="rbamount" type="radio" value="50" onClick="doAmount(this);"/>$50<br>

<input name="rbamount" type="radio" value="100" onClick="doAmount(this);"/>$100<br>

<input name="rbamount" type="radio" value="250" onClick="doAmount(this);"/>$250<br>

<input name="rbamount" type="radio" value="500" onClick="doAmount(this);"/>$500<br>

<input name="rbamount" type="radio" value="1000" onClick="doAmount(this);"/>$1,000<br>

<input name="rbamount" type="radio" value="other" onClick="doOther(this);"/>Other Amount (minimum donation $10)<br>

<div id="OTHER" style="display: none;">

<input type="text" name="other_amount" maxlength="5" style="width:50px;" onChange="otherDonate(this);" />

Other (minimum donation $10)

</div></p>

<input type="hidden" name="TransactionAmount" value="" />

<input type="submit" value="Continue to Secure Payment" />

</form>

Thanks again for your help.
×

Success!

Help @knujon spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...