CODEWITHSUNDEEP
javascriptjqueryhtml
Sean Aslam
Sean Aslam

Reputation: 121

jQuery Disable Search Input Not working

I have a search input which does the following. If the search field is empty the button is disabled (this works fine)

Problem is if the form loads with text inside the search filed, I still have to use a space or backspace or type in order to enable the submit button.

I want the submit button to be enabled if there is value in the search Field when the form loads.

Here is a fiddle: http://jsfiddle.net/sz6aLjoz/

Form: 

<form>
    <input type="text" name="dosearch" id="searchInput" value="test" class="form-control" placeholder="Search...">
    <button name="submit" class="enableOnInput" id="submitBtn" disabled='disabled' type="submit">Search</button>
</form>

JQuery: 

$(function () {
    $('#searchInput').keyup(function () {
        if ($(this).val() == '') { //Check to see if there is any text entered
            //If there is no text within the input ten disable the button
            $('.enableOnInput').prop('disabled', true);
        } else {
            //If there is text in the input, then enable the button
            $('.enableOnInput').prop('disabled', false);
        }
    });
});

Upvotes: 0

Views: 743

Answers (3)

Xanco
Xanco

Reputation: 902

If you bind the input via JQuery, it will automatically detect any changes to the value of "#searchInput". Here's the JavaScript:

$(function () {
    $("#searchInput").bind("change paste keyup", function() {
        if ($(this).val() == '') { //Check to see if there is any text entered
            //If there is no text within the input ten disable the button
            $('.enableOnInput').prop('disabled', true);
        } else {
            //If there is text in the input, then enable the button
            $('.enableOnInput').prop('disabled', false);
        }
    });
});

So now, if there the user has autofill on, or has previously search for something then double clicks on the input the selects a value, the code will check the value of "#searchInput" - so; if the users pastes, if there's a keyup event or if the value changes, the code inside of the bind() will be ran.

Here's the JSFiddle

Upvotes: 0

mlienau
mlienau

Reputation: 813

It's because you started with the button disabled, you can remove the disabled attribute from the button and add this line inside your ready function

$('.enableOnInput').prop('disabled', $('#searchInput').val() == '');

Fiddle here

Upvotes: 0

j08691
j08691

Reputation: 207901

Add a call to trigger .keyup() at the end of your code:

$('#searchInput').keyup(function () {
    if ($(this).val() == '') { //Check to see if there is any text entered
        //If there is no text within the input ten disable the button
        $('.enableOnInput').prop('disabled', true);
    } else {
        //If there is text in the input, then enable the button
        $('.enableOnInput').prop('disabled', false);
    }
}).keyup();

jsFiddle example

This way when the page loads, the event will be triggered as if the user had hit a key, and your code executed.

Upvotes: 2

Related Questions