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