input content value is not showing on front end-CodePudding

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

<div >
  <h5>Social Security #:<span >*</span></h5>
  <div >
    <div id="show-create">
      <input type="number" id="social-security" name="social-security"  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.

CodePudding user response：

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.

CodePudding user response：

HTML input with type='number' only allow numeric values such as 50, -10, or -45.3. Since your input value 123-45-6789 contains a dash in the middle, it's not a numeric value but a string. Change the input type from number to text, and it will work.

From

type="number"

type="text"

Full code

<div >
  <h5>Social Security #:<span >*</span></h5>
  <div >
    <div id="show-create">
      <?php  foreach ($peoples as $row) { ?>
      <input type="text" id="social-security" name="social-security"  value="<?php echo htmlspecialchars ($row['social-security'])?>">
      <?php  } ?>
    </div>
  </div>
</div>