Make sending pressed after verification is complete

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 to make the next button available only after filling the genre and privacy? For example, something like:

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

The only thing that should be "live", so it can detect when all these fields are filled.

Answer 1

Wut? The "event" handles delegation, so the "event handler" must have live() or on() depending on the version of jQuery you are using. This means that a substantial part of the equation has been omitted.

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

Otherwise, if you just want to include them, if the data was fille din.

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

This will check the form to see if the inputs change, if they do, it will check the values ​​and you will get the result.

Answer 2

Assuming both of them are text inputs, you can check for keyup , otherwise checking for change will also work.

Answer 3

try using the hover method, the user should hover over the button before clicking the button I hope this helps

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

Answer 4

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

Answer 5

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

In the demo, when you click the "Valid" button, it will include the following button: "Please let me know if I missed a point.

the 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) }