Show JavaScript alert if TextBox length greater than two on Button click in JavaScript

Last Reply 3 months ago By dharmendr

Posted 3 months ago

i am working on alpha.dubaiexporters.com.There is one keyword input type. If the user enetered less than 3 characters then after clicking on search button, message should display saying the characters should be more than 3 or more characters.

<div class="header-input-container"><span class="header-input-title">Keyword:</span>
    <input type="text" id="txtkeyword" name="s" runat="server" autocomplete="off"><div class="clearfix"></div>
</div>
<div class="header-input-container"><span class="header-input-title">Category:</span>
    <input type="text" id="txtserach" list="browsers" name="myBrowser" runat="server" autocomplete="off">
     <datalist id="browsers">
  <option value="Automotive"/>
  <option value="Building and Interiors"/>
  <option value="Food, Kitchen and Hotel Supplies"/>
  <option value="Industrial and Machinery"/>
  <option value="Consumer and Household"/>
  <option value="Medical and Healthcare"/>
                     <option value="Printing , Packaging and Plastic"/>
                     <option value="IT / Telecom / Electronics"/>
                     <option value="Oil and Gas"/>
                     <option value="Power and Energy"/>
</datalist> 
<div class="clearfix"></div></div>
    <asp:Button ID="Search" class="dt-header-search-submit dt-button dt-button-danger" style="top:0px;width:226px;height:70px;" Text="Search" runat="server" onclick="doit" OnClientClick="return checkLength();" />
    <script type="text/javascript">
        function checkLength() {
            var textbox = document.getElementById("txtkeyword");
            if (textbox.value.length < 3) {
                alert("The entered input should be 3 or more than 3 characters");
                return false;
            }
        }
    </script>

i want a client side message after clicking on search button. i am not getting the clientside message.

Posted 3 months ago Modified on 3 months ago

Hi chetan,

Change your code with the below code.

HTML

<div class="header-input-container">
    <span class="header-input-title">Keyword:</span>
    <input type="text" id="txtkeyword" name="s" runat="server" autocomplete="off"><div
        class="clearfix" />
    </div>
</div>
<div class="header-input-container">
    <span class="header-input-title">Category:</span>
    <input type="text" id="txtserach" list="browsers" name="myBrowser" runat="server"
        autocomplete="off">
    <datalist id="browsers">
        <option value="Automotive"/>
        <option value="Building and Interiors"/>
        <option value="Food, Kitchen and Hotel Supplies"/>
        <option value="Industrial and Machinery"/>
        <option value="Consumer and Household"/>
        <option value="Medical and Healthcare"/>
        <option value="Printing , Packaging and Plastic"/>
        <option value="IT / Telecom / Electronics"/>
        <option value="Oil and Gas"/>
        <option value="Power and Energy"/>
    </datalist>
    <div class="clearfix">
    </div>
</div>
<asp:Button ID="Search" class="dt-header-search-submit dt-button dt-button-danger"
    Style="top: 0px; width: 226px; height: 70px;" Text="Search" runat="server" OnClick="doit"
    OnClientClick="return checkLength();" />
<script type="text/javascript">
    function checkLength() {
        var textbox = document.getElementById("txtkeyword");
        if (textbox.value.length < 3) {
            alert("The entered input should be 3 or more than 3 characters");
            return false;
        }
    }
</script>

Screenshot