CODEWITHSUNDEEP
javascriptnumber-formatting
Arsengael
Arsengael

Reputation: 25

Displaying new input value (adding spaces)

This seems embarrassing to ask even for a newbie like me, but I have a huge headache with displaying new value in the html input field after adding spaces between numbers in html input. Basically, what I want to achieve is to add spaces between numbers in the input field after the user "unclicks" the input.

For example, 123456789123456789 would change to 12 3456 7891 2345 6789. I get the value of users input and add spaces where I want, but I just can't make it appear in the input field. My code looks like this:

'use strict';
$(document).ready(function (){var $inputTwo = $('#separateNumbers');
    $inputTwo.change(function() {
        var inputNumber = $inputTwo.val();
        var separatedNumbers = [];
        var part1 = inputNumber.substring(0, 2);
        separatedNumbers.push(part1);
        for (var i = 2; i < inputNumber.length; i += 4){
            separatedNumbers.push(inputNumber.substring(i, i + 4))
        }
        var displayNumber = separatedNumbers.join(' ');
        $inputTwo.val(displayNumber);
    })
});
<body>
    <div class="wrapper">
        <div id="Task1_2">
            <h1>Task 1.2</h1>
            <label for="separateNumbers">Write more than 10 digits:</label><br/>
            <input type="number" id="separateNumbers" placeholder=" i.e. 12345678901234567">
        </div>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

I don't understand why this doesn't work. I tried to replace last code line with 

document.getElementById('separateNumbers').value = displayNumber;

but then I got this in console: 

The specified value "87 6178 1" is not a valid number.
The value must match to the following regular expression:
    -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?.

This appears no matter what combination of numbers I put. Unfortunately I don't understand Regex yet, so I don't even know what would be a valid value...

Upvotes: 2

Views: 108

Answers (2)

Houssem Cherif
Houssem Cherif

Reputation: 221

change the type to text because adding space not work in the text format 

$(document).ready(function() {

    //  Displaying new input value (adding spaces) -- Solution

    $("#separateNumbers").change(function() {
        $inputTwo = $('#separateNumbers');

        var inputNumber = $inputTwo.val();
        var separatedNumbers = [];
        var part1 = inputNumber.substring(0, 2);
        separatedNumbers.push(part1);
        for (var i = 2; i < inputNumber.length; i += 4) {
            separatedNumbers.push(inputNumber.substring(i, i + 4))
        }
        var displayNumber = separatedNumbers.join(' ');
        $inputTwo.val(displayNumber);
    });

    

});
<body>
    <div class="wrapper">
        <div id="Task1_2">
            <h1>Task 1.2</h1>
            <label for="separateNumbers">Write more than 10 digits:</label><br/>
            <input type="text" id="separateNumbers" placeholder=" i.e. 12345678901234567">
          
        </div>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

Upvotes: 0

M B
M B

Reputation: 2326

a number does not have spaces in it. change your input to a type = text and it should work

Upvotes: 4

Related Questions