locked
Save button disabled by form field selection RRS feed

  • Question

  • How can I disable the SAVE button on a list new item form, if one of my dropdown fields has a selction of NO.

    Thanks again.

    Thursday, August 4, 2011 12:59 PM

Answers

  • You can use jquery for it. There are two different approaches for it. You can either add PreSaveAction function, that will prevent save button from saving item or you can use dropdown change event to disable button.

    Approach 1:

    function PreSaveAction()
    {
      var myChoiceFieldValue = $("select[title$='MyChoiceField']").val(); // Change to your choice display name
      if(myChoiceFieldValue == 'No')
      {
        alert("Unable to save.");
        return false;  
      }
      return true;
    }
    


    Approach 2:

    _spBodyOnLoadFunctionNames.push("DisableButtonIfChoiceFieldNotValid");
    function DisableButtonIfChoiceFieldNotValid () 
    {
    	$("select[title$='MyChoiceField']").change(function() // Change to your choice field display name
    	{
    		$("input[name$='diidIOSaveItem']").attr("disabled", $(this).val() == 'No');
    	});
    }
    


    Thursday, August 4, 2011 1:43 PM

All replies

  • you can do that through javascript or jquery, 

    function getTagFromIdentifierAndTitle(tagName, identifier, title) { 
         var len = identifier.length; 
         var tags = document.getElementsByTagName(tagName); 
         for (var i=0; i < tags.length; i++) { 
              var tempString = tags[i].id; 
              //if you are not sure what the actual title of your field is, uncomment this alert 
              //alert(tags[i].title); 
              if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) { 
                   return tags[i]; 
              } 
          } 
          return null; 
    }

     

    this function will help you return the object and u can use this to find the dropdown value and disable the save button on value change event.

    Thursday, August 4, 2011 1:20 PM
  • You can use jquery for it. There are two different approaches for it. You can either add PreSaveAction function, that will prevent save button from saving item or you can use dropdown change event to disable button.

    Approach 1:

    function PreSaveAction()
    {
      var myChoiceFieldValue = $("select[title$='MyChoiceField']").val(); // Change to your choice display name
      if(myChoiceFieldValue == 'No')
      {
        alert("Unable to save.");
        return false;  
      }
      return true;
    }
    


    Approach 2:

    _spBodyOnLoadFunctionNames.push("DisableButtonIfChoiceFieldNotValid");
    function DisableButtonIfChoiceFieldNotValid () 
    {
    	$("select[title$='MyChoiceField']").change(function() // Change to your choice field display name
    	{
    		$("input[name$='diidIOSaveItem']").attr("disabled", $(this).val() == 'No');
    	});
    }
    


    Thursday, August 4, 2011 1:43 PM
  • Presave action will work in MOSS forms or ordinary forms in SharePoint not the Ribbon forms i think, may be check it again pls
    Thursday, August 4, 2011 1:46 PM
  • It works in SharePoint 2010 web forms, in both modal dialog and page mode. Not sure what you mean by Ribbon forms.

    That's the standard functionality, it was introduced in SP 2007. PreSaveAction function is called by Save button (you can see it's call if you look into the html markup of the NewForm.aspx page).

    Thursday, August 4, 2011 2:02 PM
  • In Approach 2 where on the code page should this go.

     

     

    Thursday, August 4, 2011 7:41 PM
  • You can put it after your form web part on NewForm.aspx. Just don't forget to take it in <script> tag. Also, remember that you must add reference to jquery.js on your page (or master page).
    Thursday, August 4, 2011 7:45 PM
  • Here is a working sample:

    <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
    <WebPartPages:ListFormWebPart runat="server" __MarkupType="xmlmarkup" WebPart="true" __WebPartId="{F11708BA-37A1-4AF7-91B3-F3E34026E232}" >
    <WebPart xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://schemas.microsoft.com/WebPart/v2">
     <Title>MyList2</Title>
     <FrameType>Default</FrameType>
     <Description />
     <IsIncluded>true</IsIncluded>
     <PartOrder>2</PartOrder>
     <FrameState>Normal</FrameState>
     <Height />
     <Width />
     <AllowRemove>true</AllowRemove>
     <AllowZoneChange>true</AllowZoneChange>
     <AllowMinimize>true</AllowMinimize>
     <AllowConnect>true</AllowConnect>
     <AllowEdit>true</AllowEdit>
     <AllowHide>true</AllowHide>
     <IsVisible>true</IsVisible>
     <DetailLink />
     <HelpLink />
     <HelpMode>Modeless</HelpMode>
     <Dir>Default</Dir>
     <PartImageSmall />
     <MissingAssembly>Невозможно импортировать эту веб-часть.</MissingAssembly>
     <PartImageLarge />
     <IsIncludedFilter />
     <ExportControlledProperties>true</ExportControlledProperties>
     <ConnectionID>00000000-0000-0000-0000-000000000000</ConnectionID>
     <ID>g_f11708ba_37a1_4af7_91b3_f3e34026e232</ID>
     <ListName xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">{ED53FCDD-23EC-4607-B196-5B231108293D}</ListName>
     <ListId xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">ed53fcdd-23ec-4607-b196-5b231108293d</ListId>
     <PageType xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">PAGE_NEWFORM</PageType>
     <FormType xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">8</FormType>
     <ControlMode xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">New</ControlMode>
     <ViewFlag xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">1048576</ViewFlag>
     <ViewFlags xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">Default</ViewFlags>
     <ListItemId xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">0</ListItemId>
     <TemplateName xmlns="http://schemas.microsoft.com/WebPart/v2/ListForm">ListForm</TemplateName>
    </WebPart>
    </WebPartPages:ListFormWebPart>
    </ZoneTemplate></WebPartPages:WebPartZone>
    <script language="JavaScript">
    _spBodyOnLoadFunctionNames.push("DisableButtonIfChoiceFieldNotValid");
    function DisableButtonIfChoiceFieldNotValid () 
    {
    	$("select[title$='MyChoiceField']").change(function() // Change to your choice field display name
    	{
    		$("input[name$='diidIOSaveItem']").attr("disabled", $(this).val() == 'No');
    	});
    }</script>
    
    


    Thursday, August 4, 2011 7:59 PM
  • Ok, I got the code added, but I think I am missing the jquery.js reference.
    Thursday, August 4, 2011 8:04 PM
  • Works perfectly.

    Thursday, August 4, 2011 8:11 PM
  • Can this also be used to do the same thing for the ribbon save button.
    Thursday, August 4, 2011 8:19 PM
  • To do it fast, you can just add another javascript string to your script:

    _spBodyOnLoadFunctionNames.push("DisableButtonIfChoiceFieldNotValid");
    function DisableButtonIfChoiceFieldNotValid () 
    {
    	$("select[title$='MyChoiceField']").change(function() // Change to your choice field display name
    	{
    		$("input[name$='diidIOSaveItem']").attr("disabled", $(this).val() == 'No');
    		$("#Ribbon.ListForm.Edit.Commit.Publish-Large").attr("disabled", $(this).val() == 'No');
    	});
    }
    

    But that won't grey out the ribbon button, it will just disable it.

     

    To grey out ribbon button, you can use more cleaner (and far more complex in development) way: use SP.Ribbon.PageManager object as desribed here: http://blog.mastykarz.nl/sample-code-asynchronously-checking-ribbon-command/

     

    Thursday, August 4, 2011 8:59 PM
  • Thanks a million. That helps so much.
    Friday, August 5, 2011 11:43 AM