Remove From My Forums

Disabling Search Button No Longer Working

Question

User1216627406 posted

Greetings again,

Yesterday, with the help of Yongqing (Thanks again), I was able to integrate jQuery datepicker with special date formatting.

This works great now.

However, as a result of replacing an existing datepicker with this new one, a JS that disables Search button until at least one of the search boxes has a minimum of 3 characters no longer works.

Our requirement here is threefold.

User must enter a value with at least 3 characters into any of the six search boxes.

User can do this by entering the values manually.

This works

User can also enter value by double-clicking the box and choosing from one of the previously populated info from the drop down.

This works as well.

In the case of entering date values, user can select from the bootstrap date picker.

This is where I am having issues.

If you select date values by clicking the calendar icon and choosing date values from that, the search box remains disable.

Can I get some assistance on this, please?

Here is the complete code I am using.

Many thanks again.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="qpcdr" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Microlog</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge, IE=8, IE=9, IE=10, IE11,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" media="screen"
        href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  

    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
            background-color: #fff;
        }
        table th
        {
            background-color: #B8DBFD;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border: 1px solid #ccc;
        }
        table, table table td
        {
            border: 0px solid #ccc;
        }
    </style>
    <style type="text/css">
        .modal
        {
            ;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            min-height: 100%;
            width: 100%;
        }
        .loading
        {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            ;
            background-color: White;
            z-index: 999;
        }
    </style>
    <style type="text/css">
       .aspNetDisabled {
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 10px;
            padding-left: 10px;
            width: 100%;
            height: 100%;
            background-color: #CF585A !important;
            color: #D8D8D8;
          }
    </style>
              <!--[if !IE]><!-->
              <style>
              
              /* 
              Max width before this PARTICULAR table gets nasty
              This query will take effect for any screen smaller than 760px
              and also iPads specifically.
              */
              @media 
              only screen and (max-width: 760px),
              (min-device-width: 768px) and (max-device-width: 1024px)  {
              
                             /* Force table to not be like tables anymore */
                             table, thead, tbody, th, td, tr { 
                                           display: block; 
                             }
                             
                             /* Hide table headers (but not display: none;, for accessibility) */
                             thead tr { 
                                           ;
                                           top: -9999px;
                                           left: -9999px;
                             }
                             
                             tr { border: 1px solid #ccc; }
                             
                             td { 
                                           /* Behave  like a "row" */
                                           border: none;
                                           border-bottom: 1px solid #eee; 
                                           ;
                                           padding-left: 50%; 
                             }
                             
                             td:before { 
                                           /* Now like a table header */
                                           ;
                                           /* Top/left values mimic padding */
                                           top: 6px;
                                           left: 6px;
                                           width: 45%; 
                                           padding-right: 10px; 
                                           white-space: nowrap;
                             }
                             
                             /*
                             Label the data
                             */
                             td:nth-of-type(1):before { content: "Dialed Phone Number"; }
                             td:nth-of-type(2):before { content: "Caller ID"; }
                             td:nth-of-type(3):before { content: "Call List ID"; }
                             td:nth-of-type(4):before { content: "Start Time"; }
                             td:nth-of-type(5):before { content: "Connect Time"; }
                             td:nth-of-type(6):before { content: "End Time"; }
                             td:nth-of-type(7):before { content: "Duration"; }
                             td:nth-of-type(8):before { content: "Full Duration"; }
                             td:nth-of-type(9):before { content: "Camp Name"; }
                             td:nth-of-type(10):before { content: "Queue Name"; }
                             td:nth-of-type(11):before { content: "Call Type"; }
                             td:nth-of-type(8):before { content: "Employee"; }
                             td:nth-of-type(9):before { content: "ISDN Cause Code"; }
                             td:nth-of-type(10):before { content: "Disposition"; }
                             td:nth-of-type(11):before { content: "Telephony Server"; }
                             td:nth-of-type(8):before { content: "Trunk Name"; }
                             td:nth-of-type(9):before { content: "UUID"; }
                             td:nth-of-type(10):before { content: "Recording"; }
                             td:nth-of-type(10):before { content: "Show Details"; }
              }
              
              /* Smartphones (portrait and landscape) ----------- */
              @media only screen
              and (min-device-width : 320px)
              and (max-device-width : 480px) {
                             body { 
                                           padding: 0; 
                                           margin: 0; 
                                           width: 320px; }
                             }
              
              /* iPads (portrait and landscape) ----------- */
              @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
                             body { 
                                           width: 495px; 
                             }
              }
              
              </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }
        $('form').live("submit", function () {
            ShowProgress();
        });

    </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>

 <style type="text/css">
      .alignleft {
	   float: left;
      }
     .alignright {
	  float: right;
      vertical-align:middle !important;
      display: inline-block;
      margin-left: 1px;
      margin-top: 9px;
      }  
.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}
    </style>
</head>
<body>
    <script type="text/javascript"
        src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script type="text/javascript"
        src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
        src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
        src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
    </script>
     <form id="form1" runat="server">
       <img src="images/ucoMicrologBanner.png" style="width:100%;" alt="" />
       <div id="imgsrc" class="nav-justified">
         <span class="Center" style="font-size: 1.5em;">Search by one or more of the fields below.</span><br />
           <table class="Center" runat="server">
 	     <tr id="row_0" class="evenRow">
			   <th>UUID</th>
		       <th>Call List ID</th>
		       <th>Phone Number</th>
			   <th>Start Date</th>
			   <th>End Date</th>
			   <th>Call Type</th>
		</tr>
		<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;">
                             <div id="date_start" class="input-append date">
                              <asp:TextBox ID="date_start" Style="width: 150px;" class="form-control" runat="server" />
                              <span class="add-on">
                               <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                              </span>
                           </div>
                            <script type="text/javascript">
                               $(function () {
                               $('#date_start').datetimepicker({
                               format: 'yyyy-MM-dd hh:mm:ss',
                              });
                             })
                            </script>
                           </td>

			   <td style="white-space:nowrap;">
                             <div id="date_end" class="input-append date">
                              <asp:TextBox ID="date_end" Style="width: 150px;" class="form-control" runat="server" />
                              <span class="add-on">
                               <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                              </span>
                             </div>
                              <script type="text/javascript">
                                 $(function () {
                                 $('#date_end').datetimepicker({
                                 format: 'yyyy-MM-dd hh:mm:ss',
                                });
                               })
                             </script>
		        </td>
			<td>
			  <asp:DropDownList id="call_type" runat="server">
		        <asp:ListItem SELECTED="True" value="">All</asp:ListItem>
		        <asp:ListItem value="0" Text="0 ">Unknown</asp:ListItem>
		        <asp:ListItem value="1" Text="1">Outbound Progressive</asp:ListItem>
		        <asp:ListItem value="2" Text="2">Outbound Predictive</asp:ListItem>
		        <asp:ListItem value="3" Text="4">Inbound</asp:ListItem>
		        <asp:ListItem value="4" Text="8">Blaster</asp:ListItem>
		        <asp:ListItem value="5" Text="16">Personal Inbound</asp:ListItem>
		        <asp:ListItem value="6" Text="32">Nailin</asp:ListItem>
		        <asp:ListItem value="7" Text="64">External Transfer</asp:ListItem>
		        <asp:ListItem value="8" Text="128">PBX Outbound</asp:ListItem>
		        <asp:ListItem value="9" Text="256">PBX Inbound</asp:ListItem>
		        <asp:ListItem value="10" Text="512">Snoop</asp:ListItem>
                      </asp:DropDownList>
		     </td>
		  </tr>
                </table>

                <p><asp:GridView id="gvCustomers" runat="server" Class="Center" AllowPaging="true" AutoGenerateColumns="False" style="font-size:0.8125em;" OnPageIndexChanging="OnPageIndexChanging" PageSize="10" EmptyDataText="This report contains no data." OnRowDataBound="gvCustomers_RowDataBound"  OnDataBound="OnDataBound">
                  <columns>
                    <asp:BoundField HeaderText="Dialed Phone Number" DataField="phone_number" />
                    <asp:BoundField HeaderText="Caller ID" DataField="callerid" />
                    <asp:BoundField HeaderText="Call List ID" DataField="call_list_id" />
                    <asp:BoundField HeaderText="Start Time" DataField="startttime" />
                    <asp:BoundField HeaderText="Connect Time" DataField="connecttime" />
                    <asp:BoundField HeaderText="End Time" DataField="endtime" />
                    <asp:BoundField HeaderText="Duration" DataField="duration" />
                    <asp:BoundField HeaderText="Full Duration" DataField="fullduration" />
                    <asp:BoundField HeaderText="Campaign Name" DataField="campName" />
                    <asp:BoundField HeaderText="Queue Name" DataField="queueName" />
                    <asp:BoundField HeaderText="Call Type" DataField="call_type" />
                    <asp:BoundField HeaderText="Employee" DataField="employee" />
                    <asp:BoundField HeaderText="ISDN Cause Code" DataField="cause_code" />
                    <asp:BoundField HeaderText="Disposition" DataField="call_termination_type" />
                    <asp:BoundField HeaderText="Telephony Server" DataField="telephonyservers" />
                    <asp:BoundField HeaderText="Trunk Name" DataField="trunk_name" />
                    <asp:BoundField HeaderText="UUID" DataField="uuid" />
                    <asp:TemplateField HeaderText="Recording">
                     <ItemTemplate>
                      <asp:HyperLink runat="server" id="HyperLink1" 
                      NavigateUrl='<%#String.Format("http://servername/Archives/{1}/snoop_{0}.wav", Eval("uuid"), Eval("telephonyservers")) %>'
                      Enabled='<%# RecordingExists(Eval("uuid", "{0}"), Eval("telephonyservers", "{0}")) %>' ToolTip='<%# If(RecordingExists(Eval("uuid", "{0}"), Eval("telephonyservers", "{0}")), "Play recording", "No audio found") %>' Target="_blank" Text="Listen" />
                     </ItemTemplate>
                    </asp:TemplateField>
                    <asp:HyperLinkField HeaderText="Details" DataNavigateUrlFields="uuid" DataNavigateUrlFormatString="qpcdr_details.aspx?uuid={0}" Text="Show Details" />
                </columns>
            </asp:GridView>
            <br />
            <p><asp:Label ID="lblTotal" runat="server" class="Center" />
            </p>
               <div style="text-align: center;">
               <asp:Button runat="server" id="btnSubmit" style="width:120px;padding: 0; border:0;border-width:thin; background-color:#78BE02 !important;color: #333; height:30px; border-style:solid;" Text="Generate Report" OnClick="btnSubmit_Click" Enabled="false" />
               <asp:Button runat="server" id="btnExport" style="width:120px;padding: 0; border: 0;border-width:thin;background-color:#78BE02 !important;color: #333; height:30px; border-style:solid;" Text="Export to CSV" OnClick="btnExport_Click" UseSubmitBehavior="false" />
               <asp:Button runat="server" id="btnReset" style="width:120px;padding: 0; border: 0;border-width:thin;background-color:#78BE02 !important;color: #333; height:30px; border-style:solid;" Text="Clear" OnClick="btnReset_Click" UseSubmitBehavior="false" />
             </div>
            <div class="loading" align="center">
             Loading. Please wait.<br />
             <br />
            <img src="images/loader.gif" alt="" />
          </div>
           </div>
        </form>
    </body>
</html>

Friday, June 28, 2019 12:50 AM

Answers

User665608656 posted

Hi simflex,

According to your code and requirement, I recommend that when you click the Expansion Calendar button (that is span tag which class is add-on), add a timer to monitor the valueof your textbox at a very short interval.

If you choose a date, that is, the content of the textbox has changed and when the length is longer than three, then enable the button and delete the timer.

In addition,I found that you set the ID of the div and the textbox used to select date to the same, which would cause problems in judging whether the textbox content is valuable, so I suggest that you set them as I modify them below.

<td style="white-space: nowrap;">
                        <div id="date_start" class="input-append date">
                            <asp:TextBox ID="date_start1" Style="width: 150px;" class="form-control" runat="server" />
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#date_start').datetimepicker({
                                    format: 'yyyy-MM-dd hh:mm:ss',
                                });
                            })
                        </script>
                    </td>

                    <td style="white-space: nowrap;">
                        <div id="date_end" class="input-append date">
                            <asp:TextBox ID="date_end1" Style="width: 150px;" class="form-control" runat="server" />
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#date_end').datetimepicker({
                                    format: 'yyyy-MM-dd hh:mm:ss',
                                });
                            })
                        </script>
                    </td>

  <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;
                    }
                });
            });
            var timer;
            $(".add-on").click(function () {
              timer = self.setInterval("clock()", 1000);
            });

        });
        function clock() {
            if (document.getElementById("date_start1").value != undefined && document.getElementById("date_start1").value.length >= 3) {
                document.getElementById("btnSubmit").disabled = false;
                clearInterval(timer);
            }
            if (document.getElementById("date_end1").value != undefined && document.getElementById("date_end1").value.length >= 3) {
                document.getElementById("btnSubmit").disabled = false;
                clearInterval(timer);
            }
        }
    </script>

Best Regards,

YongQing.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, June 28, 2019 3:04 AM

User665608656 posted

Hi simflex,

Yes, you can do that.

But you need to change the place in the front-end code that was originally date_start or date_end to date_start1 or date_end1 like below:

 function clock() {
            if (document.getElementById("date_start").value != undefined && document.getElementById("date_start").value.length >= 3) {
                document.getElementById("btnSubmit").disabled = false;
                clearInterval(int);
            }
            if (document.getElementById("date_end").value != undefined && document.getElementById("date_end").value.length >= 3) {
                document.getElementById("btnSubmit").disabled = false;
                clearInterval(int);
            }
        }

  <td style="white-space: nowrap;">
                        <div id="date_start1" class="input-append date">
                            <asp:TextBox ID="date_start" Style="width: 150px;" class="form-control" runat="server" />
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#date_start1').datetimepicker({
                                    format: 'yyyy-MM-dd hh:mm:ss',
                                });
                            })
                        </script>
                    </td>

                    <td style="white-space: nowrap;">
                        <div id="date_end1" class="input-append date">
                            <asp:TextBox ID="date_end" Style="width: 150px;" class="form-control" runat="server" />
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#date_end1').datetimepicker({
                                    format: 'yyyy-MM-dd hh:mm:ss',
                                });
                            })
                        </script>
                    </td>

Best Regards,

YongQing.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, June 28, 2019 5:11 AM

0

Sign in to vote
User475983607 posted

Move var timer to global scope.

<script type="text/javascript"> var timer; $(function () {

Or place the clock function inside the ready handler.

$(function() { ... function clock() { } });
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, July 1, 2019 2:38 PM

All replies

User665608656 posted

Hi simflex,

If you choose a date, that is, the content of the textbox has changed and when the length is longer than three, then enable the button and delete the timer.

<td style="white-space: nowrap;">
                        <div id="date_start" class="input-append date">
                            <asp:TextBox ID="date_start1" Style="width: 150px;" class="form-control" runat="server" />
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#date_start').datetimepicker({
                                    format: 'yyyy-MM-dd hh:mm:ss',
                                });
                            })
                        </script>
                    </td>

                    <td style="white-space: nowrap;">
                        <div id="date_end" class="input-append date">
                            <asp:TextBox ID="date_end1" Style="width: 150px;" class="form-control" runat="server" />
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#date_end').datetimepicker({
                                    format: 'yyyy-MM-dd hh:mm:ss',
                                });
                            })
                        </script>
                    </td>

  <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;
                    }
                });
            });
            var timer;
            $(".add-on").click(function () {
              timer = self.setInterval("clock()", 1000);
            });

        });
        function clock() {
            if (document.getElementById("date_start1").value != undefined && document.getElementById("date_start1").value.length >= 3) {
                document.getElementById("btnSubmit").disabled = false;
                clearInterval(timer);
            }
            if (document.getElementById("date_end1").value != undefined && document.getElementById("date_end1").value.length >= 3) {
                document.getElementById("btnSubmit").disabled = false;
                clearInterval(timer);
            }
        }
    </script>

Best Regards,

YongQing.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, June 28, 2019 3:04 AM

0

Sign in to vote

User1216627406 posted

WOW, what a super JS guru.

Thank you very much.

Just one follow up question.

On the <div...>, can I change ID from date_start to date_start1 and on the textbox, change from date_start1 to date_start?

Same with date_end?

Reason is all the references from my VB to markup are date_start and date_end.

This way, I would not have to change all the textbox IDs on the VB.

If this is not possible, then I suppose I can change them all on the VB.

Many thanks for your expertise and help

Friday, June 28, 2019 3:21 AM

User665608656 posted

Hi simflex,

Yes, you can do that.

But you need to change the place in the front-end code that was originally date_start or date_end to date_start1 or date_end1 like below:

 function clock() {
            if (document.getElementById("date_start").value != undefined && document.getElementById("date_start").value.length >= 3) {
                document.getElementById("btnSubmit").disabled = false;
                clearInterval(int);
            }
            if (document.getElementById("date_end").value != undefined && document.getElementById("date_end").value.length >= 3) {
                document.getElementById("btnSubmit").disabled = false;
                clearInterval(int);
            }
        }

  <td style="white-space: nowrap;">
                        <div id="date_start1" class="input-append date">
                            <asp:TextBox ID="date_start" Style="width: 150px;" class="form-control" runat="server" />
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#date_start1').datetimepicker({
                                    format: 'yyyy-MM-dd hh:mm:ss',
                                });
                            })
                        </script>
                    </td>

                    <td style="white-space: nowrap;">
                        <div id="date_end1" class="input-append date">
                            <asp:TextBox ID="date_end" Style="width: 150px;" class="form-control" runat="server" />
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                        <script type="text/javascript">
                            $(function () {
                                $('#date_end1').datetimepicker({
                                    format: 'yyyy-MM-dd hh:mm:ss',
                                });
                            })
                        </script>
                    </td>

Best Regards,

YongQing.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, June 28, 2019 5:11 AM

0

Sign in to vote

User1216627406 posted

Thank you so very much Yongqing,

Just one bug, I am struggling to fix.

As soon as I selected a date from the calendar, I get "timer is undefined" error and error line is under function clock() on this line:

clearInterval(timer);

I have made sure to change from date_start1 and date_end to date_start and date_end respectively under function clock() and then removed the 1 from the javascript and the textboxes and also added 1 to the <divs>.

Not sure how to fix this.

Friday, June 28, 2019 1:40 PM
0

Sign in to vote
User665608656 posted

Hi simflex,

According to your description, the reason for this error is that you have not defined timer.

You can refer to this link https://forums.asp.net/post/6268216.aspx, which is my penultimate reply.

I suggest you can carefully check the code I provided to you, did you forget to add it :

var timer;

If you're sure you've added this, but there's still a problem, I suggest you can give me your detailed code, which will help us find out the cause of the issue simpler.

Best Regards,

YongQing.
Monday, July 1, 2019 1:48 AM

User1216627406 posted

Hi YongQing,

No I did not forget to add var timer;

In fact I copied your script as is and that's what's weird with the error.

Here is your exact script as I am currently using it:

  <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;
                    }
                });
            });
            var timer;
            $(".add-on").click(function () {
              timer = self.setInterval("clock()", 1000);
            });

        });
        function clock() {
            if (document.getElementById("date_start").value != undefined && document.getElementById("date_start").value.length >= 3) {
                document.getElementById("btnSubmit").disabled = false;
                clearInterval(timer);
            }
            if (document.getElementById("date_end").value != undefined && document.getElementById("date_end").value.length >= 3) {
                document.getElementById("btnSubmit").disabled = false;
                clearInterval(timer);
            }
        }
    </script>

Monday, July 1, 2019 2:31 PM

0

Sign in to vote
User475983607 posted

Move var timer to global scope.

<script type="text/javascript"> var timer; $(function () {

Or place the clock function inside the ready handler.

$(function() { ... function clock() { } });
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, July 1, 2019 2:38 PM
0

Sign in to vote

User1216627406 posted

Thanks mgebhard,

Your first suggestion, moving to global scope fixed it.

Thanks a lot.

Monday, July 1, 2019 3:59 PM

Answered by:

Disabling Search Button No Longer Working

Question

Answers

All replies