Bootstrap Phone Form Helper Default Value

Question

I am using the phone form helper recommended by Bootstrap to validate phone numbers inside of a text box. The validation works as expected, but I am having some trouble setting the default value of the text box. This is the mark-up I use:

<input type = "text" class = "bfh-phone" data-format = "(ddd) ddd-dddd" 
id = "phone" value = <?php echo $phone; ?>>

My PHP $phone variable is a 10 digit non-formatted number

$phone = 1234567890;

Unfortunately, the above does not display as a default value for my input box. If I take off the 'class' and 'data-format' attributes from the input element then the default value displays as expected.

I've tried formatting my $phone variable along the lines of the data-format attribute.

IE:

$phone = (123) 456-7890;

But no dice. How do I set a default value using a PHP variable in this case?

Are you not missing a closing bracket for the end of the input? Also maybe put single quotes around the variable e.g. value='' - not sure about the single quotes as I don't really do php but it may help. — Billy Moat, Apr 29 '13 at 14:52
@BillyMoat I am, but that was missed in the copy and paste from my original code. I've tried putting quotes around the PHP call, but the results are the same — Lloyd Banks, Apr 29 '13 at 15:06
Does the PHO variable appear on the page if you just place it actually on the page and not in the form element e.g. just inside a paragraph tag or something?? — Billy Moat, Apr 29 '13 at 15:08
@BillyMoat yes, the variable is set. if you I echo it to html, it appears on the page — Lloyd Banks, Apr 29 '13 at 15:25
This help? http://stackoverflow.com/questions/3317730/putting-a-php-variable-in-a-html-form-value — Billy Moat, Apr 29 '13 at 15:31

score 6 · Accepted Answer · answered May 27 '13 at 14:46

6

It looks like one has to set a "value" attribute as well as a "data-number" attribute within the input field for the number to actually display in the field. An example can be seen on the bootstrap formhelper website - http://vincentlamanna.com/BootstrapFormHelpers/phone.html - within the <span> tag when displaying a value.

answered May 27 '13 at 14:46

MichaelJTaylor

354
3
2

2

Every once in a while, someone with no points will answer a question that was asked many a days ago. At first, I am filled with apprehension as to the value of the answer. But then I realize that this man has provided something both insightful and valuable; and my faith in humanity is restored – Lloyd Banks May 28 '13 at 16:02

score 0 · Answer 2 · answered Aug 14 '13 at 22:29

You could also solve this by modifying the plugin a little bit.

Open the bootstrap-formhelpers-phone.js file, go to line 175 and insert this line of code:

 if ($phone.val() != "") $phone.data("number", $phone.val())

The entire code block into the plugin is:

 /* PHONE DATA-API
  * ============== */

  $(window).on('load', function () {
    $('form input[type="text"].bfh-phone, form input[type="tel"].bfh-phone, span.bfh-phone').each(function () {
      var $phone = $(this)
      if ($phone.val() != "") $phone.data("number", $phone.val())
      $phone.bfhphone($phone.data())
    })
  })

Bootstrap Phone Form Helper Default Value

2 Answers2