Form won't submit with decimal value

Wappler General How To
#1

I have a form which has a field for currency which won’t submit with decimal values. The mysql database fields are decimal (8,2). There’s no error, the field just glows blue. If I remove the decimals it submits. Any pointers would be appreciated. I’ve tried recreating both the server action and the form to no avail.

Another anomaly, with that same field I have to convert it to number to format as currency on output. purchase_price.toNumber().formatCurrency(’$’, ‘.’, ‘,’, 2). If I don’t have the toNumber() it doesn’t output.

#2

Hi.
There is no issuse with submitting decimal values. Probably share your code, you might have misconfigured something on client side or server side.

#3

What value are you entering in the form input and what value are you actually sending to the server side?

#4

If it’s a validation issue, I might have come across a similar problem. I wanted to allow numbers with or without a decimal part, and not allow any commas.

Using a regular expression seemed to be a solution.
data-rule-pattern="^(?:\d*\.)?\d+$"
I also made the input type text rather than number.

#5

Form input values are always strings, that is why you have to convert it to number first.

#6 
<form is="dmx-serverconnect-form" id="form1" method="post" action="dmxConnect/api/add_trade.php" >

    <div class="row">

      <label for="inp_stock" class="col-sm-5 col-form-label">Stock:</label>

      <div class="col-sm-7">

        <input type="text" class="form-control form-control-sm" id="inp_stock" name="stock" aria-describedby="inp_stock_help" placeholder="Enter Stock:" dmx-style:text-transform="'uppercase'">

      </div>

    </div>

    <div class="row">

      <label for="inp_trade_date" class="col-sm-5 col-form-label">Trade date:</label>

      <div class="col-sm-7">

        <input type="date" tabindex="-1" class="form-control form-control-sm" id="inp_trade_date" name="trade_date" aria-describedby="inp_trade_date_help" placeholder="Enter Trade date:" dmx-bind:value="var1.datetime.toISODate()">

      </div>

    </div>

    <div class="row">

      <label for="inp_qty" class="col-sm-5 col-form-label">Qty:</label>

      <div class="col-sm-7">

        <input type="number" class="form-control form-control-sm" id="inp_qty" name="qty" aria-describedby="inp_qty_help" placeholder="Enter Qty:">

      </div>

    </div><div class="row">

      <label for="inp_purchase_price" class="col-sm-5 col-form-label">Purchase price:</label>

      <div class="col-sm-7">

        <input type="number" class="form-control form-control-sm" id="inp_purchase_price" name="purchase_price" aria-describedby="inp_purchase_price_help" placeholder="Enter Purchase price:">

      </div>

    </div>

    <div class="row">

      <label for="inp_purchase_time" class="col-sm-5 col-form-label">Purchase time:</label>

      <div class="col-sm-7">

        <input type="time"  tabindex="-1"  class="form-control form-control-sm" id="inp_purchase_time" name="purchase_time" aria-describedby="inp_purchase_time_help" placeholder="Enter Purchase time:" value="08:05:00">

      </div>

    </div><div class="row">

      <label for="inp_sale_price" class="col-sm-5 col-form-label">Sale price:</label>

      <div class="col-sm-7">

        <input type="number" class="form-control form-control-sm" id="inp_sale_price" name="sale_price" aria-describedby="inp_sale_price_help" placeholder="Enter Sale price:">

      </div>

    </div>

    <div class="row">

      <label for="inp_sale_time" class="col-sm-5 col-form-label">Sale time:</label>

      <div class="col-sm-7">

        <input type="time" tabindex="-1" class="form-control form-control-sm" id="inp_sale_time" name="sale_time" aria-describedby="inp_sale_time_help" placeholder="Enter Sale time:" value="09:15:00">

      </div>

    </div>

    <div class="row">

      <label for="inp_notes" class="col-sm-5 col-form-label">Notes:</label>

      <div class="col-sm-7">

        <input type="number" class="form-control form-control-sm" id="inp_notes" name="notes" aria-describedby="inp_notes_help" placeholder="Enter Notes:">

      </div>

    </div>

    <div class="row">

    <div class="col text-end">

    <button id="btn2" class="btn btn-sm btn-secondary" dmx-on:click="form1.reset()">Clear</button><button id="btn1" class="btn btn-sm text-light ms-1 btn-danger" dmx-on:click="form1.submit()">Submit</button>

    </div>

    </div>

    </form>
#7

So which of the inputs are you submitting as a decimal?
Also:
What value are you entering in the form input and what value are you actually sending to the server side?

#8

Which field are you having trouble with specifically?
Additionally, as Teodor is asking - is you could also share a screenshot of the PAYLOD & RESPONSE tabs in the network tab of your browser developer tools - that would be helpful.

#9

purchase price and sale price.

image
image900×863 38.6 KB

#11

“table”: “trades”,

          "column": "purchase_price",

          "type": "number",

          "value": "{{$_POST.purchase_price}}"
#12

image
image717×1832 51.9 KB

#13

Try adding

step="any"

To the input (for number, otherwise it will not accept the decimal):

<input type="number" step="any">

And see if that rectifies the issue @Heather_Mann?

#14

So what is the error do you see when debugging this on form submit?

#15

That actually works! Thanks!!!

I went back and looked at another project that’s using a decimal field and the only difference was I had a number validation rule. Tried that on the sale_price and low and behold that also fixes the issue.

1 Like
#16

Interestingly, there was no error. The form focus just went up to the purchase_price field.

#17

Thanks everyone for the help. Really appreciate it!!

#18

It’s an idiosyncrasy of the HTML 5 number input type. It is how we overcome it in the end as faced the same issue some months ago. Is the correct method rather than using validation or JavaScript.

Maybe this could be added to the input type for number in an update @Teodor?

1 Like