Donation: Custom price selection and Drop down menu

GusGus Member
in Help edited April 2012
Hey,

I'm setting up a site that takes donations. What I want to do is offer potential donors the ability to choose a value, such as 10 or 25, but if they don't like the available values, can enter their own donation value. How should I go about this?

Thanks!
Tagged:
Comments
  • GusGus Member
    Here is the code I currently have. The option box is within a form. The javascript is at the end of the Body.

    <select name="x:price1" id="x:price1" size="1" value="" onchange="check()"/>
    <option id="A" value="0.00">Choose</option>
    <option id="B" value="5.00">5.00</option>
    <option id="C" value="10.00">10.00</option>
    <option id="D" value="20.00">20.00</option>
    <option id="E" value="35.00">35.00</option>
    <option id="F" value="50.00">50.00</option>
    <option id="G" value="100.00">100.00</option>
    <option id="H" value="200.00">200.00</option>
    <option id="I" value="500.00">500.00</option>
    <option id="J" value="1000.00">1000.00</option>
    <option id="x:other" name="x:other" value="x:other">Other</option>
    </select>
    <input type="text" id="x:price2" name="x:price2" disabled="disabled" size="13"/>
    <input type="hidden" id="price" name="price" value="price = x:price1 + x:price2">



    <script type="text/javascript">
    function check() {
    if (document.getElementById('x:price1').value == 'x:other')
    document.getElementById('x:price2').disabled = false;
    else
    document.getElementById('x:price2').disabled = true;
    }
    </script>
  • GusGus Member
    I'm also using Foxycart 7.2
  • brettbrett FoxyCart Team
    Hi @Gus.
    Try this:
    <select name="x:price1" id="price1" size="1" value="" onchange="check()">
    	<option value="">Choose</option>
    	<option value="5">5</option>
    	<option value="10">10</option>
    	<option value="20">20</option>
    	<option value="35">35</option>
    	<option value="50">50</option>
    	<option value="100">100</option>
    	<option value="200">200</option>
    	<option value="500">500</option>
    	<option value="1000">1000</option>
    	<option value="other">Other</option>
    </select>
    <input type="text" id="price" name="price" value="25" style="display:none" />
    
    
    
    <script type="text/javascript">
    	$(document).ready(function(){
    		$('#price').val( $('#price1').val() );
    		$('#price1').change(function(){
    			if ($(this).val() == "other") {
    				$('#price').show();
    			} else {
    				$('#price').hide();
    				$('#price').val( $('#price1').val() );
    			}
    		})
    	});
    </script>
    

    Let us know if that works.
Sign In or Register to comment.