locked
I have some issues with disabling a button at least one search box is filled with data. RRS feed

  • Question

  • User1216627406 posted

    Greetings experts,

    We have search functionality with 6 input parameters.

    We have a requirement to disable a submit button by default until user enters search value into any of the search boxes.

    Once a value is entered into at least one search box, then the submit button is enabled.

    This works just fine.

    However, I have two problems.

    1, If a user enters a value, then the submit button is enabled.

    If however, the user populates a search box by double-clicking the mouse and selected from auto complete, the submit button is not enabled.

    Any ideas how to fix this?

    Here is my js script:

    <script type="text/javascript">
    
    //function to enable button if six textboxes contain text
    
    function SetButtonStatus(sender, target) {
    var uuid = document.getElementById('<%=suuid.ClientID %>');
    var calllist = document.getElementById('<%=caller_list_id.ClientID %>');
    var phone = document.getElementById('<%=phonenumber.ClientID %>');
    var startdate = document.getElementById('<%=date_start.ClientID %>');
    var enddate = document.getElementById('<%=date_end.ClientID %>');
    var calltype = document.getElementById('<%=call_type.ClientID %>');
    
    //Condition to check whether user enters text in two textboxes or not
    if ((((((sender.value.length >= 3 || uuid.value.length >= 3) || (sender.value.length >= 3 || calllist.value.length >= 3) || (sender.value.length >= 3 || phone.value.length >= 3)  || (sender.value.length >= 3 || startdate.value.length >= 3)  || (sender.value.length >= 3 || enddate.value.length >= 3)  || (sender.value.length >= 3 || calltype.value.length >= 3))))))
    document.getElementById(target).disabled = false;
    else
    document.getElementById(target).disabled = true;
    }
    </script>
    
    //Markup. Just 5 textboxes for this thread
    <tr id="row_1" class="oddRow">
    			   <td>
    				<asp:TextBox id="suuid" style="width:150px;" class="form-control" onkeyup="SetButtonStatus(this,'btnSubmit')" runat="server" />
    			   </td>
    			<td>
                  <asp:TextBox id="caller_list_id" style="width:150px;" class="form-control" onkeyup="SetButtonStatus(this,'btnSubmit')" runat="server" />
    			</td>
    
    			<td>
    				<asp:TextBox id="phonenumber" style="width:150px;" class="form-control" onkeyup="SetButtonStatus(this,'btnSubmit')" runat="server" />
    			</td>
    			<td style="white-space:nowrap;">
    				<asp:TextBox id="date_start" style="width:150px;" class="form-control alignleft" onkeyup="SetButtonStatus(this,'btnSubmit')" runat="server" />
                   <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('date_start','yyyyMMdd','dropdown',true,'24',true)" style="cursor:pointer;"/> 
    		 </td>
    
    			<td>
    			  <asp:TextBox id="date_end" style="width:150px;" class="form-control alignleft" onkeyup="SetButtonStatus(this,'btnSubmit')" runat="server" />
                  <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('date_end','yyyyMMdd','dropdown',true,'24',true)" style="cursor:pointer;"/> 
    		 </td>
    </tr>

    The other problem I have is that the submit button is conflicting with a style sheet.

    For instance, the following stylesheet:

     body .NotDataDisabled {
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 10px;
      padding-left: 10px;
      width: 100%;
      height: 100%;
      background-color: #CF585A !important;
      color: #D8D8D8;
      }

    changes the background color of a link and disables a link if no audio file is found on the server and it works.

    However, it is also changing the dimension and background color of the submit button.

     <asp:Button runat="server" id="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" Enabled="false" />
    

    Any ideas why this is happening?

    Thursday, June 6, 2019 1:33 AM

Answers

  • User665608656 posted

    Hi simflex,

    I’m sorry I misunderstood your meaning. According to your description and the code you provided, we could use this code to solve your issue,  but there are some areas that need to be modified.

    First, you need to modify the inputSelector, you just need to get the element of the input which type are text.

    Then, in the function of “change blur keyup input”, you could set the button to be available by simply judging that the text length in the current input box is greater than three.

    For more details,you could refer to the following code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var inputSelector = "input[type=text]";
                $(document).on("change blur keyup input", inputSelector, function (e) {
                    var validInputs = $(inputSelector).filter(function (index, element) {
                        if (element.value.length >= 3) {
                            document.getElementById("btnSubmit").disabled = false;
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table style="width: 100%;">
                    <tr id="row_1" class="oddRow">
                        <td>
                            <asp:TextBox ID="suuid" Style="width: 150px;" class="form-control" runat="server" />
                        </td>
                        <td>
                            <asp:TextBox ID="caller_list_id" Style="width: 150px;" class="form-control"  runat="server" />
                        </td>
    
                        <td>
                            <asp:TextBox ID="phonenumber" Style="width: 150px;" class="form-control"runat="server" />
                        </td>
                        <td style="white-space: nowrap;">
                            <asp:TextBox ID="date_start" Style="width: 150px;" class="form-control alignleft"runat="server" />
                            <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('date_start','yyyyMMdd','dropdown',true,'24',true)" style="cursor: pointer;" />
                        </td>
    
                        <td>
                            <asp:TextBox ID="date_end" Style="width: 150px;" class="form-control alignleft"  runat="server" />
                            <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('date_end','yyyyMMdd','dropdown',true,'24',true)" style="cursor: pointer;" />
                        </td>
                        <td>
                            <asp:TextBox ID="call_type" Style="width: 150px;" class="form-control alignleft" runat="server" />
                            <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('call_type','yyyyMMdd','dropdown',true,'24',true)" style="cursor: pointer;" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" Enabled="false" /></td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    The result of my work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 11, 2019 5:12 AM

All replies

  • User665608656 posted

    Hi simflex,

    According to your description, I don't know exactly what is written in your NewCssCal() method.

    I guess you want to trigger the NewCssCal() event by clicking img and display some values in the corresponding textbox. Your issue is that in this case it will not trigger the onkeyup event, right?

    If my guess is correct, you could call the public method SetButtonStatus() again in your NewCssCal() event.

    Based on the SetButtonStatus() method you provided, I found that you repeatedly detected textbox objects.

    Your parameter sender refers to the textbox of the current input value, but you also check the value of each textbox control, which is repetitive.

    I suggest that instead of passing parameters, you could directly determine whether the values in each textbox enter more than three characters in the SetButtonStatus() method.

    For your second issue, I can't understand it very well. What is the link mentioned in your article?

    Could you please provide more detailed code about the second issue? That will help us to solve your issue more easierly.

    I did a simple example about your first issue, you could refer to this code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
    
            //function to enable button if six textboxes contain text
    
            function SetButtonStatus() {
                var uuid = document.getElementById('<%=suuid.ClientID %>');
                var calllist = document.getElementById('<%=caller_list_id.ClientID %>');
                var phone = document.getElementById('<%=phonenumber.ClientID %>');
                var startdate = document.getElementById('<%=date_start.ClientID %>');
                var enddate = document.getElementById('<%=date_end.ClientID %>');
                var calltype = document.getElementById('<%=call_type.ClientID %>');
    
                //Condition to check whether user enters text in two textboxes or not
                if (((((uuid.value.length >= 3 || calllist.value.length >= 3 || phone.value.length >= 3 || startdate.value.length >= 3 || enddate.value.length >= 3 || calltype.value.length >= 3)))))
                    document.getElementById("btnSubmit").disabled = false;
                else
                    document.getElementById("btnSubmit").disabled = true;
            }
            function NewCssCal(type, date, isTrue, param, isTrue) {
                $("#" + type).val("2142");// Here is my test code
                SetButtonStatus();
            }
        </script> 
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table style="width: 100%;">
                    <tr id="row_1" class="oddRow">
                        <td>
                            <asp:TextBox ID="suuid" Style="width: 150px;" class="form-control" onkeyup="SetButtonStatus()" runat="server" />
                        </td>
                        <td>
                            <asp:TextBox ID="caller_list_id" Style="width: 150px;" class="form-control" onkeyup="SetButtonStatus()" runat="server" />
                        </td>
    
                        <td>
                            <asp:TextBox ID="phonenumber" Style="width: 150px;" class="form-control" onkeyup="SetButtonStatus()" runat="server" />
                        </td>
                        <td style="white-space: nowrap;">
                            <asp:TextBox ID="date_start" Style="width: 150px;" class="form-control alignleft" onkeyup="SetButtonStatus()" runat="server" />
                            <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('date_start','yyyyMMdd','dropdown',true,'24',true)" style="cursor: pointer;" />
                        </td>
    
                        <td>
                            <asp:TextBox ID="date_end" Style="width: 150px;" class="form-control alignleft" onkeyup="SetButtonStatus()" runat="server" />
                            <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('date_end','yyyyMMdd','dropdown',true,'24',true)" style="cursor: pointer;" />
                        </td>
                        <td>
                            <asp:TextBox ID="call_type" Style="width: 150px;" class="form-control alignleft" onkeyup="SetButtonStatus()" runat="server" />
                            <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('call_type','yyyyMMdd','dropdown',true,'24',true)" style="cursor: pointer;" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" Enabled="false" /></td>
                    </tr>
                </table>
            </div>
        </form>
    </body>

    The result of my work demo:

    Best Regards,

    YongQing.

    Thursday, June 6, 2019 8:27 AM
  • User1216627406 posted

    Hi YongQing,

    I am very sorry for the confusion.

    Let me try clarify.

    When this Listen link (you asked for):

    <asp:HyperLinkField DataNavigateUrlFields="filename,servers" HeaderText="Recording" DataNavigateUrlFormatString="http://it-server1/Archives/{1}/noop_{0}.wav" Text="Listen" /> is displayed, some records have audio files and some don't.

    So, in our code behind, we used Boolean to detect whether a record has audio link.

    If yes, play to listen. If no, disable the link and change the background color to #CF585A and also pad the link.

    This works great. No issues here and that's why I did not provide the link before.

    Here is the css that does that.

     body .aspNetDisabled {
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 10px;
      padding-left: 10px;
      width: 100%;
      height: 100%;
      background-color: #CF585A !important;
      color: #D8D8D8;
      }

     I have another requirement that when page load, disable submit button by default before user performs a search. This code shows that:

    <asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" Enabled="false" />

    Then when a user enters some text of a minimum of three characters, then enable the submit button so user can perform a search.

    This works also.

    The issue is that for some reason, when page loads and submit button is disabled, the submit button is inheriting the CSS  with background color of #CF585A and also all the attributes of the CSS.

    We don't want the Submit button to inherit the attributes of the CSS. In other words, we don't want the Submit button to have any paddings and no background color; just regular button.

    I hope this is clear now.

    The other issue I raised  is that when you enter a value into any of the input boxes, then the submit button is enabled and users can click to search. This is fine.

    However, when a user copies a value and pastes into any of the input boxes, the script does not recognize that the input box has content and therefore, the submit button is enabled.

    It is only enabled when user types the value into input box but not enabled when user either copies the value from somewhere and pastes into any input box.

    How do I resolve this so that whether the value is entered by typing or entered by copying with mouse, the submit button is enabled.

    I hope I have clarified the issues.

    Thanks for your help.

    Thursday, June 6, 2019 1:25 PM
  • User665608656 posted

    Hi simflex,

    For the first issue, aspNetDisabled is the default value of the CSS class used to render HTML elements when disabling controls.

    Using this CSS class, all the disabled controls on your current page will be rendered in this style,and that's why your button is rendered like HyperLinkField.

    If you only want to use this style for eligible controls, you could use a custom CSS class for HyperLinkField to define the style when disabled like this:

    <asp: HyperLinkField Data Navigate UrlFields= "filename, servers" HeaderText= "Recording"
    Data NavigateUrlFormatString= "http://it-server1/Archives/{1}/noop_{0}.wav" Text= "Listen"
    ControlStyle-CssClass= "disableHyperLink" />

    Then change the CSS style to:

       body .disableHyperLink {
                padding-top: 10px;
                padding-right: 20px;
                padding-bottom: 10px;
                padding-left: 10px;
                width: 100%;
                height: 100%;
                background-color: #CF585A !important;
                color: #D8D8D8;
            }


    Here is the result of my simple example :

    On the second issue, you want to enable the button when pasting the copied content into the input box,right?

    If so,I recommend that you use Jquery to listen for the paste event of input, and then call your SetButtonStatus() event in that function.

    It's important to note that pasting text into the input box takes a little time, and it doesn't detect the pasted content immediately, so you need to use a timer to delay your judgement.

    Here is the code,you could refer to it:

     $(function () {
                $('.form-control').on('paste', function () {
                    setTimeout(function () {
                        SetButtonStatus();
                    }, 100);
                });
            });

    The result about the second issue:

    Best Regards,

    YongQing.

    Monday, June 10, 2019 2:22 AM
  • User1216627406 posted

    Hi yongqinq,

    Great solution on the CSS issue.

    Your solution worked superbly. Thank you very much.

    I am still having issues with the mouse click and I also think that you misunderstood me still, maybe a little bit.

    Yes, a user can copy a value from maybe email or word document and paste into any of the search boxes, true.

    However, user can also double-click on the search box and several values you have used before would drop down allowing you to choose from one of those values.

    In any case, copy and paste is not working still and selecting from dropdown of values is not working either.

    How do I use your function?

    I tried creating a separate script like:

    <script type="text/javascript">

    pasted code here

    </script> but it doesn't work.

    Also, here is the script I have been trying to use prior to this solution. I found this script online:

    <script type="text/javascript">
    $(function(){
        var inputSelector = "input:not([type=button]):not([type=submit]):not([type=reset])";
        
        $(document).on("change blur keyup input", inputSelector, function(e){
            var validInputs = $(inputSelector).filter(function(index, element) { return element.value.length >= 3; });
            document.getElementById("btnSubmit").disabled = validInputs.length === 0;
        });
    });
    </script>  

    The issue I have with this script is that when I click on any search box even without selecting a value to search, the search button is activated.

    I want the submit to be activated only if user enters value manually or user selects a value from dropdown with a mouse.

    Can this code be modified?

    Thanks a lot for your help.

    Tuesday, June 11, 2019 1:52 AM
  • User665608656 posted

    Hi simflex,

    I’m sorry I misunderstood your meaning. According to your description and the code you provided, we could use this code to solve your issue,  but there are some areas that need to be modified.

    First, you need to modify the inputSelector, you just need to get the element of the input which type are text.

    Then, in the function of “change blur keyup input”, you could set the button to be available by simply judging that the text length in the current input box is greater than three.

    For more details,you could refer to the following code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var inputSelector = "input[type=text]";
                $(document).on("change blur keyup input", inputSelector, function (e) {
                    var validInputs = $(inputSelector).filter(function (index, element) {
                        if (element.value.length >= 3) {
                            document.getElementById("btnSubmit").disabled = false;
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table style="width: 100%;">
                    <tr id="row_1" class="oddRow">
                        <td>
                            <asp:TextBox ID="suuid" Style="width: 150px;" class="form-control" runat="server" />
                        </td>
                        <td>
                            <asp:TextBox ID="caller_list_id" Style="width: 150px;" class="form-control"  runat="server" />
                        </td>
    
                        <td>
                            <asp:TextBox ID="phonenumber" Style="width: 150px;" class="form-control"runat="server" />
                        </td>
                        <td style="white-space: nowrap;">
                            <asp:TextBox ID="date_start" Style="width: 150px;" class="form-control alignleft"runat="server" />
                            <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('date_start','yyyyMMdd','dropdown',true,'24',true)" style="cursor: pointer;" />
                        </td>
    
                        <td>
                            <asp:TextBox ID="date_end" Style="width: 150px;" class="form-control alignleft"  runat="server" />
                            <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('date_end','yyyyMMdd','dropdown',true,'24',true)" style="cursor: pointer;" />
                        </td>
                        <td>
                            <asp:TextBox ID="call_type" Style="width: 150px;" class="form-control alignleft" runat="server" />
                            <img src="images/cal.gif" class="alignright" onclick="javascript:NewCssCal ('call_type','yyyyMMdd','dropdown',true,'24',true)" style="cursor: pointer;" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" Enabled="false" /></td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    The result of my work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 11, 2019 5:12 AM
  • User1216627406 posted

    WOW, this is absolutely insane!

    This is perfect solution. Everything works perfectly!!!!

    Thank you for your brilliance and patience.

    WOW!

    Tuesday, June 11, 2019 1:16 PM