1

In a SharePoint edit form, I know that you can show/hide fields based on a drop down field value (SPUtility Show Hide Field Based on Value from another field Custom Form) but I wanted to show/hide based on whether a datepicker has a value.

I have the following fields "Work Start Date" and "Work End Date". I want to hide Work End Date if Work Start Date is empty/null

I tried using == null and == "" and even > "1/1/1900" but the jquery does not seem to recognize the value in the Work Start Date field. I also tried an alert just to see if it was reading the value and the alert didn't generate.

Here is my code (using Jqyuery 3.1.1 and sputility):

//Does not show work end date when work start date is not null
$(document).ready(function()

{if ($("select[title='Work Start Date']").val() == null)

{

$('nobr:contains("Work End Date")').closest('tr').hide();

}

else 

{

$('nobr:contains("Work End Date")').closest('tr').show();

}
});

Alternately, I tried using a calculated field called "Status" with a value of "Not Started" to hide the Work End Date field. This also did not work. I can get the fields to hide or show but not to conditionally show/hide. Any Advise you can provide would be very helpful. My company does not allow InfoPath or SharePoint Designer.

Improve this question

2 Answers 2

Reset to default
0

Corrections to your code: 

{if ($("select[title='Work Start Date']").val() == null)

{if($("input[title='Work Start Date']").val() =="")

The date field is an input control and not a select. Please try adn

if you would like to bind a on change event to a date picker, 

$('input[title="Work Start Date"]').get(0)**.onvaluesetfrompicker** = function YOURCUSTOMFUNCTION(){
alert("HEllo");
}
Improve this answer
5
  • I tried input instead of select but the Work End Date field still shows regardless of whether it is null/empty or has a date value.
    – H_Thurber
    Commented Feb 17, 2017 at 22:00
  • Withdrawn, not sure why it wasn't working but the input fixed the issue.
    – H_Thurber
    Commented Feb 17, 2017 at 23:14
  • I am able to show/hide date fields now but having trouble interpreting the on change event. I have the following but it doesn't appear to work for manual entry or datepicker:
    – H_Thurber
    Commented Feb 18, 2017 at 0:03
  • I saw your code, how are you testing it? this code above works when you change the date while clicking on the datepicker icon. For when you type in the date field from the keyboard, your regular onchange event on a textbox should work. You should have both as the users can type in date as well as use date picker. Hope this helps.
    – ssdar
    Commented Feb 21, 2017 at 13:54
  • I attempted both changing the date by manual entry and by selecting a new value but the code doesn't generate the alert.
    – H_Thurber
    Commented Feb 21, 2017 at 21:07
0

So the hide/show for date picker field works with input but I cannot seem to figure out the onchange event. Can you help? I'm using the alert to verify it works.

<script type="text/javascript">
$("input[title='Work Start Date']").get(0).onvaluesetfrompicker = DatePickerChanged;

function DatePickerChanged({

alert("Totally Worked");
});
</script>
Improve this answer
1
  • can you change your function this way? The open braces in your function is misplaced. $("input[title='Work Start Date']").get(0).onvaluesetfrompicker = DatePickerChanged; function DatePickerChanged(){ alert("Totally Worked"); };
    – ssdar
    Commented Feb 21, 2017 at 21:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.