how to enable button in jquery if all textfields has value

Question

Im trying to disable my Graph Button when values are empty in ALL the textfield that i have.. and if all the textfields has values it will be enabled. It worked fine for me but whenever i click the Add Entry button to append a new Textfields Graph button will still be enabled even though Textfields are empty, it happens everytime i fill up all textfields and it will enable and when i click Graph button it will show another empty textfields but Graph button is still enabled. here is my code

In HTML

<body>
    <button id="myBtn" class="btn">Add Entry</button>
    <div id="myForm"></div>
    <br/>
    <button id="btnGraph" class="btn">Graph</button>
</body>

In Jquery

$(document).ready(function()
{
$("#myBtn").click(function()
{

    addCountry();

    $("input[class^='text']").keyup(function(e) 
    {
        var alltxt = $("input[class^='text']").length;
        var empty = true;
        $("input[class^='text']").each(function(i)
        {
            if($(this).val()=='')
            {
                empty=true;
                $('#btnGraph').prop('disabled', true);
                return false;
            }
            else
            {
                empty=false;
            }
        });
        if(!empty) 
            $('#btnGraph').prop('disabled', false);   
    });
});
});

You shouldn't be binding event handlers inside another event handler. Every time you add a country, all the previous countries will get multiple `keyup` handlers. Use event delegation: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Oct 30 '14 at 12:20

Bhushan Kawadkar · Accepted Answer · 2014-10-30T12:51:15.057

0

Try this : You need not to bind keyup event to input when you click myBtn. Use .filter() to iterate all input and check the value of it for setting empty flag.

$(document).ready(function()
    {
    $("#myBtn").click(function()
    {
        addCountry();

    });

    $(document).on("keyup blur", "input[class^='text']", function(){
         var empty = false;
         $("input[class^='text']").filter(function()
         {
                if($(this).val().trim()=='')
                   empty = true;      
         });


         $('#btnGraph').prop('disabled', empty);
    });

  });

DEMO

edited Oct 30 '14 at 12:51

answered Oct 30 '14 at 12:13

Bhushan Kawadkar

28,279
5
35
57

it enables the Graph Button if it is empty or not – Oct 30 '14 at 12:16
You want to disable Graph button if any of the input box is empty and enable button when all are filled, right? – Bhushan Kawadkar Oct 30 '14 at 12:18
ive tried it also.. this time it will disable the button whether it has values or empty – Oct 30 '14 at 12:30
can you share a jsfiddle link with your problem statement. – Bhushan Kawadkar Oct 30 '14 at 12:32
In this case your button will always be disabled because you are adding new input box which is empty and then checking all input box if empty which will be true always. What is your requirement, you want to add input box and enable Graph button on click of button or you want to enable Graph button on `keyup` event of input box? – Bhushan Kawadkar Oct 30 '14 at 12:41
i want to enable the Graph Button if ALL of the Textfields has a value, even after i add again another Textfields it should go back to disabled mode.. it will only be enabled if the two textfields that was added has a values on it – Oct 30 '14 at 12:47
Then in that case you have to add `input` on `myBtn` click and keep `keyup` event to enable / disable Graph button. Please check my updated answer. – Bhushan Kawadkar Oct 30 '14 at 12:51
it also do what i originally posted when adding a new Textfield that is empty the Graph button is still enabled,instead of disabled – Oct 30 '14 at 12:56
You can keep Graph button disabled initially by putting `disabled="true"`, see [this](http://jsfiddle.net/f9L1eo3g/3/) – Bhushan Kawadkar Oct 30 '14 at 13:00
it worked! i tried adding $('#btnGraph').prop('disabled', true); before addCountry(); thanks a lot men! appreciate your help and patience – Oct 30 '14 at 13:04

score 0 · Answer 2 · answered Oct 30 '14 at 12:38

You need to check the value in the click and in the keyup. Try something like this.

function CheckInput() {
    var alltxt = $("input[class^='text']").length;
    var empty = true;
    $("input[class^='text']").each(function(i)
    {
        if($(this).val()=='')
        {
            empty=true;
            $('#btnGraph').prop('disabled', true);
            return false;
        }
        else
        {
            empty=false;
        }
    });
    if(!empty) 
        $('#btnGraph').prop('disabled', false); 
}

$("#myBtn").click(function()
{

    addCountry();
    // Make sure you don't bind the keyup multiple time
    $("input[class^='text']").unbind('keyup').keyup(function(e)  
    {
        CheckInput();      
    } 
    CheckInput();
});

tried it also and now when clicking the Add Entry it wont show anything — , Oct 30 '14 at 12:50

how to enable button in jquery if all textfields has value

2 Answers2