Help with Multi Choice Checkbox Field and Custom JS

[Alex Ross]

I have a multi choice chechbox field with 6 different choice options (6 checkboxes total). I also have 6 date fields the correspond with the 6 checkboxs.

Choice1 –> Date1
Choice2 –> Date2
Choice3 –> Date3
Choice4 –> Date4
Choice5 –> Date5
Choice6 –> Date6

I am trying to write custom JS to autofill the appropriate date field when a checkbox is checked.

For example:
(The following function is called by a rule that triggers on field change)
function checkBoxExample() {

var multiChoiceField = getFieldValue(“multiChoiceFieldName”);
var today = new Date();

switch (multiChoiceField) {
case if checkbox1 is checked:
setFieldValue(“Date1”, today);
break;
case if checkbox2 is checked:
setFieldValue(“Date2”, today);
break;
case etc…
}
}

Can you help with the correct syntax for the case statements? Or suggest a better way to accomplish this?

[Alexander Bautz]

This is easier done with only custom js – remove your on-change-rule and add this to your custom js:

jQuery("#dffs_YOUR_FIELD_NAME input:checkbox").on("click", function(){
    var val = jQuery(this).val();
    var checked = jQuery(this).prop("checked");
    switch(val){
        case "Choice1":
            if(checked){
                spjs.utility.setDateFieldFromDateObject("Date1", new Date());
            }else{
                // Clear the value if unchecked
                setFieldValue("Date1", "");
            }
        break;
        case "Choice2":
            if(checked){
                spjs.utility.setDateFieldFromDateObject("Date2", new Date());
            }else{
                // Clear the value if unchecked
                setFieldValue("Date2", "");
            }
        break;
        case "Choice3":
            if(checked){
                spjs.utility.setDateFieldFromDateObject("Date3", new Date());
            }else{
                // Clear the value if unchecked
                setFieldValue("Date3", "");
            }
        break;
    }
});

Replace YOUR_FIELD_NAME with your field name and change the “ChoiceX” and “DateX” with your field names.

Alexander

[Alex Ross]

This worked perfectly but now my requirements have changed.

Instead of updating the date field as soon as the checkbox is selected the end user would like a pop up menu to open with an input field where a date can be entered.

I have attempted to use your code in the customAlert function but can’t get it to work 100%. It works for choice1/Date1 but not any others. My code sample is attached.

Attachments:

1. DFFS_Help.txt

[Alexander Bautz]

Try it like this:

function customAlert(val, checked) {
    var today = new Date(); // gets today's date
    var date = (today.getMonth() + 1) + '/' + today.getDate() + '/' + today.getFullYear(); //formats today's date to MM/DD/YYYY

    spjs.dffs.alert({
        "title": "Alert!",
        "msg": "<div style='width:350px;'>Set date to: <input type='text' id='dateInput' value=" + date + "> </input> </div>",
        "ok": function () {
            switch (val) {
                case "choice1":
                    if (checked) {
                        setFieldValue("Date1", document.getElementById('dateInput').value);
                    }
                    break;
                case "choice2":
                    if (checked) {
                        setFieldValue("Date2", document.getElementById('dateInput').value);
                    }
                    break;
                case "choice3":
                    if (checked) {
                        setFieldValue("Date3", document.getElementById('dateInput').value);
                    }
                    break;
            }
        },
        "okBtnLabel": "Submit",
        "cancel": function () {
            spjs.dffs.closeDlg();
        },
        "cancelBtnLabel": "Cancel"
    });
}

jQuery("#dffs_YOUR_FIELD_NAME input:checkbox").on("click", function () {
    var val = jQuery(this).val();
    var checked = jQuery(this).prop("checked");
    customAlert(val, checked);
});

Alexander

[Alex Ross]

Works perfectly. Thank you!

One last thing. What can I add to the cancel function to uncheck the checkbox if the cancel button is clicked instead of submit?

[Alexander Bautz]

Try this:

jQuery("#dffs_YOUR_FIELD_NAME input[value='"+val+"']").prop("checked", false);

Replace YOUR_FIELD_NAME with your field name.

Alexander

[Alex Ross]

Works like a charm. Thank you!

[Author]

Posts