Laravel input field number_format()

I'm struggling with my users about big numbers in the input fields for better reading. Is there an easy way to have formatted numbers in input fields like 1'450'000.00 and how to save the value as number?

in the moment I handle it like this:

<input id="wbw" type="numeric" class="form-control @error('wbw') is-invalid @enderror" name="wbw" value="{{number_format( old('wbw', $bw->wbw), 2, '.', '')}}" autofocus>

but I like to have something like this as number_format:

value="{{number_format( old('wbw', $bw->wbw), 2, '.', '´')}}"

But then I have the problem while saving, because it's not a number anymore. Do I have to handle it in the save-function in the controller or is there an elegant way in the blade?

Thanks for help!

Solution

Since the formatting of number is only needed in client side (shown to user in browser), then it's better to just use javascript library instead of server-side php.

Example with AutoNumeric.js:

window.myinput = new AutoNumeric('#myinput', 1450000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<input type="text" id="myinput">
<button onclick="alert(window.myinput.rawValue)">see value</button>

Example with cleave.js

window.cleave = new Cleave('.input-element', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js"></script>
<input type="text" class="input-element" value="1450000">
<button onclick="alert(window.cleave.getRawValue())">see value</button>

But you must also add before submit js event handler so that the POST-ed value in form is the input's raw value instead of the formatted value

Disclaimer: I'm not associated with author of those library above