How to copy google autocomplete and datetimepicker value/text into a label?

Question

I'm trying to copy and pass values from input boxes in my form to different labels on the same form. I'm doing this because i need to have a summary at the end of the page of all the inputted text before submitting it. Before anything else, i already can copy most of my input boxes into a label but i'm having a hard time passing the value/text of google autocomplete and datetimepicker input boxes into labels. I tried searching but none of them worked. Here's what i have:

HTML

<h3><span class="number"><i class="icon-note txt-black"></i></span><span class="head-font capitalize-font profile-tab">profile</span></h3>

<fieldset>
    <div class="row">
        <div class="col-sm-12 col-xs-12">
            <div class="form-wrap">
               <div class="col-md-12 col-sm-12 col-xs-12 form-group">
                <label class="control-label mb-10" for="">Address:</label>
                 <div id="pac-container">
                 <input id="address" type="text" name="address" class="form- 
                control" placeholder="Enter a location">
            </div>
        </div>

<div class="col-md-12 col-sm-12 col-xs-12 form-group">
    <label class="control-label mb-10" for="">date of birth:</label>
        <div class='input-group date' id='datetimepicker1'>
            <input type='text' class="form-control" id="bday" name="bday" />
                <span class="input-group-addon">
                    <span class="fa fa-calendar"></span>
                </span>
             </div>
          </div>  
        </div>
    </div>
</div>  
</fieldset>  

<h3><span class="number"><i class="icon-user txt-black"></i></span><span class="head-font capitalize-font">Caretaker's Information</span></h3>
    <fieldset>
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="form-wrap">
                    <h2>SUMMARY</h2>
                    <hr>
                       <div class="col-md-12 col-xs-12 form-group">
                         <div class="form-group">
                          <label class="control-label col-md-3">Address:</label>
                            <div class="col-md-9">
                             <label name="address2"></label>
                       </div>
                    </div>
                </div>  

                  <div class="col-md-12 col-xs-12 form-group">
                    <div class="form-group">
                     <label class="control-label col-md-3">Birthday:</label>
                      <div class="col-md-9">
                    <label name="bday2"></label>
              </div>
            </div>
           </div>
         </div> 
       </div>
      </div>
</fieldset>

Most of my input boxes are formatted this way.
Here's my js

<script type="text/javascript">
$(document).ready(function(){
   $("#address").on('change', function (){
        var a = $(this).val();
        $('[name="address2"]').text(a);
    });  

   $("#bday").on('change', function (){
        var a = $(this).val();
        $('[name="bday2"]').text(a);
    });  
$('#datetimepicker1').datetimepicker({
        useCurrent: false,
        icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down"
            },
        }).on('dp.show', function() {
        if($(this).data("DateTimePicker").date() === null)
        $(this).data("DateTimePicker").date(moment());
      });
    });
</script>

What am i lacking? I can't seem to pass the address and date into a label. If its not possible with a label, another input box will be okay. Note: they are all on the same page.

@DinoMyte oh my bad, should i include the js for the google autocomplete and my datetimepicker as well? The problem i am facing now is when it autofills(don't know the exact word sorry) like searching for a place in google autocomplete it doesn't pass the entire address in the box, same as the datetimepicker. When i choose a date from the datetimepicker it doesn't get passed too. — jesse rodriguez, Mar 14 '18 at 23:36
The change event in those cases ( especially datepicker ) is not going to trigger on input fields. You would need a seperate handler for that. Could you post rest of your code including html ? — DinoMyte, Mar 14 '18 at 23:43
I dont see any datepicker initialization. please include rest of the js — DinoMyte, Mar 15 '18 at 00:04
@DinoMyte my bad. Good news i finally got the address to display on my label. Only the datetimepicker left. I updated my js. — jesse rodriguez, Mar 15 '18 at 00:07
Your missing select event on your datepicker: https://stackoverflow.com/questions/6471959/jquery-datepicker-onchange-event-issue — DinoMyte, Mar 15 '18 at 00:13
@DinoMyte does onselect not work on datetimepicker? It throws Uncaught TypeError: option onSelect is not recognized!. — jesse rodriguez, Mar 15 '18 at 00:34

score 0 · Answer 1 · answered Mar 14 '18 at 23:33

Your code works as expected under normal circumstances. The problem is likely that the form in question is not available on page load, or is loaded in some sort of modal popup. If this is the case, you'll need to attach the event handler to an element that is available on page load (such as document), and make use of event delegation:

$(document).on("change", "#address", function() {
  var a = $(this).val();
  $('[name="address2"]').text(a);
});

$(document).on("change", "#bday", function() {
  var a = $(this).val();
  $('[name="bday2"]').text(a);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="col-md-12 col-sm-12 col-xs-12 form-group">
  <label class="control-label mb-10" for="">Address:</label>
  <div id="pac-container">
    <input id="address" type="text" name="address" class="form-control" placeholder="Enter a location">
  </div>
</div>

<div class="col-md-12 col-sm-12 col-xs-12 form-group">
  <label class="control-label mb-10" for="">date of birth:</label>
  <div class='input-group date' id='datetimepicker1'>
    <input type='text' class="form-control" id="bday" name="bday" />
    <span class="input-group-addon">
      <span class="fa fa-calendar"></span>
    </span>
  </div>
</div>
<div class="col-md-12 col-xs-12 form-group">
  <div class="form-group">
    <label class="control-label col-md-3">Address:</label>
    <div class="col-md-9">
      <label name="address2"></label>
    </div>
  </div>
</div>

<div class="col-md-12 col-xs-12 form-group">
  <div class="form-group">
    <label class="control-label col-md-3">Birthday:</label>
    <div class="col-md-9">
      <label name="bday2"></label>
    </div>
  </div>
</div>

I got the google autocomplete to work with this. But the datetimepicker still wont pass any values/text. — jesse rodriguez, Mar 15 '18 at 00:08

How to copy google autocomplete and datetimepicker value/text into a label?

1 Answers1