Reputation: 913

how to check if input field is empty

I'm making a form with inputs, if the input type is empty then the button submit is disabled but, if the input fields is with length > 0 the submit button is enabled

<input type='text' id='spa' onkeyup='check()'><br>
<input type='text' id='eng' onkeyup='check()'><br>
<input type='button' id='submit' disabled>

function check() {
  if($("#spa").lenght>0 && $("#eng").lenght>0) {
    $("#submit").prop('disabled', false);
  } else {
    $("#submit").prop('disabled', true);
  }
}

it works but if then I delete for example the content of input spa the button submit is still enabled

Upvotes: 19

Answers (7)

Ravi Gadag

Reputation: 15861

Use trim and val.

var value=$.trim($("#spa").val());

if(value.length>0)
{
 //do some stuffs. 
}

val() : return the value of the input.

trim(): will trim the white spaces.

Upvotes: 42

Pete Uh

Reputation: 630

As javascript is dynamically typed, rather than using the .length property as above you can simply treat the input value as a boolean:

var input = $.trim($("#spa").val());

if (input) {
    // Do Stuff
}

You can also extract the logic out into functions, then by assigning a class and using the each() method the code is more dynamic if, for example, in the future you wanted to add another input you wouldn't need to change any code.

So rather than hard coding the function call into the input markup, you can give the inputs a class, in this example it's test, and use:

$(".test").each(function () {
    $(this).keyup(function () {
        $("#submit").prop("disabled", CheckInputs());
    });
});

which would then call the following and return a boolean value to assign to the disabled property:

function CheckInputs() {
    var valid = false;
    $(".test").each(function () {
        if (valid) { return valid; }
        valid = !$.trim($(this).val());
    });
    return valid;
}

You can see a working example of everything I've mentioned in this JSFiddle.

Upvotes: 7

Kevin Bowersox

Reputation: 94429

This snippet will handle more than two checkboxes in case you decide to expand the form.

$("input[type=text]").keyup(function(){
    var count = 0, attr = "disabled", $sub = $("#submit"), $inputs = $("input[type=text]");  
    $inputs.each(function(){
        count += ($.trim($(this).val())) ? 1:0;
    });
    (count >= $inputs.length ) ? $sub.removeAttr(attr):$sub.attr(attr,attr);       
});

Working Example: http://jsfiddle.net/sr4gq/

Upvotes: 2

RobinV91nl

Reputation: 53

Why don't u use:

<script>
$('input').keyup(function(){
if(($('#eng').val().length > 0) && ($('#spa').val().length > 0))
    $("#submit").prop('disabled', false);
else
    $("#submit").prop('disabled', true);
});
</script>

Then delete the onkeyup function on the input.

Upvotes: 4