On dropdown value change, need to set due date column value using javascript

Question

I have choice value dropdown for priority with value - High, Normal, low. If Priority is "high" , Duedate= Current date + 2; If Priority is "Normal" , Duedate= Current date + 3; If Priority is "Low" , Duedate= Current date + 4;

I need to do this using javascript /Jquery as I am working on Sharepoint Online. I can't use Sharepoint designer or infopath.

This is the code I have written.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script> <script> _spBodyOnLoadFunctionNames.push("dropdownvalue"); function dropdownvalue() { //add an onchange event to the dropdown var theSelect = getTagFromIdentifierAndTitle("select","DropDownChoice","Priority").onchange = function() {ChangeEvent()}; } function ChangeEvent() { var submittedDate= $("input[title='Submitted Date']").val(); //var submittedDate = new Date(ctx.CurrentItem.SubmittedDate); //get the dropdown var dropDown = getTagFromIdentifierAndTitle("select","DropDownChoice","Priority"); var dueDate = new Date(ctx.CurrentItem.DueDate); //get the selected value var priority= dropDown.options[dropDown.selectedIndex].text; var now = new Date(); //var nowPlus = new Date(); switch(priority) { case "High (<3 days)": dueDate.setDate(now.getDate()+2); break; case "Normal (3 days)": dueDate.setDate(now.getDate()+3); break; case "Low (>3 days)": dueDate.setDate(now.getDate()+4); break; default: date = null; } } </script> 

Answer 1

You can use the following code for your requirement:

<script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var today = new Date(); var todayDay = today.getDate(); var todayMon = today.getMonth() + 1; var todayYear = today.getYear(); $("select[title='Priority'").change(function(){ var value = $(this).find("option:selected").text(); if(value== 'High'){ Day=todayDay+2; DueDate=todayMon + "/" + Day + "/" + todayYear; $("input[title='DueDate']").val(DueDate); } if(value== 'Normal'){ Day=todayDay+3; DueDate=todayMon + "/" + Day + "/" + todayYear; $("input[title='DueDate']").val(DueDate); } if(value== 'Low'){ Day=todayDay+4; DueDate=todayMon + "/" + Day + "/" + todayYear; $("input[title='DueDate']").val(DueDate); } }); }) </script> 

The result is：

Note: You need to change the choice column and date column to yours.

Answer 2

<script language="javascript" type="text/javascript"> var today = new Date(); $(function(){ $("select[title='Priority Required Field']").change(function(){ var value = $(this).find("option:selected").text(); if(value == 'High (<3 days)'){ var slaDate = addBusinessDays(today, 2); var DateCreated = new Date(Date.parse(slaDate)).format("MM/dd/yyyy"); $("input[title='Due Date Required Field']").val(DateCreated); } else if (value == 'Normal (3 days)') { var slaDate = addBusinessDays(today, 3); var DateCreated = new Date(Date.parse(slaDate)).format("MM/dd/yyyy"); $("input[title='Due Date Required Field']").val(DateCreated); } else if (value == 'Low (>3 days)') { var slaDate = addBusinessDays(today, 4); var DateCreated = new Date(Date.parse(slaDate)).format("MM/dd/yyyy"); $("input[title='Due Date Required Field']").val(DateCreated); } else { var DateCreated = new Date(Date.parse(today)).format("MM/dd/yyyy"); $("input[title='Due Date Required Field']").val(DateCreated); } }); }); function addBusinessDays(date,NoD) { d = new Date(date.getTime()); var day = d.getDay(); d.setDate(d.getDate() + NoD); var dayNumber = d.getDay(); d = new Date(date.getTime()); if(dayNumber == 6) { d.setDate(d.getDate() + (NoD + 2)) } else if(dayNumber == 0) { d.setDate(d.getDate() + (NoD + 1)) } else { d.setDate(d.getDate() + NoD); } return d; } </script>