phphtmlsearch-box

Disable search button when there is no input


This is my search box

     <div id="search1"  style="margin:0;">
        <form action="<?php bloginfo('url'); ?>"  method="get">
          <input class="search-pishrafte1" name="s" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" type="text">
          <input class="searchsubmit" value="" type="submit">
        </form>
      </div>

right now if i click on submit it will search for text:"search" I want to disable it , i dont want the button to work when user didnt type anything

I tried this : Disable button whenever a text field is empty dynamically but didnt work


Solution

  • If using jQuery, I coded with hide() and show() functions
    So will show button after input text or deleted button if empty input

    I have code like that:

    $(document).ready(function() {
      $('.searchsubmit').hide();
      $('input[type="text"].search-pishrafte1').keyup(function() {
        if ($(this).val() != '') {
          $('.searchsubmit').show();
        } else {
          $('.searchsubmit').hide();
        }
      });
    });
    

    And deleted your code in:

    onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"
    

    Here example

    $(document).ready(function() {
      $('.searchsubmit').hide();
      $('input[type="text"].search-pishrafte1').keyup(function() {
        if ($(this).val() != '') {
          $('.searchsubmit').show();
        } else {
          $('.searchsubmit').hide();
        }
      });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="search1" style="margin:0;">
      <form action="<?php bloginfo('url'); ?>" method="get">
        <input class="search-pishrafte1" name="s" placeholder="Search" type="text">
        <input class="searchsubmit" value="Submit" type="submit">
      </form>
    </div>

    UPDATED

    I'm added if using a javascript with `disabled` function.
    Here is code for javascript:
    let button = document.getElementById("search-btn")
    let input = document.getElementById("input-search")
    
    input.addEventListener("input", function(e) {
    if(input.value.length == 0) {
      button.disabled = true
     } else {
      button.disabled = false
     }
    })
    

    In this code need addEventListener into input for detect input if typing

    let button = document.getElementById("search-btn")
    let input = document.getElementById("input-search")
    input.addEventListener("input", function(e) {
        if(input.value.length == 0) {
        button.disabled = true
      } else {
        button.disabled = false
      }
    })
    <div id="search1"  style="margin:0;">
            <form action="<?php bloginfo('url'); ?>"  method="get">
              <input id="input-search" class="search-pishrafte1" name="s" placeholder="Search" type="text" required="required" />
              <input id="search-btn" class="searchsubmit" value="Submit" type="submit" disabled>
            </form>
          </div>

    Then if you want if i click on submit it will search for text:"search" I want to disable it. You need a changed a value in input to placeholder.