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.

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>

showing one of 3 divs depending on which select is chosen [duplicate]

This question already has answers here:
jQuery select change show/hide div event
(10 answers)
Closed 8 years ago.
I have a select box with 3 option body, strength, distance. I want to use javascript / jquery to show a div depending on which of those options is selected. so far I have just got it working on a button push http://codepen.io/Irish1/pen/iwKam
html
<form>
<p>
<label for="select">
Goal Type
</label>
<select class="typeselect">
<option value=""></option>
<option value="body">
Body
</option>
<option value="strength">
Strength
</option>
<option value="distance">
Distance
</option>
</select>
<button class="toggle">push</button>
</p>
<div class="body">
<p>
<label for="body">
Body
</label>
</p>
</div>
<div class="strength">
<p>
<label for="strength">
Strength
</label>
</p>
</div>
<div class="distance">
<p>
<label for="distance">
Distance
</label>
</p>
</div>
</form>
css
.body {
display: none;
}
.strength {
display: none;
}
.distance {
display: none;
}
javascript
$('.toggle').click(function(){
$('.body').toggle();
});

Try
//dom ready handler
jQuery(function () {
//all the elements that has to be shown/hidden, it is cached for easy access later
var $targets = $('.body, .strength, .distance');
//chang handler for the select element
$('.typeselect').change(function () {
//hide previously displayed elements
$targets.hide()
//find the element with the selected option's value as class, if empty option is selected set it to an empty set
if (this.value) {
$('.' + this.value).show()
}
})
})
Demo: Fiddle
If you want to make the button handler work then
//dom ready handler
jQuery(function () {
//all the elements that has to be shown/hidden, it is cached for easy access later
var $targets = $('.body, .strength, .distance');
var $select = $('.typeselect');
//click handler for the button
$('.toggle').click(function (e) {
//prevent the default form action of the button click
e.preventDefault();
//hide previously displayed elements
$targets.hide()
//selected value
var val = $select.val();
//find the element with the selected option's value as class, if empty option is selected set it to an empty set
if (val) {
$('.' + val).show()
}
})
})
Demo: Fiddle

$('#typeselect').change(function(event) {
$('.target').hide();
var option = $(this).val();
if (option != "") $('.'+option).show();
});
and a few minor mods to the html
<form>
<p>
<label for="select">Goal Type</label>
<select id="typeselect" class="typeselect">
<option value=""></option>
<option value="body">Body</option>
<option value="strength">Strength</option>
<option value="distance">Distance</option>
</select>
</p>
<div class="body target">
<p><label for="body">Body</label></p>
</div>
<div class="strength target">
<p><label for="strength">Strength</label></p>
</div>
<div class="distance target">
<p><label for="distance">Distance</label></p>
</div>
</form>
You can view and edit here at codepen: http://codepen.io/anon/pen/ktesh

Give a name / Id to Select and Div's.
var x = document.getElementById("SelectId / Name").selected;
if(x==0) {
document.getElementById("body").style.display = "block";
} else {
\\ Similarly for other div to display on the basis of x
}

Try this:
$('.typeselect').change(function(){
$('div').hide();
if($(this).val() == ""){
$(this).children('option:first-child').show();
}
else
$('.' + $(this).val()).show();
});

jQuery Mobile Show/Hide Form input based on select field

I have the following form fields on my jQuery Mobile page. I want to initially hide the element, and then have it .show() if the user selects the option with value="Other"
Here's my HTML:
<div data-role="fieldcontain" class="no-field-separator">
<select name="plan_height" id="plan_height" data-native-menu="false">
<option>Plan Height</option>
<option value="Standard 6foot 2inch">Standard 6'2"</option>
<option value="Other">Specify in Notes</option>
</select>
</div>
<div id="specify_plan_height_box" style="display:none;">
<div data-role="fieldcontain" class="ui-hide-label no-field-separator">
<label for="specify_plan_height">Specify Plan Height</label>
<input type="text" id="specify_plan_height" name="specify_plan_height" placeholder="Specify Plan Height" maxlength="50" />
</div>
</div>
and here's my JS INSIDE the page:
// $( '#machine-guarding-page' ).live( 'pageinit',function(event) {
$( document ).bind( "pageinit", function( event, data ) {
$('#plan_height').change(function() {
var planHeightVal = $("#plan_height option:selected").val();
var sphb = $("#specify_plan_height_box");
sphb.hide();
if (planHeightVal == "Other") {
sphb.show();
}
});
});
});
It works fine here in this working example. Do I need to have something other than $(".page").live('pageinit', function() {
at the top of my JS code to make it work after the page loads? It works fine in the example link above, but not on my jQuery Mobile site.

Does this work for you:
http://jsfiddle.net/Qe6G4/1/
http://jsfiddle.net/Qe6G4/2/ (optimized)
http://jsfiddle.net/Qe6G4/3/ (with another input)

Hide elements using jquery based on option select

I have two forms and a selector.
This is my code --
<select>
<option value="1">Pay</option>
<option value="2">Goog</option>
</select>
<form id="pp">
<input type="text">
</form>
<form id="cc">
<input type="text">
</form>
Now if option 1 is selected i want to hide form CC. if 2 hide form PP.
How do i do it with js or jquery? thanks

Try this (using jQuery):
$("select").bind("change", function() {
if ($(this).val() == "1") {
$("#pp").show();
$("#cc").hide();
}
else if ($(this).val() == "2") {
$("#pp").hide();
$("#cc").show();
}
});
Additionally, you could hide both forms using .hide() as shown above before the user selects any option.
bind is attaching an event handler to the "change" event of the select box. This is fired when the user changes what option is selected.
Inside the handler, val is used to determine the value of the currently selected option.
show() and hide() are used on the correct forms, depending on which option was selected.
Working example: http://jsfiddle.net/andrewwhitaker/faqZg/

<script>
function Hide(val)
{
if(val==1)
{
document.getElementById('cc').style.display='none';
document.getElementById('pp').style.display='inline';
}
if(val==2)
{
document.getElementById('pp').style.display='none';
document.getElementById('cc').style.display='inline';
}
}
</script>
<select onchange="Hide(this.value);">
<option value="">Please Select</option>
<option value="1">Pay</option>
<option value="2">Goog</option>
</select>
<div id="pp">
<input type="text">
</div>
<div id="cc">
<input type="text">
</div>