CODEWITHSUNDEEP
phpjqueryformssearch
user2853409
user2853409

Reputation: 17

Not submitting the search form if the input is empty

I have a search form and am stuck in one small thing & the issue is:

Please suggest the most efficient way using jQuery or php.

Thank you in advance.

Happy Coding

<!--Search form-->
<div id="searchbar">
    <form method='GET' action='search.php'>
<input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
</form>
</div>

Upvotes: 1

Views: 6220

Answers (8)

Wael Assaf
Wael Assaf

Reputation: 1303

You can just use required attribute

<input type="text" placeholder="Search Database" name="searchkey" id="searchkey" required="required"/>

Upvotes: 0

Neethu George
Neethu George

Reputation: 597

Using .submit() handler

<div id="searchbar">
<form method='GET' action='search.php' id='formdata'>
<input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
<input type="submit" value="search" id="search">
</form>
</div>

$(document).ready(function()
$( "#formdata" ).submit(function( event ) {
//alert( "Handler for .submit() called." );
 if($('#searchkey').val() === ''){
    event.preventDefault();  
    }
    else {
    alert($('#searchkey').val());
    } 

  });
});

I have included an additional submit button in the second ans

<div id="searchbar">
<form method='GET' action='search.php'>
<input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
<input type="submit" value="search" id="search">
</form>
</div>

<script type="text/javascript" src="script/jquery.js"></script> //include jquery.js
<script type="text/javascript">
$(document).ready(function(){
    $('#search').on('click',function(){
          if($.trim($('#searchkey')).val() == '')
         {
          alert("No search Keyword"); 
          return false;
         }
        else {
          alert("search Keyword"); 
          return true;
        }

    })
});
</script>

I have used trim() function to remove the whitespaces at beginning and end of search string

<div id="searchbar">
<form method='GET' action='search.php' id='formdata'>
<input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
<input type="submit" value="search" id="search">
</form>
</div>

<script type="text/javascript" src="script/jquery.js"></script> //include jquery.js
<script type="text/javascript">
$(document).ready(function(){
    $('#formdata').submit(function(){
     if($.trim($('#searchkey').val()) == '')
     {
       alert("No search Keyword");
       return false;
     }
    else 
    {
     alert($('#searchkey').val());
     return true;
    }     
  })
});
</script>

Upvotes: 0

Mehul Bawadia
Mehul Bawadia

Reputation: 44

Original code:

<!--Search form-->
<div id="searchbar">
  <form method='GET' action='search.php'>
    <input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
  </form>
</div>

Edited Code:

<!--Search form-->
<div id="searchbar">
  <form method='GET' action='search.php'>
    <input type="search" placeholder="Search Database" name="searchkey" id="searchkey" requierd />
  </form>
</div>

Just add the attribute 'required' in the input element of the search box and done.. This 2 things are added in HTML 5 i.e., type='search' and required. Secondly, to enable this, your browser needs to be updated to the latest version.

Upvotes: 1

Rituraj ratan
Rituraj ratan

Reputation: 10378

html 

<div id="searchbar">
        <form method='GET' action='search.php'>
    <input type="text" placeholder="Search Database" name="searchkey" id="searchkey" />
    </form>
    </div>

script

$(document).ready(function(){
$(form).submit(function(){

if( $.trim($("#searchkey").val()) == "")
{
return false; // if in input no value then form not submit
}
return true;
});


});

reference submit and trim

Upvotes: 0

Nibin
Nibin

Reputation: 3960

Place tis code in the head of your html or php page.Hope this might help you... :)

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $( document ).ready(function() {
        input_value = $.trim($('#searchkey').val());
        if(input_value == ''){
           alert('Enter some value');
           return false;  //Does not submit the form 
        }else{
          //perform your code if it should not be empty. 
       }
    });
</script>
</head>

The $.trim() function removes all newlines, spaces (including non-breaking spaces), and tabs from the beginning and end of the supplied string. If these whitespace characters occur in the middle of the string, they are preserved.

Upvotes: 1

Nes
Nes

Reputation: 304

Try below: 

$(function(){
$("#search_data").submit(function() {

    if($.trim($("#searchkey").val()) != '')
        return true;

    return false;
});
});

Upvotes: 0

Pragnesh Chauhan
Pragnesh Chauhan

Reputation: 8476

you should check value of searchbox on submit

$(document).ready(function() {
  $('form').submit(function(e){
    if($.trim($('#searchkey').val()) == ""){
        alert("please enter search value");
        return false;
    }
  });
});

Upvotes: 0

rohitr
rohitr

Reputation: 371

 <div id="searchbar">
<form method='GET' action='search.php' onsubmit="return validate()" >
    <input type="text" placeholder="Search Database" name="searchkey" id="searchkey"/>

   <input type="submit" value="submit">
</form>
</div>

<script type="text/javascript">
 function validate()
 {
    if(document.getElementById('searchkey').value == "")
        {
            alert("fill db");
            return false;
        }
}

</script>

Upvotes: 0

Related Questions