Make a submit clickable after validations are met

Question

I have the following html:

<p>Genre: {{ create_production_form.genre }}</p>
<p>Privacy: {{ create_production_form.privacy }}</p>
<p><input type="submit" name="next" value="Next" disabled="disabled"></p>

How would I make the next button clickable only after Genre and Privacy are filled in? For example, something like:

if ($("id_genre").val() && $("id_privacy").val()) {
    $("input[name=next]").attr("disabled","")
}

The only thing is, it'd need to be 'live', so it can detect when all these fields are filled in.

Like [this](http://stackoverflow.com/questions/1594952/jquery-disable-enable-submit-button)? — Belladonna, May 24 '12 at 03:14

score 1 · Accepted Answer · answered May 24 '12 at 03:14

Wut? The 'event' handles the delegation, so the 'event handler' needs to have live() or on() depending on the version of jQuery you're using. This means that an essential piece of the equation has been left out.

The 'event' methods I'm speaking of are submit, change or click. You must delegate the code to one of these events -- using the aforementioned live() or on() methods.

Otherwise, if you're just simply looking to enable them if data has been fille din.

$('form :input').change(function(){
  if ($("id_genre").val() && $("id_privacy").val()) {
    $("input[name=next]").attr("disabled","")
  }
});

This wil check the form to see if the inputs change, if they do, it will test the values and you'll get your result.

score 0 · Answer 2 · answered May 24 '12 at 03:14

0

Assuming they're both text-inputs, you could validate on keyup, otherwise validating on change would also work.

answered May 24 '12 at 03:14

ahren

16,803
5
50
70

score 0 · Answer 3 · answered May 24 '12 at 03:18

try using on hover cause user has to hover over the button before click i hope it helps

$("input[name=next]").hover(function() {


    if ($("id_genre").val()!="" && $("id_privacy").val()!="") {
        $("input[name=next]").removeAttr("disabled")
    }
});

score 0 · Answer 4 · answered May 24 '12 at 03:20

0

 $('form').change(function() {
    if ($("id_genre").val().length > 0 && $("id_privacy").val().length > 0) {
        $("input[type='submit']").prop("disabled", false)
    }
  })

answered May 24 '12 at 03:20

Ram

143,282
16
168
197

score 0 · Answer 5 · answered May 24 '12 at 03:23

Demo http://jsfiddle.net/8AtAz/1/

In the demo when you click the valid button it will enable the next button: Please lemme know if I missed any point.

code

$("input[type='submit']").prop('disabled', true);
$("#valid").click(function() {

    $("input[type='submit']").prop('disabled', false);
})

OR In your case

 if ($("id_genre").val() != "" && $("id_privacy").val() != "") {
        $("input[type='submit']").prop("disabled", false)
    }

Make a submit clickable after validations are met

5 Answers5

Linked