none
Disable the save button based on dropdown choice RRS feed

  • Question

  • Hello,

    I would like to disable the "Save" button for a form when a dropdown equals "In Person" and a School Address text box below it is empty. I'm looking for a solution in JavaScript only. Thanks.

    Mike


    SharePoint Engineer - Mike

    Thursday, April 20, 2017 3:47 PM

All replies

  • Hi,

    Here is my sample code for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function DDLChange() {
                var e = document.getElementById("mySelect");
                var option = e.options[e.selectedIndex].value;
                var school = document.getElementById("txt_School");
                if (option == "In Person" && school.value == "") {
                    document.getElementById("btnSave").disabled = true;
                } else {
                    document.getElementById("btnSave").disabled = false;
                }
            }
        </script>
    </head>
    <body>
        <select onchange="DDLChange()" id="mySelect">
            <option>a</option>
            <option>In Person</option>
            <option>c</option>
        </select>
        <br />
        <input id="txt_School" type="text" />
        <br/>
    
        <input id="btnSave" type="button" value="button" />
    </body>
    </html>

    If you have trouble in finding control ID, you may consider to use jQuery so it would help you get the controls more easily.

    You could check below link for jQuery selectors.

    https://api.jquery.com/category/selectors/

     

    Best Regards,

    Lee


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

    Friday, April 21, 2017 5:53 AM
  • Hi Mike,

    If you want to disable the save button in SharePoint list form using jquery, then you can use the below sample where I have checked for dropdown value. If the value equals Ïn Person", then I have disabled save button and have hidden save button in ribbon.
    If your default choice is "In Person", then perform the same operation on page load too.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("select[title='Schchoice']").change(function() //change the Schchoice with your field name
    {
    var selected = $(this).find("option:selected").text();
    if(selected=="In Person")
    {
    $("input[name*='idIOSaveItem']").attr("disabled","disabled");
    $("a[id='Ribbon.ListForm.Edit.Commit.Publish-Large']").css("display", "none");
    }
    else
    {
    $("input[name*='idIOSaveItem']").attr("disabled",false);
    $("a[id='Ribbon.ListForm.Edit.Commit.Publish-Large']").show();
    }
        });
    });
    </script>

    To check address along with dropdown then add

    var addr=$("input[title='Address']").val();

    and replace

    if(selected=="In Person")

    with

    if((selected=="In Person")&&(addr==""))


    Regards, Sathiya


    Friday, April 21, 2017 7:50 AM
  • Thank you Sathiya. I'll try in the morning and let you know how it works.

    SharePoint Engineer - Mike

    Tuesday, April 25, 2017 4:49 AM
  • I'll rather do this in JavaScript, because I'm trying to use the code against an application which was built using JQuery and using JQuery may cause a conflict. Thanks.

    SharePoint Engineer - Mike

    Tuesday, April 25, 2017 4:53 AM
  • Hi,

    I have shared sample JavaScript script, I hope it would be helpful.

    You could post the issue if any.

    Anyway, You can mark the helpful post as answer to help other community members find the helpful information quickly.

    You can also share your own solution here and mark it as answer, and we can learn from each other.  

    Best Regards,

    Lee


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

    Tuesday, April 25, 2017 6:14 AM