none
SP2013 SPServices SPCascade Dropdowns for required fields

    Question

  • I have a custom list and I created a custom new form for this list.  I added SPServices.SPCascadeDropdowns to have a cascade from Zone to Area and this is working, as long as I mark the fields not required.  These fields however, ARE required to have data in them per the business owner.  If I mark both fields required, the cascading dropdown no longer works.  If I make them not required, the cascading works just fine.

    Any thoughts or suggestions of what I can do?

    Thanks!

    mercredi 6 juin 2018 15:06

Réponses

  • Hi Wendy, I found a work around I think (but it could be better). 

    Originally, I added SPServices by copying the min.js and putting it into my Site Assets folder.  I did Advanced Edit Mode on the NewItemCustom form I created for the list and added the below code. The work around: I added "Required Field" to the parentColumn and childColumn names.  What was happening before when I made these 2 fields required fields but before I added "Required Field" text was that the page would load, but both drop down lists would be populated with all choices, there was no cascading.  After adding "Required Field" to the names, the cascading action happened.

    BUT, the problem is, when the page loads, Zone (parent) ddl starts on the first item in the list as the selected item (Zone A), but Area (child) ddl does not start with all the Zone A areas loaded - it starts with "(None)" as the selected item.  Once I change the selected item for the parent ddl, the child ddl cascades correctly.  But if someone were to click the "Save" button with the child ddl selection of "(None)" I was getting an error that "(None)" was not one of the valid list entries.  To counteract that, I added the additional PreSaveAction to make sure there is a valid selection in the child ddl before the Save button action happens.  This results in a popup box (instead of the regular red text "this field requires entry" SharePoint label). 

    I'd like it if there were a way to have the child ddl selections load based on the parent's initial "selected item" (first list item) on page load so I wouldn't need the PreSaveAction, but I'm not sure if there's a way to do that? 

    <script type="text/javascript" src = "<Site>/SiteAssets/WP/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src = "<Site>/SiteAssets/WP/jquery.SPServices.min.js"></script>
      
      <script type="text/javascript">
         $(document).ready(function() {
              $().SPServices.SPCascadeDropdowns({
                  relationshipList: "Area_List_For_LKP",
                  relationshipListParentColumn: "Zone_Name",
                  relationshipListChildColumn: "Title",
                  parentColumn: "Zone Required Field",
                  childColumn: "Area Required Field"
              });
          });   
     
      function PreSaveAction(){ 
      var value = $("select[title='Area Required Field'] option:selected").text();
        
      if(value == '(None)'){
       alert('Need to Pick An Area!');
      }
      else {
     
      return true;
      }
     
     }

    • Proposé comme réponse Wali666 mardi 26 juin 2018 01:45
    • Marqué comme réponse KimFromPA mardi 26 juin 2018 11:12
    jeudi 7 juin 2018 11:41

Toutes les réponses

  • Hi Kim,

    How did you add SPServices.SPCascadeDropdowns?

    Please provide your steps to reproduce this issue. Also provide some screenshots about this issue to better understand this issue.

    Thanks,

    Wendy


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    jeudi 7 juin 2018 06:53
    Modérateur
  • Hi Wendy, I found a work around I think (but it could be better). 

    Originally, I added SPServices by copying the min.js and putting it into my Site Assets folder.  I did Advanced Edit Mode on the NewItemCustom form I created for the list and added the below code. The work around: I added "Required Field" to the parentColumn and childColumn names.  What was happening before when I made these 2 fields required fields but before I added "Required Field" text was that the page would load, but both drop down lists would be populated with all choices, there was no cascading.  After adding "Required Field" to the names, the cascading action happened.

    BUT, the problem is, when the page loads, Zone (parent) ddl starts on the first item in the list as the selected item (Zone A), but Area (child) ddl does not start with all the Zone A areas loaded - it starts with "(None)" as the selected item.  Once I change the selected item for the parent ddl, the child ddl cascades correctly.  But if someone were to click the "Save" button with the child ddl selection of "(None)" I was getting an error that "(None)" was not one of the valid list entries.  To counteract that, I added the additional PreSaveAction to make sure there is a valid selection in the child ddl before the Save button action happens.  This results in a popup box (instead of the regular red text "this field requires entry" SharePoint label). 

    I'd like it if there were a way to have the child ddl selections load based on the parent's initial "selected item" (first list item) on page load so I wouldn't need the PreSaveAction, but I'm not sure if there's a way to do that? 

    <script type="text/javascript" src = "<Site>/SiteAssets/WP/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src = "<Site>/SiteAssets/WP/jquery.SPServices.min.js"></script>
      
      <script type="text/javascript">
         $(document).ready(function() {
              $().SPServices.SPCascadeDropdowns({
                  relationshipList: "Area_List_For_LKP",
                  relationshipListParentColumn: "Zone_Name",
                  relationshipListChildColumn: "Title",
                  parentColumn: "Zone Required Field",
                  childColumn: "Area Required Field"
              });
          });   
     
      function PreSaveAction(){ 
      var value = $("select[title='Area Required Field'] option:selected").text();
        
      if(value == '(None)'){
       alert('Need to Pick An Area!');
      }
      else {
     
      return true;
      }
     
     }

    • Proposé comme réponse Wali666 mardi 26 juin 2018 01:45
    • Marqué comme réponse KimFromPA mardi 26 juin 2018 11:12
    jeudi 7 juin 2018 11:41
  • Simple and Perfect workaround. Hats off..
    vendredi 29 juin 2018 08:38