Adding 2 other_amounts to a donation form outside of Convio

Matthew Andrade

Hello guys,

I was hoping to get some help on this... I had posted some time ago about intergrating a shopping cart type of experience with the donation form API. Everything is working just fine BUT one thing. Here is the page so you can see what I am talking about:

https://www.passovermeal.org/

The site is still not being linked to but we are close to going live with this appeal.

The problem that I am having is in order for this process to function I need 2 other_amount fields within my page. So on my ghost form i have to donation level id's that are associated with text input fields.

One of the fields is hidden via CSS which is fine and works well if the donation is coming from the cart.

Now if the user were to click on other amount radio button or start typing in the other amount field and enters an amount then proceeds to submit the donation the form defaults to the minimum of $5.00 no matter what the amount is entered.

<div id="hiddenOtherAmountArea"> <input type="radio" value="9705" id="level_other" name="level_id" style="display:inline; margin-top:5px;" checked="checked" class="level_other" /> <!-- TODO: update value --> <input type="text" id="other_amount" size="10" name="other_amount" value="" class="checked other_amount" /> </div> <div id="otherAmountArea"> <input type="radio" value="9721" id="level_other2" name="level_id" style="display:inline; margin-top:5px;" class="level_other" />Or enter another amount <!-- TODO: update value --> <input type="text" id="other_amount" size="15" name="other_amount" value="" class="otherChecked other_amount level_other" onfocus="var el = document.getElementById ('level_other2');if (el) el.checked='checked';" /> </div>

So guys if you could see anything that I might be missing please let me know.

Matthew Andrade

Do you guys think its because I don't have a <fieldset> tage around the 2 radio and input fields?

Steve Mook

I'm not a web forms expert, but it seems you're passing two other_amount parameters and the API is only able to parse one of them. Perhaps you could supress or rename one of them with JavaScript DOM API based on which radio button is clicked?

Matthew Andrade

Steve Mook:

I'm not a web forms expert, but it seems you're passing two other_amount parameters and the API is only able to parse one of them. Perhaps you could supress or rename one of them with JavaScript DOM API based on which radio button is clicked?

The funny thing is that is was working a few days ago... I don't know what I did to change that process.

Steve you had mentioned DOM API.. I'm sorry but can you maybe show me a little of I can do that.

This is the only thing holding me back from getting the thumbs up and going live.

Thanks!

Steve Mook

Matthew Andrade:

The funny thing is that is was working a few days ago... I don't know what I did to change that process.

Steve you had mentioned DOM API.. I'm sorry but can you maybe show me a little of I can do that.

This is the only thing holding me back from getting the thumbs up and going live.

Thanks!

I haven't been able to verify this suggestion so it may be worth what you paid for it considering the source, but my though was to use JS DOM to make sure only one input on the form was named "other_amount", for example:

<script type="text/javascript">
function Toggle(radioid, amountid) {
  document.getElementById("input1").name = "";
  document.getElementById("input2").name = "";
  document.getElementById(radioid).click();
  document.getElementById(amountid).name = "other_amount";
}
</script>

...





<form method="POST" >
<div id="hiddenOtherAmountArea">
   <input type="radio" checked id="radio1" value="9705" name="level_id" style="display:inline; margin-top:5px;" class="level_other" onclick="Toggle('radio1', 'input1');" />
   <input type="text" id="input1" size="10" name="other_amount" value="" class="checked other_amount" onfocus="Toggle('radio1', 'input1');" />
</div>
<div id="otherAmountArea">
   <input type="radio" id="radio2" value="9721" name="level_id" style="display:inline; margin-top:5px;" class="level_other" onclick="Toggle('radio2', 'input2');" />
   <input type="text" id="input2" size="15" name="" value="" class="otherChecked other_amount level_other" onfocus="Toggle('radio2', 'input2');" />
</div>
<input type="submit" />
</form>

Steve Mook

Steve Mook:

I haven't been able to verify this suggestion so it may be worth what you paid for it considering the source, but my though was to use JS DOM to make sure only one input on the form was named "other_amount", for example:

<script type="text/javascript">
function Toggle(radioid, amountid) {
  document.getElementById("input1").name = "";
  document.getElementById("input2").name = "";
  document.getElementById(radioid).click();
  document.getElementById(amountid).name = "other_amount";
}
</script>

...





<form method="POST" >
<div id="hiddenOtherAmountArea">
   <input type="radio" checked id="radio1" value="9705" name="level_id" style="display:inline; margin-top:5px;" class="level_other" onclick="Toggle('radio1', 'input1');" />
   <input type="text" id="input1" size="10" name="other_amount" value="" class="checked other_amount" onfocus="Toggle('radio1', 'input1');" />
</div>
<div id="otherAmountArea">
   <input type="radio" id="radio2" value="9721" name="level_id" style="display:inline; margin-top:5px;" class="level_other" onclick="Toggle('radio2', 'input2');" />
   <input type="text" id="input2" size="15" name="" value="" class="otherChecked other_amount level_other" onfocus="Toggle('radio2', 'input2');" />
</div>
<input type="submit" />
</form>

Note to self, JavaScript goes bad when you apply XML syntax hilighting. Try as Java:

function Toggle(radioid, amountid) {
  document.getElementById('input1').name = "";
  document.getElementById('input2').name = "";
  document.getElementById(radioid).click();
  document.getElementById(amountid).name = "other_amount";
}

Matthew Andrade

Steve Mook:

Note to self, JavaScript goes bad when you apply XML syntax hilighting. Try as Java:

function Toggle(radioid, amountid) {
  document.getElementById('input1').name = "";
  document.getElementById('input2').name = "";
  document.getElementById(radioid).click();
  document.getElementById(amountid).name = "other_amount";
}

Steve I will try this and let you know how this goes... I like the idea thanks!

Matthew Andrade

Steve Mook:

Note to self, JavaScript goes bad when you apply XML syntax hilighting. Try as Java:

function Toggle(radioid, amountid) {
  document.getElementById('input1').name = "";
  document.getElementById('input2').name = "";
  document.getElementById(radioid).click();
  document.getElementById(amountid).name = "other_amount";
}

Steve,

Thanks...

I do have one question if I wanted to make a div on my page the trigger to set the name attr for input 1 how could I do that?

Reason I ask is i'm going to be hiding input1 and radio1 via css. So the person would not be able to click within the input field to fire off the trigger to reset input1 with the name other_amount.

Here is the page that we are working on:

https://www.passovermeal.org/

Matt