This project has moved. For the latest updates, please go here.

Show/Hide Field problem

Sep 24, 2014 at 6:21 PM
Edited Sep 24, 2014 at 6:30 PM
Hi I am having some problems implementing this to hide a field based on the previous fields results. I have included a screenshot of the form along with the code I've utilized so far.

The result is that nothing happens.

Image

https://www.dropbox.com/s/pdtdj6y1uq75c70/image001%20%281%29.png?dl=0

Code used:
<script src="/Documents/jquery-1.11.1.min.js"></script>
<script src="/Documents/sputility.min.js"></script>

<script>
$(document).ready(function(){

    // -----  Hide the field at the begin if the default value is No.
    // Get a single select dropdown field
    var Are_There_Any_Sales/Property_Related_Issues?Field = SPUtility.GetSPField('Are_There_Any_Sales/Property_Related_Issues?');

    var Are There Any Sales/Property Related Issues?FieldValue = Are There Any Sales/Property Related Issues?Field.GetValue();

    // Hide the Listing Issues field if the selected value is No
    if(Are There Any Sales/Property Related Issues?FieldValue == 'No') {
        SPUtility.GetSPField('Listing_&_Sales_Issues:').Hide();
    }
    else {
        SPUtility.GetSPField('Listing_&_Sales_Issues:').Show();
    }


    // -----  Hide/Show the field based on new selected value.
    var id = SPUtility.GetSPField('Country').Dropdown.id;

    $('#'+id).on('change', function() {
        if (countryFieldValue == 'Other') {
            SPUtility.GetSPField('City').Hide();
        }
        else {
            SPUtility.GetSPField('City').Show();
        }
    });

});
</script> 
My skill level stops beyond copy/paste with java script.. I'm not sure the correct way to report the field when the field name has spaces and : or ?
Coordinator
Sep 25, 2014 at 3:05 AM
shapmb,
I will try to help out a bit, but you might need to find someone to help you with the code... JavaScript knowledge is (usually) required. :)

Note the following changes:
  • JavaScript variable names should not contain any special characters so I've renamed them
  • From your screenshot, looks like you are using radio buttons so I switched to use the RadioButtons property
  • Refactored code to use one method
Hopefully the code below will get you further along.
Thanks,
Kit
<script src="/Documents/jquery-1.11.1.min.js"></script>
<script src="/Documents/sputility.min.js"></script>

<script>
$(document).ready(function(){
    // Get both the sales field and issues field
    var salesField = SPUtility.GetSPField('Are There Any Sales/Property Related Issues?');
    var issuesField = SPUtility.GetSPField('Listing & Sales Issues:');

    // define a function which shows or hides the issues field based on the sales field's value
    function handleSalesFieldChange() {
        // Hide the Listing Issues field if the selected value is No
        if(salesField.GetValue() === 'No') {
            issuesField.Hide();
        }
        else {
            issuesField.Show();
        }
    }
    
    // -----  Hide/Show the field based on new selected value.
    $(salesField.RadioButtons).each(function(index, obj) {
        var radioButton = obj.value;
        $(radioButton).change(handleSalesFieldChange);
    });

    // -----  Hide the field at the beginning if the default value is No.
    handleSalesFieldChange();
});
</script>
Sep 25, 2014 at 3:53 PM
Edited Sep 25, 2014 at 4:36 PM
Hi Kit!

Thank you for the fast response! I have been able to modify JS before to work, so maybe sold myself a bit short, but cannot write it.

I've copied your current code into the NewForm.aspx and EditForm.aspx content editor web parts source code, however it is not performing the function.

I double checked the documents location for the jquery and sputility and both are linked OK.

For the "Are There Any Sales/Property Related Issues" column, this is set for data type "choice" and display as Radio Buttons. I've defaulted this answer to "No" and am not getting the JS response. Also on the bottom left of the web browser I'm getting a "wait while scripts are loaded" message. This goes away with removing this script.

Any suggestions of what to try next?

I greatly appreciate your help! Once I figure out how to do this one, I can manage to do the rest of the form as needed.

Best regards,

Mike
Sep 26, 2014 at 11:35 PM
Disregard! Got it working! It was the link to the scripts, I had to include sites/sitename before documents.

Next adventure is to have the same field that hides default the answer to check box N/A if 'No' is selected in salesField.
Coordinator
Sep 29, 2014 at 1:33 AM
Great to hear you got it working!

For the second part, add a new value named "N/A" and then add a line:

issuesField.Hide();
issuesField.SetValue("N/A");
Sep 29, 2014 at 6:32 PM
Edited Sep 29, 2014 at 6:34 PM
Everything works perfectly! One LAST request.

code to make the field uncheck N/A if else and the field is shown.

Thanks so much for your support. Really interesting stuff. I'm going to fully learn Java Script after seeing its potential.
Coordinator
Sep 30, 2014 at 3:01 AM
The code should be:
issuesField.Show();
issuesField.SetValue("N/A", false);

While I was testing this though, I realized I had a bug in the SetValue function for Checkbox fields. I fixed the bug and pushed a new version. Can you please re-download SPUtility version 0.9.3?
Sep 30, 2014 at 5:11 AM
I will re-download in the morning, update the code and report back how it works tomorrow.

Thank you!
Sep 30, 2014 at 8:37 PM
Updated version worked perfect as did the code you provided above.

That leads me to a two last questions. Sorry, I know I said last one :)
  • Is it possible to have it set all other fields to false when issuesfield is hidden without having to type each value name?
  • Is it possible to make the N/A field unavailable if the field is shown?
For the first question, what I'm trying to do is make it so if you check some check boxes then go back and decide salesfield should be No, all those checkboxes in issuesfield should uncheck and 'N/A' should set value. I guess what we really need is it to auto populate 'N/A' when hidden as it is currently does but we do not need 'N/A' as an option when the field is shown. Hope that makes sense.
Coordinator
Oct 2, 2014 at 2:58 AM
Yes to both!

For #1:
issuesField.Hide();
// set all the other checkboxes to unchecked
$(issuesField.GetValue()).each(function(index, value) {
    issuesField.SetValue(value, false);
});
issuesField.SetValue("N/A");
For #2, this hides the whole checkbox so the user cannot check or uncheck it.
var salesField = SPUtility.GetSPField('Are There Any Sales/Property Related Issues?');
var issuesField = SPUtility.GetSPField('Listing & Sales Issues:');
// Get the checkbox associated with N/A and hide it
$(issuesField.Checkboxes).each(function(index, obj) {
    if (obj.key === "N/A") {
        var checkbox = obj.value;
        // look up the DOM tree to hide the ROW the checkbox is in
        $(checkbox).closest('tr').hide();
        return false; // stop looping
    }
});
I also pushed the complete example I was testing with to Github (warning: slightly different variable names):
https://github.com/kitmenke/sputility/blob/master/examples/showhidedependentfield.html

Thanks,
Kit
Oct 14, 2014 at 11:14 AM
Edited Oct 14, 2014 at 11:15 AM
Hi there!

I'm trying the same thing but I want to hide a field based on a BooleanField. I want to Hide The Field "Liefertermin Eventbroschüre", if the BooleanField "Eventbroschüre 105x148 mm" has the value false. If the value is true, the field has to show up. I tried following code:

<script src="/csa/SiteCollectionDocuments/jquery-1.11.1.min.js"></script>
<script src="/csa/SiteCollectionDocuments/sputility.min.js"></script>
<script> // wait for the window to load $(window).load(function () { var eventbroschure = SPUtility.GetSPField('Eventbroschüre 105x148 mm'); var lieferterminevent = SPUtility.GetSPField('Liefertermin Eventbroschüre'); function handleFieldChange() { if (eventbroschure.GetValue() === 'false') { lieferterminevent.Hide(); } else { lieferterminevent.Show(); } } // ----- Hide the field at the beginning if the default value is No. handleFieldChange(); }); </script> I'm really new at javascript and I'm trying it the first time based on your discussion....

Thank you for your response!!
Coordinator
Oct 15, 2014 at 11:54 AM
Melanie,
Could you move your boolean field question into a new discussion? It will help me to keep these separate.
Thanks,
Kit