input content value is not showing on front end

April 19, 2022

I have this code that I receive from database a formated data of a social security number.

<div class="col-md-3">
  <h5>Social Security #:<span class="text-danger">*</span></h5>
  <div class="controls">
    <div id="show-create">
      <input type="number" id="social-security" name="social-security" class="form-control" value="123-45-6789">
    </div>
  </div>
</div>

When I check Element on Chrome, I have the value="123-45-6789", but is not showing on front end.

>Solution :

You have an <input type="number">, which is used only for numbers. But "123-45-6789" is not a number:

<input type="number" value="123-45-6789">

Since you’re trying to display a text value, use an <input type="text"> instead:

<input type="text" value="123-45-6789">

Basically, just because text contains number characters does not mean that it is a number. Social security numbers, phone numbers, address components, etc.