Issue configuring a dropdown selector on a donation form.

Hello,

For my client's site they require a donation form to popup in a modal window. The donation form will accept payments using Paypal.  The form needs to have two options.

The first option is to have a dropdown menu where the visitor can choose a pre-specified amount to donate. For example they can choose $20, $30, $40 etc...

The second is the ability to choose which day of the month to make monthly recurring donations.  

The visitor should then be able to link to paypal and have their monthly donation processed.

I have the areas setup, however when the Donation button is clicked, I get a message saying to "Please enter the amount you wish to donate and try again."

So it looks like the donate button is not recognizing the amount chosen in the dropdown menu's donation amount.


The test development site is http://eradicatepoverty.net/indexGallery.html.  Click the donate button on the menu and it will automatically scroll down to a section called How Can You Help.  Click the second option that says Donate for Kitchen.

It brings up a modal window with the information.

I have included a screenshot for reference.

ee.JPG

Any help would be greatly appreciated.

Thank you,
Tia
tiabradford1984Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
>> if (jQuery('#input_amount').val() > null)
I don't see anything with id="input_amount".  So give the select the id:
<select name="os0" id="input_amount">

Also, change the above to:
if ( jQuery('#input_amount').val() !== null )
tiabradford1984Author Commented:
I just updated the code, but unfortunately received the same message :

"Please enter the amount you wish to donate and try again."

Tia
hieloCommented:
Your <option> values have a dollar sign.  So change:
if (jQuery('#input_amount').val() < minimum_value)

to:
if ( parseFloat(jQuery('#input_amount').val().replace('$','')) < minimum_value)

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

tiabradford1984Author Commented:
Thank you for your reply.  I changed the code and received the same error message.

I have included a screenshot of the jquery script with the portion I have changed.

jquery file
Tia
hieloCommented:
If you open your page in Chrome; right-click anywhere > console, then reload your page, you will see errors.  This one in particular:
Uncaught ReferenceError: SyntaxHighlighter is not defined

is a runtime javascript error.  Comment out the SyntaxHighlighter block at the end, and report back if you still have problems.
tiabradford1984Author Commented:
Hello,

I commented out that script block.  It was for the slider at the bottom of the page, so the Gallery is now disabled, but I have the same error message.

Tia
hieloCommented:
Form 1: give the <form> and id as well as the <input> for the amount:
                    <form id="form_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                        <h5>Please Enter Amount to Donate</h5>
                        <hr>
                        <input name="cmd" value="_donations" type="hidden">
                        <input name="item_name" value="Donation" type="hidden">
                        <input name="business" value="sarah@eradicatepoverty.net" type="hidden">
                        <!-- CHANGE 'info@designbootstrap.com' TO YOUR EMAIL -->
                        <input name="currency_code" value="USD" type="hidden">
                        <!-- CHANGE 'USD' TO YOUR CURRENCY CODE IF YOU WANT -->
                        <input class="form-control" placeholder="Enter Amt. in USD" name="amount" id="input_amount" required="" type="text">
                        <hr>
                        <input class="btn btn-info" value="Donate Now" type="submit">
                          <br />
                          <span id="msg_moreamount" class="icon_warning red" style="display:none;"> PayPal takes $0.35 commission for a $1 donation. Please enter at least $1.35 , thank you!</span>
                		  <span id="msg_noamount" class="icon_warning red" style="display:none;"> Please enter the amount you wish to donate and try again.</span> 
						  <span id="msg_activity" style="display:none;"> <img src="img/loader.gif" alt="" align="absmiddle" /> Transferring to PayPal, please wait...</span>
                    </form>

Open in new window


Form 2:
<form id="form_paypal_rec" action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input name="cmd" type="hidden" value="_xclick-subscriptions" />
        
        <!--- Enter your PayPal Business Email Account here -->
        <input name="business" type="hidden" value="sarah@EradicatePoverty.net" />
        
        <!--- Enter your optional thank you page link here -->
        <input name="return" type="hidden" value="http://www.eradicatepoverty.net/thank-you.html" />
        
        <input name="item_name" type="hidden" value="Recurring Donation" />
        <input name="no_shipping" type="hidden" value="1" />
        <input name="no_note" type="hidden" value="1" />
        <input name="currency_code" type="hidden" value="USD" />
        <input name="p3" type="hidden" value="1" />
        <input name="src" type="hidden" value="1" />
        <input name="sra" type="hidden" value="1" />
        <p>&nbsp;          </p>
        <table width="100%" border="0">
          <tr>
            <td valign="middle"><label>Donation Amount</label></td>
            <td></td>
                <td>
                <select name="os0" id="input_amount_rec">
                    <option value="$20" selected>$20.00</option>
                    <option value="$30">$30.00</option>
                    <option value="$40">$40.00</option>
                    <option value="$50">$50.00</option>
                    <option value="$75">$75.00</option>
                    <option value="$100">$100.00</option>
                </select>
           </td>
            <td><span style="font-size: 16pt;">USD</span></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td><label>What day would be best for your monthly subscription to occur on:</label></td>
            <td>&nbsp;</td>
            <td><select name="t3" class="select">
              <option value="1"> 1</option>
              <option value="2"> 2</option>
        <option value="3"> 3</option>
        <option value="4"> 4</option>
        <option value="5"> 5</option>
        <option value="6"> 6</option>
        <option value="7"> 7</option>
        <option value="8"> 8</option>
        <option value="9"> 9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
            </select></td>
            <td>&nbsp;</td>
          </tr>
        </table>
        <br />
          <input class="submit" name="Submit" type="image" src="img/donate.jpg" />
          <br />
          <span id="msg_moreamount_rec" class="icon_warning red" style="display:none;"> PayPal takes $0.35 commission for a $1 donation. Please enter at least $1.35 , thank you!</span>
		  <span id="msg_noamount_rec" class="icon_warning red" style="display:none;"> Please enter the amount you wish to donate and try again.</span> <span id="msg_activity_rec" style="display:none;"> <img src="img/loader.gif" alt="" align="absmiddle" /> Transferring to PayPal, please wait...</span>
      </form>

Open in new window


Javascript: paypal_donate.js
<script type="text/javascript">
jQuery(document).ready(function()
{
	// the minimum required value to be entered.
	// in this case PayPal takes $0.35 from a $1
	// donation, hence we ask for at least $1.35
	var minimum_value = 1.35;
	
	// attach this script to the form's submit action
	jQuery('#form_paypal').on('submit',function()
	{
		// check if there is an amount entered
		if ( jQuery('#input_amount').val() !== null ) 
		{
			var amount = parseFloat(jQuery('#input_amount').val());
			
			// is the amount equal to or higher than the minimum_value?
			if ( isNaN(amount) || amount < minimum_value)
			{
				// need more amount
				// hide messages, show more amount error
				jQuery('#msg_noamount').hide();
				jQuery('#msg_moreamount').hide();
				if( isNaN(amount) )
					jQuery('#msg_noamount').fadeIn();
				else
					jQuery('#msg_moreamount').fadeIn();
					
				return false; // prevent the form from submitting
			}
			else
			{
				// amount is more than minimum_value
				// hide messages, show activity
				jQuery('#msg_moreamount').hide();
				jQuery('#msg_noamount').hide();
				jQuery('#msg_activity').fadeIn();
				return true; // submit the form
			}
		}
		else
		{
			// no amount entered at all
			// hide messages, show no amount error
			jQuery('#msg_moreamount').hide();
			jQuery('#msg_noamount').fadeIn();
			return false; // prevent the form from submitting
		}
	});
});
jQuery(document).ready(function()
{
	// the minimum required value to be entered.
	// in this case PayPal takes $0.35 from a $1
	// donation, hence we ask for at least $1.35
	var minimum_value = 1.35;
 
	// attach this script to the form's submit action
	jQuery('#form_paypal_rec').on('submit',function()
	{
		// check if there is an amount entered
		if (jQuery('#input_amount_rec').val() != null)
		{
			var amount = parseFloat(jQuery('#input_amount_rec').val().replace('$',''));
			// is the amount equal to or higher than the minimum_value?
			if ( isNaN(amount) || amount < minimum_value)
			{
				// need more amount
				// hide messages, show more amount error
				jQuery('#msg_noamount_rec').hide();
				jQuery('#msg_moreamount_rec').hide();

				if( isNaN(amount) )
					jQuery('#msg_noamount_rec').fadeIn();
				else
					jQuery('#msg_moreamount_rec').fadeIn();
				return false; // prevent the form from submitting
			}
			else
			{
				// amount is more than minimum_value
				// hide messages, show activity
				jQuery('#msg_moreamount_rec').hide();
				jQuery('#msg_noamount_rec').hide();
				jQuery('#msg_activity_rec').fadeIn();
				return true; // submit the form
			}
		}
		else
		{
			// no amount entered at all
			// hide messages, show no amount error
			jQuery('#msg_moreamount_rec').hide();
			jQuery('#msg_noamount_rec').fadeIn();
			return false; // prevent the form from submitting
		}
	});
});
</script>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RobOwner (Aidellio)Commented:
Your form for the kitchen donate has the id "form_paypal_rec" however your select has the id "input_amount" and your javascript is attempting to get the value from "input_amount_rec" which doesn't exist on the page.  

Change your input to have the id "input_amount_rec".  

You also need to remove the $ from the options value (you can keep them in the description) in the dropdown as said by hielo.  The value attribute in your case needs to be a number.  Makes no sense to have the dollar sign in there.
tiabradford1984Author Commented:
Thank you for your responses.  It looks like I am almost there.  The button now brings me to paypal site, only the term and amountare not showing on the paypal page.  I have a screenshot.

paypal

Tia
hieloCommented:
On your second form you are using:
<select name="os0" id="input_amount">...</select>
<select name="t3" class="select">...</select>

Perhaps you meant:
<select name="amount" id="input_amount">...</select>
<select name="term" class="select">...</select>
tiabradford1984Author Commented:
I made this change to the form

<select name="os0" id="input_amount">...</select>
<select name="t3" class="select">...</select>

Perhaps you meant:
<select name="amount" id="input_amount">...</select>
<select name="term" class="select">...</select>

The fields still show blank in paypal though.

Tia
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.