title: Cannot grab the value of the user's input with jquery while using DateTimePicker plugin
body: <p>Hey StackOverflow wizards! I'm not quite sure what I'm doing wrong, but maybe you can help me.</p>
  
  <p>I'm building a giant form wizard with lots of user input. The form has multiple tabs and on the first page I have an input where the user chooses a Start Date and an input where a user chooses an End Date. The last tab is a summary of all of the user's chosen inputs.</p>
  
  <p>I'm trying to grab the value of the Start Date and End Date and spit them into a span element on the last tab of the form wizard. I'm using the DateTimePicker plugin <a href="https://github.com/Eonasdan/bootstrap-datetimepicker" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-9"&gt;
      &lt;label class="control-label"&gt;Start Date&lt;/label&gt;
      &lt;p&gt;&lt;span id="confirmation-start-date"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-9"&gt;
      &lt;label class="control-label"&gt;End Date&lt;/label&gt;
      &lt;p&gt;&lt;span id="confirmation-end-date"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-md-9"&gt;
      &lt;label class="control-label"&gt;Start Date&lt;/label&gt;
      &lt;p&gt;&lt;span id="confirmation-start-date"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-9"&gt;
      &lt;label class="control-label"&gt;End Date&lt;/label&gt;
      &lt;p&gt;&lt;span id="confirmation-end-date"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my JQuery:</p>
  
  <pre><code>var projectStartDate = $('#project-start-date').blur(function() {
    $('#project-start-date').data('DateTimePicker').date();
    console.log(projectStartDate);
  });
  $('#confirmation-start-date').text(projectStartDate);
  
  //get the value of End Date and spit it onto the summary page
  var projectEndDate = $('#project-end-date').blur(function() {
    $('#project-end-date').data('DateTimePicker').date();
    console.log(projectEndDate);
  });
  $('#confirmation-end-date').text(projectStartDate);
  </code></pre>
  
  <p>With this current code text stating [Object object] gets returned in the 's for those inputs.</p>
  
  <p>Console.log also returns an object, rather than a value.</p>
  
  <p>I'm super new to jquery/javascript and any help is appreciated.</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>My Full Javascript Code:</strong></p>
  
  <pre><code>&lt; script type = "text/javascript" &gt;
    //Escrow Form Validations
    $().ready(function() {
      $(".no input").radio('check');
  
      var $validator = $("#wizardForm").validate({
        rules: {
          email: {
            required: true,
            email: true,
            minlength: 5
          },
          first_name: {
            required: false,
            minlength: 5
          },
          last_name: {
            required: false,
            minlength: 5
          },
          price: {
            number: true
          }
        }
      });
  
      //Tab Control for Form Wizard
      $('#wizardCard').bootstrapWizard({
        tabClass: 'nav nav-pills nav-pills-blue',
        nextSelector: '.btn-next',
        previousSelector: '.btn-back',
        onNext: function(tab, navigation, index) {
          var $valid = $('#wizardForm').valid();
  
          if (!$valid) {
            $validator.focusInvalid();
            return false;
          }
        },
        onInit: function(tab, navigation, index) {
  
          //check number of tabs and fill the entire row
          var $total = navigation.find('li').length;
          $width = 100 / $total;
  
          $display_width = $(document).width();
  
          if ($display_width &lt; 600 &amp;&amp; $total &gt; 3) {
            $width = 50;
          }
  
          navigation.find('li').css('width', $width + '%');
        },
        onTabClick: function(tab, navigation, index) {
          // Disable the posibility to click on tabs
          return false;
        },
        onTabShow: function(tab, navigation, index) {
          var $total = navigation.find('li').length;
          var $current = index + 1;
  
          var wizard = navigation.closest('.card-wizard');
  
          // If it's the last tab then hide the last button and show the finish instead
          if ($current &gt;= $total) {
            $(wizard).find('.btn-next').hide();
            $(wizard).find('.btn-finish').show();
          } else if ($current == 1) {
            $(wizard).find('.btn-back').hide();
          } else {
            $(wizard).find('.btn-back').show();
            $(wizard).find('.btn-next').show();
            $(wizard).find('.btn-finish').hide();
          }
        }
      });
    });
  
  $().ready(function() {
    //Max amount of milestones
    var max_milestone = 5
  
    // Initial Milestone Count
    var x = 1;
  
    //function for add milestone button
    //if button.add-milestone is clicked
    $('.add-milestone').click(function(e) {
      //console.log('dope')
      e.preventDefault();
      if (x &lt; max_milestone) { // if the milestone count is smaller than 5
        x++; //increment milestones
        $('.additional-milestones').before('&lt;div class="milestone"&gt;&lt;h4&gt;Milestone #1&lt;/h4&gt;&lt;div class="row"&gt;&lt;div class="col-md-5"&gt;&lt;div class="form-group"&gt;&lt;label class="control-label"&gt;Milestone Title&lt;/label&gt;&lt;input class="form-control" type="text" name="Milestone[' + (x - 1) + '][MilestoneTitle]" placeholder="Dusty Bench" required /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="col-md-5"&gt;&lt;div class="form-group"&gt;&lt;label class="control-label"&gt;Deadline&lt;/label&gt;&lt;input type="text" class="form-control datetimepicker" name="Milestone[' + (x - 1) + '][MilestoneTitle]" placeholder="Deadline" required/&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="col-md-5"&gt;&lt;div class="form-group"&gt;&lt;label class="control-label"&gt;Milestone Description&lt;/label&gt;&lt;textarea class="form-control" id="exampleTextarea" name="Milestone[' + (x - 1) + '][MilestoneTitle]" rows="3" required&gt; &lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="col-md-5"&gt;&lt;a class="delete-milestone btn btn-danger"&gt; - Delete This Milestone&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;hr&gt;&lt;/div&gt;');
        $('.delete-milestone').click(function() {
          //console.log('dope')
          $(this).parents(".milestone").remove();
        });
      }
    });
    //then
    //populate with milestone form with Milestone+Next Milestone Number
  
    //Delete Milestone 
  });
  
  //Buying extra TB of Storage
  //If 'yes' radio dial is chosen
  //show TB input and submit
  $('.yes input').on('toggle', function() {
    $(".buy-more-storage").show('slow');
    $(".no input").radio('uncheck');
  });
  
  $('.no input').on('toggle', function() {
    $(".buy-more-storage").hide('slow');
    $(".yes input").radio('uncheck');
  });
  
  ///Date-Time Picker Classes
  $('.datetimepicker').datetimepicker({
    icons: {
      time: "fa fa-clock-o",
      date: "fa fa-calendar",
      up: "fa fa-chevron-up",
      down: "fa fa-chevron-down",
      previous: 'fa fa-chevron-left',
      next: 'fa fa-chevron-right',
      today: 'fa fa-screenshot',
      clear: 'fa fa-trash',
      close: 'fa fa-remove'
    },
    format: 'MM/DD/YYYY',
  });
  
  //Function for flaring error if picked date is before current date
  //if(pickedDate &lt;=todaysDate){
  //return true;
  //}
  //else{
  //return false;
  //}
  
  //If 'Buyer' is chosen from the Role dropdown menu then the buyer's choices are shown
  $('#project-role').on('change.states', function() {
    $(".buyer-choices").toggle($(this).val() == 'Payer');
  }).trigger('change.buyer-choices');
  
  //If 'Asset-Producer' is chosen from the Role dropdown menu then the Asset Producer's choices are shown
  $('#project-role').on('change.states', function() {
    $(".asset-producer-choices").toggle($(this).val() == 'Payee');
  }).trigger('change.asset-producer-choices');
  
  //If 'Credit-Card' is chosen from the Payment Options
  $('#payment-type').on('change.states', function() {
    $(".credit-card-form").toggle($(this).val() == 'credit-card');
  }).trigger('change.credit-card-form');
  
  //If 'Link Bank Account' is chosen from the Payment Options
  $('#payment-type').on('change.states', function() {
    $(".link-bank-account").toggle($(this).val() == 'bank-transfer');
  }).trigger('change.link-bank-account');
  
  //If 'Credit-Card' is chosen from the Project Setup Fee
  $('#projectFeePayment').on('change.states', function() {
    $(".projectFeePaymentCCForm").toggle($(this).val() == 'projectFeePaymentCC');
  }).trigger('change.projectFeePaymentCCForm');
  
  //If 'Link Bank Account' is chosen from the Project Setup Fee
  $('#projectFeePayment').on('change.states', function() {
    $(".projectFeePaymentBAForm").toggle($(this).val() == 'projectFeePaymentBT');
  }).trigger('change.projectFeePaymentBAForm');
  
  //Send Escrow Project button at end of wizard
  function onFinishWizard() {
    //Affirmation of project being
    $('#wizardForm').submit(function(e) {
      var postData = $(this).serializeArray();
      var formURL = "&lt;?php echo $portalfqdn; ?&gt;" + $(this).attr("action");
      $.ajax({
        url: formURL,
        type: "POST",
        data: postData,
        success: function(data) {
          //var emailResult = jQuery.parseJSON(data);
          if (data.Message.Code === "00") {
            swal({
              title: "Success!",
              text: "Your new escrow project has been sent for approval! Look out for an alert indicating when your project has been approved!",
              type: "success",
              confirmButtonText: "Ok",
            });
          } else {
            swal({
              title: "Error!",
              text: "There was a problem with your form submission.",
              type: "error",
              confirmButtonText: "Fix Errors",
            });
          }
        },
        error: function(jqXHR, textStatus, errorThrown) {
          $('#email-search-result').removeClass("success");
          $('#email-search-result').addClass("error");
          $('#email-search-result').html("An error occurred.");
        }
      });
      e.preventDefault(); //STOP default action
    });
  
    $('#wizardForm').submit(); //Submit  the FORM
  
    //If there are errors flag this message, change button to go back to form to address these errors 
    //$('.sweet-confirm.btn.btn-info.btn-fill').click(function(){
    //replace this with ajax submit
    //window.location.href='updated-escrow-list.html';
    //$('#wizardForm').submit(); //Submit  the FORM
  };
  
  
  //get the value of project name and spit it onto the summary page
  $('.ProjectName').keyup(function() {
    $('#confirmation-project-name').text($(this).val());
  });
  
  //Begin get start and end dates of project and spit them onto summary tab
  $().ready(function() {
    var projectStartDate;
    var projectEndDate;
  
    $('#project-start-date').blur(function() {
      projectStartDate = $(this).val();
    });
  
    $('#project-end-date').blur(function() {
      projectEndDate = $(this).val();
    });
  
    console.log(projectStartDate);
    console.log(projectEndDate);
  
    $('#confirmation-start-date').html(projectStartDate);
    $('#confirmation-end-date').html(projectEndDate);
  });
  //End----------------------------------------------------//
  
  //get the value of project collaborator and spit it onto the summary page
  $('.collaborator').keyup(function() {
    $('#confirmation-collaborator').text($(this).val());
  });
  
  //get the value of project deliverable description and spit it onto the summary page
  $('.ProjectDeliverable').keyup(function() {
    $('#confirmation-project-deliverable').text($(this).val());
  });
  
  //get the value of project role and spit it onto the summary page
  $('.ProjectRole').change(function() {
    var selectedText = $(this).find("option:selected").text();
    $('#confirmation-project-role').text(selectedText);
  });
  
  //if .ProjectRole is Buyer then show chosen payment method
  
  //if .ProjectRole is asset-producer then show chosen payment recieving method
  
  //get the value of project amount and spit it onto the summary page
  $('.ProjectAmount').keyup(function() {
    $('#confirmation-project-amount').text($(this).val());
    console.log($('#confirmation-project-amount').text());
  });
  
  var projectAmount = parseInt($('#confirmation-project-amount').text());
  console.log(projectAmount);
  
  //search for a user by email address to see if they have a Stratuscore account
  $('#email-search').click(function(e) {
    if ($('#ProjectPartner').val() === '') {
      return false;
    }
    var postData = {
      Email: $('#ProjectPartner').val(),
      ApiAction: "find-user-by-email"
    }
  
    var formURL = "&lt;?php echo $portalfqdn; ?&gt;account-api.php";
    $.ajax({
      url: formURL,
      type: "POST",
      data: postData,
      success: function(data) {
        //var emailResult = jQuery.parseJSON(data);
        if (data.Message.Code === "00") {
          $('#email-search-result').removeClass("error alert alert-danger");
          $('#email-search-result').addClass("success alert alert-success");
        } else {
          $('#email-search-result').removeClass("success");
          $('#email-search-result').addClass("error alert alert-danger");
        }
        $('#email-search-result').html(data.Message.Description);
        $('#email-search-result').show();
      },
      error: function(jqXHR, textStatus, errorThrown) {
        $('#email-search-result').removeClass("success");
        $('#email-search-result').addClass("error");
        $('#email-search-result').html("The user you are searching for wasn't found. Please check the email entered and try again.");
      }
    });
    e.preventDefault(); //STOP default action
  }); &lt; /script&gt;
  </code></pre>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>After much frustration at myself for being a javascript novice, I realized I had a scope issue on my hands and instead wrote functions to handle the DOM updating and passed the variables as parameters to those functions. Works for now!</p>
  
  <pre><code>//Begin get start and end dates of project and spit them onto summary tab
  function updateStartDate (projectStartDate) {
      $('#confirmation-start-date').html(projectStartDate);
      console.log(projectStartDate);
  }
  
  function updateEndDate (projectEndDate) {
      $('#confirmation-end-date').html(projectEndDate);
      console.log(projectEndDate);
  }
  
  $('#project-start-date').blur(function() {
      var projectStartDate = $(this).val();
          //console.log(projectStartDate);
      updateStartDate(projectStartDate);
  });
  
  $('#project-end-date').blur(function() {
      var projectEndDate = $(this).val();
          //console.log(projectEndDate);
      updateEndDate(projectEndDate);
  });
  </code></pre>