Event triggered on any modification on my form - javascript

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.

Related

Action listener for select's once form is reset

I have a server form with input, select & radio, and it occasionally need to be reset, so I'm using the jQuery function .trigger('reset') and this works great except I can't seem to have an action triggered once that happens. e.g. .on("reset") or .on("change") on my <select>'s.
Have a look at the example bellow; click on a select field and chose something, then input a name and click reset, the value are reset but, the actions reset or change are not called on the <select>'s.
$('select[name="opt"]').on("click reset change",function(){
var selected = $(this).val();
$(".jobs>div").hide(); // Hide all jobs first.
$(".jobs>."+selected).show(); // Show selected job.
});
$(".reset").on("click",function(){
$('form.theff').trigger("reset");
});
.theff * {
display:block;
margin:10px;
}
.jobs>div {
display:none;
background:gray;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="theff">
<input placeholder="Your name..">
<select name="opt">
<option selected>Select Job</option>
<option value="banker">Banker</option>
<option value="programmer">Programmer</option>
</select>
<div class="jobs">
<div class="banker">
Really? a banker?
</div>
<div class="programmer">
Great, your a programmer!
</div>
</div>
<button>Submit</button>
Reset
</form>
The form is not the select, triggering reset on the form wouldn't trigger an event handler set to a completely different element.
You probably want to do
$(".reset").on("click",function(){
$('form.theff').get(0).reset();
$('select[name="opt"]').trigger('change');
});

How to make the chosen value of select list visible

How I can make the selected choice still visible until I re-choose another one?The list may contain more than 10 options
=====
<form method="get" action="Chairman.php" >
<select name="courses" id="courses" class="styled-select" >
<option value="courses"><--Courses--></option>
<option value="PHYS220">Physics for Engineers</option>
<option value="MATH210">Calculus II</option>
<option value="MATH225">Linear Algebra with Applications</option>
</select>
<input type="submit" value="Search Instructor"
onClick="checkDropdown()"></input>
<div id="error" style="color:red"></div>
=====
Also when I am trying to validate the select list,The error is displayed and then quickly it disappears
<script>
function checkDropdown () {
var courses = document.getElementById('courses');
if(courses.value==="courses") {
document.getElementById('error').innerHTML="PLEASE selecttt";
return false;
}
}
</script>
The select is reset and the error disappears because the form is still posted. The value that you return from the function doesn't stop the submission.
You should use the onsubmit event on the form instead of onclick on the button. Use return in the event code to convey the value from the function back to the event:
<form method="get" action="Chairman.php" onsubmit="return checkDropdown()">

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/

HTML Form reset does not restore disabled properties

When some elements in a HTML form are initially disabled, but get enabled and their value changed afterwards, if user clicks the form's reset button, the values of those elements get restored to their initial values, but they're still enabled although they were disabled originally. Why is it so, and how can I ensure that form reset resets those elements to be disabled?
JSfiddle here: http://jsfiddle.net/d872N/
Code example here:
<html>
<head>
<script>
function enableDisable()
{
var combo1 = document.getElementById("a");
var combo2 = document.getElementById("b");
if (combo1.value == 1)
combo2.disabled = true;
else
combo2.disabled = false;
}
</script>
</head>
<body>
<form name="form" action="dummy">
<select id="a" onchange="enableDisable();">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select disabled id="b">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</form>
</body>
</html>
The reset() method only restores a form elements default values and will not change the disabled state.
Read some documentation here https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.reset
I would suggest that you need to write your own reset method which calls HTMLFormElement.reset() and then resets the disabled state.
e.g.
New JavaScript code:
var hardReset = function(){
document.forms["form"].reset();
document.getElementById("b").setAttribute("disabled","disabled");
};
New HTML:
<input type="button" value="reset" onclick="hardReset();" />
Please see an update of your jsFiddle
A form element's disabled status, like other form-only attributes such as pattern, required, etc, is not part of the form's input data, which is the only aspect of form state which the reset method affects.
I came up against a similar problem a while back and decided to build a tool which would save states of DOM elements to revert them at will, thus keeping the DOM 'versioned'.
It's called a jQuery plugin called reverter and may help you out:
$( function form(){
// Save state on load
var initial = $( 'form *' ).commit( { attributes : 'disabled' } );
$( 'form' ).on( 'reset', function(){
// Revert it on reset!
$( 'form *' ).revert( { changeset : initial } );
} );
} );

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>

Categories

Resources