CODEWITHSUNDEEP
javascriptjqueryhtml
user10207354
user10207354

Reputation:

How to change the date field dynamically depending upon the dropdown

Here I want to automatically display the date depending upon the value which I select from the dropdown. Say, when I click first value of the dropdown, it has to display the current date in the text box. Similarly when I select second value of the dropdown it has to display the date after 15 days.

<div class="col-sm-3 form-group "><br>
  <label class="required">A Sample Dropdown when I select the value the date has to automatically get filled in the text box</label> <br>
  <select class="form-control" name="experience" required>
    <option value="">--values--</option>
    <option name="experience" value="0-1">Current date</option>
    <option name="experience" value="1-3">date after 15 days from current date</option>
    <option name="experience" value="3-5">date after 30 days from current date</option>
    <option name="experience" value="5-8">date after 45 days from current date</option>
    <option name="experience" value="8-11">date after 60 days from current date</option>
  </select>
</div><br><br>
<div>
  <input type="text" value="Display date here" />
</div>

Upvotes: 0

Views: 292

Answers (1)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You can do it like this:

I've combined a switch with the change event on your select

$("select[name=experience]").on("change", function() {
  var ddate = new Date();

  switch ($(this).val()) {
    case "1-3":
      ddate.setDate(ddate.getDate() + 15);
      break;
    case "3-5":
      ddate.setDate(ddate.getDate() + 30);
      break;
    case "5-8":
      ddate.setDate(ddate.getDate() + 45);
      break;
    case "8-11":
      ddate.setDate(ddate.getDate() + 60);
      break;
    default:
  }

    $(".datavalue").val(ddate)
});

Please note: I've added a class to your input to select it better

Demo

$("select[name=experience]").on("change", function() {
  var ddate = new Date();

  switch ($(this).val()) {
    case "1-3":
      ddate.setDate(ddate.getDate() + 15);
      break;
    case "3-5":
      ddate.setDate(ddate.getDate() + 30);
      break;
    case "5-8":
      ddate.setDate(ddate.getDate() + 45);
      break;
    case "8-11":
      ddate.setDate(ddate.getDate() + 60);
      break;
    default:
  }
  
	$(".datavalue").val(ddate)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-3 form-group ">
  <br>
  <label class="required">A Sample Dropdown when I select the value the date has to automatically get filled in the text box</label> <br><select class="form-control" name="experience" required>
										<option value="">--values--</option>
										<option name="experience" value="0-1">Current date</option>
										<option name="experience" value="1-3">date after 15 days from current date</option>
										<option name="experience" value="3-5">date after 30 days from current date</option>
										<option name="experience" value="5-8">date after 45 days from current date</option>
										<option name="experience" value="8-11">date after 60 days from current date</option>
									</select>
</div><br><br>
<div>
  <input type="text" class="datavalue" />
</div>

Upvotes: 3

Related Questions