Remove dollar sign from query on Submit

Question

I am working on a website where there is a donate box with a field and a contribute button.

<div id="donate-bar">
    <form name="donate" id="donate">
        <span class="donate-text">DONATE</span>
        <input type="text" class="amount" name="amount" id="amount" value="$10" size="5">
        <input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE">
    </form>
</div>

However, the query gets sent to the donation processor's website as https://website.com/donate?amount=%2410 and doesn't tick the $10 box. If I remove the $ and submit the query again the value is sent and the correct amount is seen on the second page.

Is there an easy way using PHP or Javascript to have it remove the $ when the form is submitted so that https://website.com/donate?amount=%2410 changes to https://website.com/donate?amount=10.

I've tried a couple of things but nothing I've tried has worked. Some examples of code would be super helpful since I'm newer to some of this. Can I parse it as integer on submit? Any help would be greatly appreciated. Thank you!

[.replace()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) — naththedeveloper, Jun 30 '14 at 16:27
if you don't have to worry about legacy use html5. check this post http://stackoverflow.com/questions/5963158/html5-form-input-pattern-currency-format — Deceiver, Jun 30 '14 at 16:36

score 2 · Answer 1 · answered Jun 30 '14 at 16:27

Why not put the Dollar sign outside of the input and store the value as "10":

<div id="donate-bar">
  <form name="donate" id="donate">
    <span class="donate-text">DONATE</span>
     $<input type="text" class="amount" name="amount" id="amount" value="10" size="5">
 <input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE"></form></div>

score 1 · Answer 2 · answered Jun 30 '14 at 16:27

1

$_POST['amount'] = str_replace("$", "", $_POST['amount']);

answered Jun 30 '14 at 16:27

score 1 · Accepted Answer · answered Jun 30 '14 at 16:27

1

$('form#donate').on('submit',function() {
  var $input = $('input#amount');
  $input.val(parseInt($input.val().replace(/\$/,''),10));
});

answered Jun 30 '14 at 16:27

musicnothing

3,977
24
43

Please don't use `parseInt` without the `radix` parameter... That's a bad habit to teach others. – naththedeveloper Jun 30 '14 at 16:28
1

It should also be checked in PHP; Don't trust the client. – Popnoodles Jun 30 '14 at 16:34
1

Worked perfectly! Thanks! I know I should probably use a PHP fix to be more compatible but in cases where JS is disabled it would just go to a donate page where they'll have to input an amount a second time. Thanks a million! – nickwebdesign Jun 30 '14 at 16:34
@user3791008 it's a very small change in PHP – Popnoodles Jun 30 '14 at 16:36

DavidT · Answer 4 · 2014-06-30T16:39:10.150

1

There is a simple way to fix this.

First of all, one of my suggeestions is that you change the field to

type="number"

Second of all, in PHP, you can use the following to remove the dollar sign:

$amount = str_replace('$', '', $_REQUEST['amount']);

edited Jun 30 '14 at 16:39

answered Jun 30 '14 at 16:29

DavidT

461
6
17

score 0 · Answer 5 · answered Jun 30 '14 at 16:43

0

You can use split function in jquery as follows

var value = ($('#amount').val()).split('$'); var amount = value[1] ;

In PHP

$value = explode('$',$_POST['amount']); //results array elements without $ symbols $amount = $value[1];

Or also in PHP

$amount = preg_replace("/[^0-9]/","",$_POST['amount']);

//gets only integer parts and omits all other

Also in PHP

$amount = str_replace('$', '', $_POST['amount']);

answered Jun 30 '14 at 16:43

Marvil Joy

662
6
15

1

First example is going out of the,way a littlebit. Why create an array when the third example does what op wishes with less micro performance? – Daryl Gill Jun 30 '14 at 17:00

score 0 · Answer 6 · answered Jun 30 '14 at 19:53

Hope this helps the simplest way is a hidden field:

  <html>
  <head>
  <script src="http://code.jquery.com/jquery-latest.min.js"
          type="text/javascript"></script>
  <script>
    $(document).ready(function() {
      //number regex - the format $10
      var regex = /\$[1-9][0-9]+/;

      //Setting validations
      $(document).on('blur', '#pretty_amount', function() {
        if(!regex.test($(this).val())) {
           //Do something probably clear field
           alert("Error Invalid number: " + $(this).val());
        } else {
           var newValue = $(this).val().match(/[1-9][0-9]+/g);
           $('#amount').val(newValue);$('#amount').innerHtml(newValue);
        }
      });
    });
    </script>
  </head>
  <body>
  <div id="donate-bar">
    <form name="donate" id="donate">
      <span class="donate-text">DONATE</span>
      <input type="text" style="display: none;" name="amount" id="amount">
      <input type="text" class="amount" name="pretty_amount" id="pretty_amount" value="$10" size="6">
   <input type="submit" id="contribute" formaction="https://website.com/donate" accept-charset="utf-8" formmethod="GET" value="CONTRIBUTE"></form></div>
  </body>
  </html>

This does what you want, if I'm not mistaken.

Best regards

Remove dollar sign from query on Submit

6 Answers6