Develop Reference

Event triggered on any modification on my form

I made a form with an imput text and a select.
To submit the form i want the user to click a verify button in order to check if all fields are correctly filed.
If it is then the button submit who was initialy disabled is now enable.
Here is the problem, i'd like that if the user modify anything in the form again then the button turn back to disable so that he must verify again to submit.
To do so i'd like to find a jQuery event that triggers on any event on my form to turn back the submit button to disable again.
Any idea of how could i do ?

You can use the form (delegateTarget) then from that select the input types (https://stackoverflow.com/a/3165569/125981) that you wish to be in scope to attach event hanlders, and disable those desired by there type. Since it IS possible to have multiple I have included and example with two submit buttons that are and a reset button that is NOT disabled. To reverse that, you would need to have some way to clear them out so I added an example of a custom event.
Added a reset event handler since it may come into play here.
$('#myform').on('change keyup', 'input[type="text"], select', function(event) {
$(event.delegateTarget).find('input[type="submit"]').each(function() {
console.log("disable:", this);
this.disabled = true;
});
})
.on('all-clear', function(event) {
$(event.delegateTarget).find('input[type="submit"]').each(function() {
this.disabled = false;
});
})
.on('click', '#allclear', function(event) {
$(event.delegateTarget).trigger('all-clear');
})
.on('reset', function(event){
// do whatever is desired on the reset of the form
});
.find('input[type="text"]').trigger('change'); //IF you want disabled initially
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form id="myform">
<input type="text" value="text stuff" />
<select>
<option value="option1" selected="selected">First Option</option>
<option value="option2">Another Option</option>
</select>
<input type="submit" value="Submit" />
<input type="submit" value="Possible Submit" />
<input type="reset" value="Reset" />
<button id="allclear" type="button">All clear</button>
</form>

You need to trigger the event with the on Change function of jQuery. You have to assign it to every input field / Select or whatever, or give them all the same class.
Here is a Doc
Example:
<form>
<input class="target" type="text" value="Field 1">
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>
Script:
$( ".target" ).change(function() {
alert( "Handler for .change() called." );
});
If you provide any sample Code, we'd be able to help you even more.

Show Hidden Form Field with Jquery

I seem to be having an issue with Jquery not displaying a hidden DIV after a selected form value is chosen. When a user clicks yes, I want the hidden div to then be revealed. Am I missing something? You can take a look here https://jsfiddle.net/73merxk9/
Javascript
<script>
$(document).ready(function() {
$('#permit').on('permit', function() {
$("#hiddenform").toggle($(this).val() == 'Yes');
}).trigger('permit');
});
</script>
Form
<div>
<label for="permit">Permit</label>
<select id="permit" name="permit">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div id="hiddenform">
<div>
<label for="permit_submitted">Permit Submitted</label>
<input placeholder="Permit Input Here..." name="job_number" type="text" id="job_number">
</div>
</div>

There is no such event "permit". You need to listen onchange event instead. Then you need to compare select value with "1" because Yes is a label, not value:
$(document).ready(function () {
$('#permit').on('change', function () {
$("#hiddenform").toggle($(this).val() == '1');
}).trigger('change');
});
Demo: https://jsfiddle.net/73merxk9/1/

jQuery loop over html, on change, find class, remove it

So I've got multiple forms with selects on a page. For each form I want the submit button to have a class of disabled until an option is selected, at which point the button should lose the disabled class (each form must work independently of the others). I can't seem to get this working using Next or Find. Here's my code:
<-- FORM ONE -->
<form>
<label for="available-countries-#variables.x#">Available Countries</label>
<select id="available-countries-#variables.x#" class="form-control available-countries-selector">
<option value="0">-- Select Country --</option>
<option value="1">Australia</option>
<option value="2">Brazil</option>
</select>
<button type="submit" class="btn btn-default disabled" role="button">Submit</a>
</form>
<-- FORM TWO -->
<form>
<label for="available-countries-#variables.x#">Available Countries</label>
<select id="available-countries-#variables.x#" class="form-control available-countries-selector">
<option value="0">-- Select Country --</option>
<option value="1">Argentina</option>
<option value="2">France</option>
</select>
<button type="submit" class="btn btn-default disabled" role="button">Submit</a>
</form>
-- JS --
$('.available-countries-selector').change(function(){
if($(this).val() !== '0'){
$(this).find('btn-default').removeClass('disabled');
} else {
$(this).find('btn-default').addClass('disabled');
}
});
Any help would be appreciated

You need to look for the button in the current form. Best way to do that is using closest().
var isEnabled = $(this).val() !== '0';
$(this).closest("form").find('btn-default').toggleClass('disabled', !isEnabled);
How I would code it with event bubbling:
$(document).on("change", ".available-countries-selector", function(){
var isDisabled = $(this).val() === "0";
$(this).closest("form").find('btn-default').toggleClass('disabled', isDisabled);
});
ideally you would set document to an element that is closer to the forms.

In the JS context, the this is the <select> element. Since the btn-default is not inside the select, it will not find it with that code.
Instead you can go to the closest form parent and find it from there:
$(this).closest("form").find('btn-default').removeClass('disabled');

The submit button is not within the selector you are using so $(this).find will not work. However, you can use $(this).next() since the submit button is immediately after the select dropdown, like this:
$('.available-countries-selector').change(function(){
if($(this).val() !== '0'){
$(this).next().removeClass('disabled');
} else {
$(this).next().addClass('disabled');
}
});
JSFiddle

You're closing your <button>s with a </a> and your find() is not looking for a classname (because you've excluded the dot) nor can you find a sibling. Use next([selector]) to find the next .btn-default:
$('.available-countries-selector').change(function(){
if($(this).val() !== '0'){
$(this).next('.btn-default').removeClass('disabled');
} else {
$(this).next('.btn-default').addClass('disabled');
}
});
http://jsfiddle.net/mL9h2fof/
UPDATE (thanks #TrueBlueAussie)
You could use .toggleClass to make this even simpler:
$('.available-countries-selector').change(function(){
$(this).next('.btn-default').toggleClass('disabled', $(this).val());
});
http://jsfiddle.net/mL9h2fof/1/

Cannot select a dropdown item in jQuery to make it display a hidden textbox

I am trying to get a paragraph with some text and a textbox to show up when a certain option in the dropdown select menu on my form is clicked. Similar code worked for radio buttons, but doesn't seem to in this case. I would really appreciate any help that I can get on this. jsfiddle
HTML:
<select name="select1">
<option value="doctor" id="doctor1">Doctor</option>
<option value="nurse" id="nurse1">Nurse</option>
<option value="other" id="other1">Other</option>
</select>
<div class="otherprof">
<p>Please list your profession:
<input type="text" name="otherproftext" id="otherproftext" maxlength="20">
</p>
</div>
jQuery:
$(document).ready(function () {
$(".otherprof").hide();
$("#other1").click(function () {
$(".otherprof").show();
});
$("#doctor1").click(function () {
$(".otherprof").hide();
});
$("#nurse1").click(function () {
$(".otherprof").hide();
});
});
Idea is that the textbox stays hidden until users click on "Other" in the dropdown, which in turn is supposed to display the textbox immediately.

You need to use the onchange event on the select, not click on the options.
$("[name='select1']").on("change", function(){ //listen for change event on the select
$(".otherprof").toggle(this.value==="other"); //toggle show/hide based on selected value
}).change(); //trigger the change event so default value is checked
JSFiddle

Add the style attribute to the div otherprof and it will be hidden initially
<select name="select1">
<option value="doctor" id="doctor1">Doctor</option>
<option value="nurse" id="nurse1">Nurse</option>
<option value="other" id="other1">Other</option>
</select>
<div class="otherprof" style="display:none;">
<p>Please list your profession:
<input type="text" name="otherproftext" id="otherproftext" maxlength="20">
</p>
</div>

Disable SUBMIT button until select box choices

I have a small form.
Two select box elements and a submit button.
The select box elements collectively when selections are chosen, fire off an ajax request.
What I want to do is, disable the submit button UNTIL user has made selections from the select drop downs.
They must make a selection from BOTH select drop downs, before the Submit button is enabled.
I dont mind if the submit button is hidden until selections made.
Brief Code:
<form id="ad_form" method="post" action="">
<p>
<select id="ad_type" name="ad_type">
<option value="" selected="selected">Select premium ad type</option>
<option value="<?php echo TYPE_USER;?>">Featured Agent</option>
<option value="<?php echo TYPE_LISTING;?>">Featured Listing</option>
</select>
<label for="ad_type" class="labelStrong">Advertising Type</label>
</p>
<p>
<select id="ad_duration" name="ad_duration">
<option value="" selected="selected">Select premium ad duration</option>
<option value="weekly">Weekly</option>
<option value="fortnightly">Fortnightly</option>
<option value="monthly">Monthy</option>
</select>
<label for="ad_duration" class="labelStrong">Advertising Duration</label>
</p>
<p>
<div id="calender">
</div>
</p>
<p>
<input type="submit" name="submit" value="Submit" id="submitorder" />
</p>
</form>

Here's a demo that seems to do what you want:
http://jsfiddle.net/Yr59d/
That javascript code would go in a $(document).ready() block

$(function() {
$("#submitorder").css("visibility", "hidden");
$("#ad_form select").bind("change", function() {
if ($("#ad_type").val().length > 0 && $("#ad_duration").val().length > 0) {
$("#submitorder").css("visibility", "visible");
} else {
$("#submitorder").css("visibility", "hidden");
}
});
});

If you give all your selects a common class name (like 'required') , you can do something like this:
$('select.required').change(function() {
var total = $('select.required').length;
var selected = $('select.required option:selected').length;
$('#submitorder').attr('disabled', (selected == total));
});
This is not tested code. This documentation might help. This jquery discussion might help too.

Gah, I'll have to agree with Kon on this one - fix-now-worry-about-it-later answers have their place but an elegant solution that is simple at the same time has to be the way to go.
My solution: (with credit from a thread at: JQuery Enable / Disable Submit Button in IE7)
$('select.required').change(function() {
var total = = $('select.required').length;
var selected = $('#ad_form').find("select.required option[value!='':selected").length;
$('#submitorder').prop('disabled', (selected != total));
});
Incidentally, thanks ctcherry for demoing the code on the JSFiddle site - I've not seen that before and will make use of it in the future!

Use listeners on both select buttons for change and check whether the other is also set. If set, enable the submit button.