3

I have a custom list that contains a date time field. The client requested we trim the time portion of the field to only show two available appointment times of 8:30 am and 1:30 pm. In order to do this I added the following javascript code to the New and Edit forms of the list. The problem I am having is when the users open the edit form it does not maintain the previously selected time value. It shows the first available value of 8:30 AM, so if the users open the edit form and change some other field than the time field they inadvertently change the originally selected time field to 8:30 am even if the originally selected time was 1:30PM. How can I get the code to default to the originally selected time value from the New form within Edit form?

<script type="text/javascript">
    $(document).ready(function () {
        var str=['8 AM','1 PM'];
        $("select[id$='_DateTimeField_DateTimeFieldDateHours']").each(function(i){
            $(this).html("");
            for(var i=0;str[i]!=null;i++){
                $(this).append('<OPTION value="'+str[i]+'">'+str[i]+'</OPTION>');
            }
        });
    });
</script>

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var str=['30'];
        $("select[id$='_DateTimeField_DateTimeFieldDateMinutes']").each(function(i){
            $(this).html("");
            for(var i=0;str[i]!=null;i++){
                $(this).append('<OPTION value="'+str[i]+'">'+str[i]+'</OPTION>');
            }
        });
    });       
</script>
2

Simply check if the input field contains a value:

$(document).ready(function () {
    var hours=['8 AM','1 PM'],
        minutes = ['30']; //don't see the point in putting a single value in an array, but I suppose if you decide to add more options later
    $("select[id$='_DateTimeField_DateTimeFieldDateHours']").each(function(){
        if ($(this).val()) return 1; //Returning non-false is the same as a continue statement in a for loop
        $(this).empty();
        for(var i=0, hour; hour = hours[i]; i++) {
            $(this).append('<OPTION value="'+ hour +'">'+ hour +'</OPTION>');
        }
    });
    $("select[id$='_DateTimeField_DateTimeFieldDateMinutes']").each(function(){
        if ($(this).val()) return 1;
        $(this).empty();
        for(var i=0, minute; minute = minutes[i]; i++){
            $(this).append('<OPTION value="'+ minute +'">'+ minute +'</OPTION>');
        }
    });
});       

2

You need to save the value before killing the contents of the drop down field with $(this).html("");, you need to save the selected value, if there is any:

var selectedHour = $(this).find("option:selected").text(); 

// .text() could fail

If it is set and it matches the appointment time in your loop, i would just call this:

$(this).append('<OPTION value="'+ hour +'" selected="selected">'+ hour +'</OPTION>');

Or attach the attribute in some better way.

Instead of calling $(this).html("") you can also call $(this).empty(), I believe.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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