show/hide div if input is 0 or default

Question

I´m working in a payment gateway where the user Name the Price for my digital books. An input box (to text the price) and a "Pay now" button are displayed. BUT:

1. If the price is less than 0.50 the payment button disapear and the download button appear
2. If the user introduce a "," instead a "." a box is displayed (please, enter a valid number)

Here is the form with the input box:

    <form id="hikashop_paypal_form" name="hikashop_paypal_form" action="https://www.paypal.com/cgi-bin/webscr" method="post">

    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="business" value="X" />   
    <input type="hidden" name="item_name_1" value="X" />
    <input id="amount_1" name="amount_1" class="amount_1"/></form>

Pay Now button (it should be hiden if 1 is true)

   <div id="PayNow" class="PayNow">
    <input id="PayNow_button" type="submit" class="btn btn-primary" value="Pay now" name="" />
    </div>

Download Now Button (it should be shown if 1 is true)

   <div id="downloadNow" class="downloadNow">
    <a href="www.download.com"/download">Download now</a>
    </div>

Info box (It should be shown if 2 is true)

   <div id="info" class="info">
    Enter a valid number
    </div>

And the question is: How can I do it? I supose the solution passes by using javascript, but I don´t know how exactly... Thanks for you time...

Answer 1

I don´t know how, but it works for me:

Try it here: IBIZA! Book Download

    <form id="pplaunch" action="https://www.paypal.com/cgi-bin/webscr" method="POST">
            <input type="hidden" name="cmd" value="_xclick">
    <input id="issueid" name="issueid" type="hidden" value="ARCHIVE NAME">
    <input type="hidden" id="currency" name="currency" value="EUR">
    <input type="hidden" name="business" value="YOUR PAYPAL ID" />  
    <input type="hidden" value="0" name="test_ipn"></input>
     <input type="hidden" name="item_name" value="PRODUC NAME">
    <input type="hidden" value="1" name="no_shipping"></input>
    <input type="hidden" value="0" name="no_note"></input>
    <input type="hidden" value="utf-8" name="charset"></input>
    <input type="hidden" value="Super" name="first_name"></input>
    <input type="hidden" value="http://www.YOURWEBSITE.com/return" name="return"></input>
     <input type="hidden" value="http://www.OURWEBSITE.com/cancel" name="cancel_return"></input>
    <div class="nameprice" style="float:left;margin-right:15px;>
        <span style="font-size:small;">Name your price: </span><input id="amount" name="amount" size="6" maxlength="5" type="text"> <span style="font-size:small;color:#ccc;">From 0.00€</span>
    </div>
    <div id="pricerror"></div>
    <div class="buttonspace">
        <button id="buybutton" class="buybutton" type="button">Checkout</button>
                    <div id="descargaGratisMensaje"></div>
        <div style="display: block;" class="pay">
        </div>

    </div>
</form>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>



  <script type="text/javascript">

  function newPopup(url, width, height){
popupWindow = window.open(url,'_blank','height='+height+',width='+width+',left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');
return false;

  }

  function displaybutton(displayclass){

  if(displayclass == 'pay'){
    $('.pay').css('display','block');
    $('#pplaunch').attr('action', 'https://www.paypal.com/cgi-binwebscr');
    $('#buybutton').html('Pagar');

  }else{
    $('.pay').css('display','none');
    $('#pplaunch').attr('action', 'http://www.example.com/archive/'+$('#issueid').val());
    $('#buybutton').html('Descargar');
            $('#descargaGratisMensaje').html('Un Me Gusta podría ser un buen intercambio');
}

  }

  function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n) && (n.search(/0x/i)<0);


        }

  function price(n){

  // return null if n is not a price, or n rounded to 2 dec. places
if(!isNumber(n)){
    // maybe the user entered a comma as a decimal separator
    n = n.replace(/,/g,'.');  
    if(!isNumber(n)){
        return null;
    }

  }
// now we know it is a number, round it up to 2 dec. places

  return Math.round(parseFloat(n)*100)/100;

  }

  function pricecheck(){

  var data = $.trim($('#amount').val());

  var myprice = price(data);

  if(myprice == null){
    if(data == ''){
        $('#pricerror').html('');
    }else{
        $('#pricerror').html('Please enter a price.');
    }
    displaybutton('pay');
    return false;

  }

  if(myprice == 0){
    $('#pricerror').html('');
    displaybutton('nopay');

  }else if(myprice < 0.5){
    $('#pricerror').html('The minimum price is '+currencysymbol+'0.50. 
  Please enter either zero, or at least '+currencysymbol+'0.50.');
    displaybutton('pay');

  }else{
    $('#pricerror').html('');
    displaybutton('pay');

  }

  jQuery('.content').hide();

  }

  var currencysymbol = '$';

  $.getScript('//www.geoplugin.ne/javascript.gp?ref=panelsyndicate.com', function() {

  if(geoplugin_continentCode() != 'EU'){return;}

  $('#currency').val('EUR');

  currencysymbol = '€';

  $('.currencysymbol').html(currencysymbol);

  });

  $(document).ready(function(){

  var dialog = $('#modal').dialog({
    title: 'IBIZA!'
    , autoOpen: false
    , closeText: ''
    , modal: true
    , resizable: false
    , width: 500

  });

  $('#buybutton').click(function() {
    $('#pplaunch').submit();

  });

  $('#pplaunch').submit(function() {
    var myprice = price($.trim($('#amount').val()));
    if((myprice != 0) && ((myprice == null) || (myprice < 0.5))){
        $('#pricerror').html('Please enter your price.');
        $('#amount').focus();
        return false;
    }

  });

  $('.modaltrigger').click(function() {
    var issueid = $(this).attr('href').substr(1);
    $('#issueid').val(issueid); // Comic ID

  $('#include_a_message_to').html(issues[issueid].include_a_message_to); // Destinee of the message
    dialog.dialog('option', 'title', issues[issueid].title); // Title of the comic
    $('#issuelangs').html(issues[issueid].langs); // Languages in which the comic is available
    dialog.dialog('option', 'position', { my: "center", at: "center", of: window });
    dialog.dialog('open');
    // prevent the default action, e.g., following a link
    pricecheck();
    return false;

  });

  $('#amount').bind('input propertychange', function() {
    pricecheck();

  });

  $('.custommsg').hide();

  $('.msgtrigger').click(function() {
    var cmsg = $('.custommsg');
    if(cmsg.is(':visible')){
        cmsg.hide();
        $('.sendmsg').show();
    }else{
        $('.sendmsg').hide();
        cmsg.show();
        $('.msgtxt').focus();
    }
    return false;

  });

  $('.msgtxt').keyup(function(){
    if($(this).val().length > maxlength){
        $(this).val($(this).val().substr(0, maxlength));
    }
    var remaining =  maxlength - $(this).val().length;
    $('#msgtxtnumcharsleft').text(remaining);

  });   

  var maxlength = 200;

  var remaining =  maxlength - $('.msgtxt').val().length;

  $('#msgtxtnumcharsleft').text(remaining);

  });

  </script>