Get html date input type value and a value from dropdown to show in other div without loading page using javascript

user_12945367 0
Viewed 63

I am taking a date and a slot time input from user in a card from user.

$("#online_meeting_datepicker_continue").click(function() {
  $("#online_meeting_user_details").delay(250).fadeIn(250);
  $("#online_meeting_datepicker").fadeOut(250);

});
<input type="date" value="<?php echo $today; ?>" id="schedule" class="form-control d-inline" name="schedule">

<select class="form-control d-inline" id="mail_type" name="" required>
  <option value="" selected>4 pm</option>
  <option value="">5 pm</option>
  <option value="">6 pm</option>
</select>

<a href="#" class="btn btn-info form-control" id="phone_call_datepicker_continue"> Continue</a>

In new fadein div I want to print the selected date and time using js.what will be the code in new online_meeting_user_details div for it?

html jquery javascript
1 Answers

You need to use .val() to the values of your schedule and mail_type.

Read more about .val() here

Store the value in variable named as schedule and mail_type

Lastly, when you select date and time you will click continue to fadeIn and you will .html() to show the selected values.

Read more about .html() here

Run snippet below to see it working

$("#phone_call_datepicker_continue").click(function() {

  //Get selected schedule and mail type
  var schedule = $('#schedule').val()
  var mail_type = $('#mail_type').val()

  //New div data
  var data = '<span>Schedule: ' + schedule + '</span><br><span>Mail Type: ' + mail_type + '</span>'

  //Fade in and show data
  $("#online_meeting_user_details").delay(250).fadeIn(250).html(data);


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" value="<?php echo $today; ?>" id="schedule" class="form-control d-inline" name="schedule">

<select class="form-control d-inline" id="mail_type" name="" required>
  <option disabled selected>Choose One</option>
  <option value="4 pm">4 pm</option>
  <option value="5 pm">5 pm</option>
  <option value="6 pm">6 pm</option>
</select>

<a href="#" class="btn btn-info form-control" id="phone_call_datepicker_continue"> Continue</a>


<div id="online_meeting_user_details"></div>

user_136690480
Related