enable button when certain text fields have values

Question

I have a form with several text fields and I would like the add button to be enabled when the required fields are filled in. The button is disabled by default in the HTML. In Firebug it appears the blur function fires but the that the if statement isn't reached.

$(".cd-form :input").blur(function(){

    var ok=true;
    $("#signup-firstnmame,#signup-surname","#signup-Address1","#signup-City","#signup-Postcode","#signup-Email","#signup-Mobile").each(function(){
       /* if ($(this).val()==="")*/


        if ($('#signup-firstnmame').val() !== "" && $('#signup-surname').val() !== "" && $('#signup-Address1').val() !== "" && $('#signup-City').val() !== "" && $('#signup-Postcode').val() !== "" && $('#signup-Email').val() !== "" && $('#signup-Mobile').val() !== "") 
       $("#AddData").prop("disabled",false);

            else
       $("#AddData").prop("disabled",true);
    });

});

Does the selector match your HTML? I see several typos in it and inconsistencies for case. Please post HTML with the inputs. — jalynn2
– jalynn2, Commented Aug 25, 2016 at 13:31
I'm pretty sure the if statement is being hit. But a console.log into the if and the else and also console.log the value of each of those inputs. Also, there's no need to use each if you're not going to use $(this). You can remove the if entirely I believe, or check the value with $(this) instead of that bloated if statement. — Goose
– Goose, Commented Aug 25, 2016 at 13:32
I would add a class to every field you want to capture, Add a boolean defaulted to true everytime you start your loop. loop them with each, store a false if this.val() is empty. Check if the boolen is still true at the end. Enable if true. That should look better. — Jared Teng
– Jared Teng, Commented Aug 25, 2016 at 13:37

David Hedlund · Accepted Answer · 2016-08-25 13:29:33Z

1

The commas are supposed to be a part of the selector, not separate parameters.

$('#signup-firstname, #signup-surname, #signup-Address1, ...

Also, if you're checking all of the fields, as in your if statement, you don't need to do that once for each field, it'll suffice to do it once.

If you would consider adding a class to the relevant fields, your function would be much more readable, i.e:

$('#AddData').prop('disabled', $('.required-field[val=""]').length > 0);

answered Aug 25, 2016 at 13:29

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike · Accepted Answer · 2016-08-25 14:08:20Z

To Start, I think it would be smart to add a unique class to the inputs that you care about. this way you can do something along the lines of:

$('.yourClass').on('input', function() {
  var x = true;
  $('.yourClass').each(function() {
    this = $(this); //cast it to jQuery obj (ez ref)
    if (this.val() == "")
            x = false;
  } );
} );

Basically, every time someone enters something into the fields, jQuery will iterate through your inputs checking the values and adding 1 to x. If x is equal to the number of elements you are checking then it will enable the button.

This is not the most elegant solution but how I got around the same issue you were having when I was rushed into finishing a project.

Modified my answer with what @JaredT mentioned about the boolean, far more elegant. I am sure this could be improved further though, hope this gets the ball rolling.

Collectives™ on Stack Overflow

enable button when certain text fields have values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related