I have to do same things when following event occur on a form
1) An input text box value is changed by keyboard or mouse(pasting)
2) A checked box is checked/unchecked
3) A select option is changed
currently I am doing
$(':text').on('input', function() {
//Same code
}
$(':checkbox').on('change', function() {
//Same code
}
$('select').on('change', function() {
//Same code
}
but i want to write single function for all there events like
$(':text', ':checkbox', 'select' ).on('???', function() {
//Same code
}
Please help me on it
Thank you in advance
You may use something like this. But this will trigger both change and input events for the :text.
$(':checkbox, :text, select').on('change input',function(e) {
//code
});
JSFIDDLE
Add a CSS class to these input boxes and use that class as your jQuery selector for binding your event.
HTML
<input type="text" class="changable" />
<input type="checkbox" class="changable" />
and jQuery
$(function(){
$(document).on("change",".changable",function(e){
var _this=$(this);
// do something now.
});
});
I would suggest using #Shyju's answer, as it is much more scalable and friendly, but based off of your question, here is an implementation.
Listen to the document for click events and delegate it to the selectors you pass in:
$(document).on('click', ':text, :checkbox, select', function() {
doFunction();
});
Here's a JSFiddle working example
Bind your single/multiple event/s with multiple elements using class attribute. Assign same class to all elements and find the event type that has been fired. According to the fired event code your implementation.
Try this way :
HTML :
<input class="elements" type="text" />
<input class="elements" type="checkbox" />
<select class="elements">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<input class="elements" type="button" value="Click here" />
jQuery :
$(".elements").on("change click", function(e){
var nodes = e.target;
if(nodes.nodeName == "INPUT"){
if(nodes.type == "text" && e.type == "change"){
// code goes here
alert("Input changed");
}else if(nodes.type == "checkbox" && e.type == "change"){
// code goes here
alert("Checkbox state changed");
}else if(nodes.type == "button" && e.type == "click"){
alert("Button is clicked");
}
}
else if(nodes.nodeName == "SELECT" && e.type == "change"){
// code goes here
alert("Select option changed");
}
});
jsFiddle
Resources :
event.type
event.target.nodeName
Related
How to trigger an keyup event?
If have an text field with id item and if I trigger an event with space a space must be added to text field.
I just want it trigger an event from JavaScript console
$('#item').keydown();
$('#item').keypress();
$('#item').keyup();
You can use "input blur" instead of keypress, keyup, keydown:
$('#item').on('input blur', function(e) {
// do something
});
Here is an example:
$(document).ready(function() {
$('#item').on('input blur', function(e, customData) {
var data = $(this).val() ;
if(typeof customData !== 'undefined') {
data = customData;
}
$('.check').text('yourItemId: ' + data);
});
$('button').click(function() {
$('#item').trigger('blur', ["Hello"]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type something:
<input id="item" name="code" maxlength="19">
<span class="check"></span>
<br>
<button>Trigger input-blur-event test</button>
Notice:
.trigger() accepts online one event!
Here is a nice way from a other user to setup new function triggerAll: jQuery .trigger() multiple events
I've seen plenty examples of people disabling buttons if textboxes are empty but I haven't found any which will disable a button for only certain textboxes. I'm new to Jquery and I know it is pseudo coded but you can get the idea. Which Jquery function do I have to call so that it is constantly checking? And how can I use an or statement in the if clause to determine if any textbox field is empty?
if( $('#txtEvent').val.length === 0 || $("#txtID").val.length === 0)
{
$('#btnSave').attr("disabled", "disabled");
}
else
{
$('#btnSave').attr("enabled", "enabled");
}
Form Controls
<asp:TextBox ID="txtEvent" runat="server"></asp:TextBox>
< asp:TextBox ID="txtID" runat="server"></asp:TextBox>
<asp:Button ID="btnSave" runat="server"" Text="Save and Next" />
You can do it two different ways:
if (!$("#txtEvent").val()) { //undefined will yield false
//call a method! .val() not .val
$("#btnSave").attr("disabled", "disabled");
} else {
$("#btnSave").attr("enabled", "enabled");
}
Or:
if ($("#txtEvent").length > 0) {
$("#btnSave").attr("disabled", "disabled");
} else {
$("#btnSave").attr("enabled", "enabled");
}
If you want these constantly running, wrap them in:
$("#txtEvent").on("change", function() { //code });
//using the onchange event will trigger the code whenever the txtbox changes.
//you can also use onblur if you want it to trigger AFTER the txtbox loses focus
Please note you'll have to convert these into proper asp code! This is simply a logistical answer.
Try
var $empties = $('#txtEvent, #txtID').filter(function(){
return $.trim($(this).val()).length == 0
})
$('#btnSave').prop("disabled", $empties.length === 0);
Even though this is two years old question, I would like to show another way using bind. See the text 'keyup mouseup cut paste'
This will also work if you cut or paste text as well as keyboard input. Also this will work if we click the little cross in the text box to clear the text( using mouseup).
OP stated that disable a button for "only certain textboxes".
Say we have following text boxes
<input type="text" name="tbox1" id="txtbox1" />
<input type="text" name="tbox2" id="txtbox2" />
<input type="text" name="tbox3" id="txtbox3" />
<input type="text" name="tbox4" id="txtbox4" />
<input type="submit" id="btnSubmit" name="button" value="Save and Next" disabled />
If we need to enable/disable the button based on values entered in to txtBox1 OR txtBox3 then we can use this
<script>
$(document).ready(function() {
$("#txtbox1, #txtbox3").bind('keyup mouseup cut paste', function () {
var txt = $(this);
setTimeout(function () {
$('#btnSubmit').prop('disabled', $(txt).val() == '');
}, 100);
});
});
</script>
If we need to enable/disable the button only when both txtBox1 AND txtBox3 are not empty then we can use this
<script>
$(document).ready(function() {
$("#txtbox1, #txtbox3").bind('keyup mouseup cut paste', function () {
setTimeout(function () {
($('#txtbox1').val() && $('#txtbox3').val()) ? $('#btnSubmit').prop('disabled', false) : $('#btnSubmit').prop('disabled', true);
}, 100);
});
});
</script>
I was helped with some code here. I tweaked it to try and hide a whole div instead of an element. It was only a small tweak but I seem to have done something to stop it working.
HTML
<input type="text" name="text-708" value="" class="wpcf7-validates-as-required" size="40">
<div id="added_fields">
<select name="menu-168" class="wpcf7-validates-as-required">
<option value="Residential">Residential</option>
<option value="Commercial">Commercial</option>
</select>
</div>
JS
if ($("select[name='menu-168']").val() == "Commercial") {
$("#added_fields").addClass("hidden");
}
Would someone be kind enough to tell me where I have gone wrong?
You need to do the check of the select value when it changes.
I want to hide the input box not the select box im afraid
In that case you need to change the #added_fields selector. Try this:
$("select[name='menu-168']").change(function() {
if ($(this).val() == "Commercial") {
$('#added_fields').addClass("hidden");
}
else {
$('#added_fields').removeClass("hidden")
}
});
Example fiddle
You did not write the code on change event of select and your selected value at load is not commercial so your statement under if does not execute.
Live Demo
$("select[name='menu-168']").change(function() {
if ($("select[name='menu-168']").val() == "Commercial") {
$("input[name=text-708]").addClass("hidden");
}
else
$("input[name=text-708]").removeClass("hidden");
});
Try changing the following line
$("#added_fields").addClass("hidden");
to
$("#added_fields").hide();
Try this :
$("select[name='menu-168']").change(function() {
if ( $(this).val() == "Commercial") {
$("#added_fields").hide();
}
});
try
$("#added_fields").hide();
you can find more information here: http://api.jquery.com/hide/
Updated: If you want to refer to the change event of your select you have to either fire your function in the onselectedindexchanged attribute of your select or add a change event on it via jQuery:
$("select[name='menu-168']").change(function() {
if ($(this).val() == "Commercial") {
$("#added_fields").hide();
}
});
more info about change: http://api.jquery.com/change/
Make sure you have the option:selected property in the change event of the select list
$("select[name='menu-168']").bind("change",function(e){
if ($("select[name='menu-168'] option:selected").val() == "Commercial") {
$("#added_fields").hide();
}
});
hay yomiss to call the change event of the select box.
check this fiddle.
http://jsfiddle.net/K9zGP/44/
$("select[name='menu-168']").change(function(){
alert($(this).val());
if ($(this).val() == "Commercial") {
$("#added_fields").addClass("hidden");
}
});
Try this:
$("select").change(function(){
if($("select option:selected").val() == "Commercial")
$("input[name=text-708]").hide();
else
$("input[name=text-708]").show();
});
DEMO
You have to "attach" to a event "hide".
So you can do this with click() (or change()) event like in this fiddle.
Your code is only executing once, on $(document).ready();. Wrap it in a .change() event handler.
$("select[name='menu-168']").change(function(e) {
if ($(this).val() == "Commercial") {
$("#added_fields").addClass("hidden");
}
});
Updated fiddle: http://jsfiddle.net/K9zGP/36/
UPDATE:
To make the text-input reappear in jsfiddle.net/K9zGP/46, use .toggleClass() instead:
$("select[name='menu-168']").change(function(e) {
var isCommercial = $(this).val() == "Commercial";
$("#added_fields").toggleClass("hidden", isCommercial);
});
YAF: http://jsfiddle.net/K9zGP/71/
I am using following script to bind a keypress event on each textbox so that on reaching the maxlength, focus will switch to next input field. Passing classname as the prarameters to the function.
function autoFocusPhoneFields(txtbox1ID,txtbox2ID) {
$('input.'+txtbox1ID+', input.'+txtbox2ID+'').each(function() {
$(this).bind('keypress', function(){
if(this.value.length == $(this).attr('maxlength')) {
$(this).next('input').focus();
}
});
});
}
$(document).ready(function(){
autoFocusPhoneFields('mobileprefix','mobilecode');
});
As i have mentioned two different input ..it is runnign fine. Butis there any way around so that it will get the classnames and runs through each input box to attach keypress event.
If I understand you correctly, you want to attach the same event handler to every input field? Just use the selector:
$(':text')
(for all input type="text") fields.
So just change
$('input.'+txtbox1ID+', input.'+txtbox2ID+'').each(function() {
to:
$(':text').each(function() {
If I get you correctly you just need to use type selector for input. You can also get rid of calling each to iterate thru inputs since binding event to multiply elements interates via them. So you can change your code into something like following:
var autoFocusPhoneFields = function () {
$('input:text').keypress(function() {
if(this.value.length == $(this).attr('maxlength'))
$(this).next('input').focus();
});
}
$(autoFocusPhoneFields);
This works fine.
HTML
<input id="one" class="inp" maxlength="5" />
<input id="two" class="inp" maxlength="3" />
<input id="three" class="inp" maxlength="2" />
JS Part
$(function(){
var onpress = function(){
var val = $(this).val();
var next_input = $(this).next('input');
var mx = $(this).attr('maxlength');
try {
mx = Number(mx);
if (next_input.length >= 1 && val.length >= mx){
next_input.focus();
}
} catch(x){}
}
$('input.inp').bind('keypress', onpress);
});
My HTML is something like this
<div id="mydiv" class="common">
<input type="text" id="text1" value="" />
<input type="text" id="text2" value="" />
</div>
I am assigning a function on the onclick event of the textbox like this
$(document).ready(function() {
$(".common input").click(function() {
//////// What I am trying to do is access the id of its parent
// in this case it is "mydiv"
alert($(this:parent).attr('id'));
});
But it is not working
Try $(this).parent().attr('id');
You'd be better off using event delegation and only having one event handler on the parent <div>. This will be more efficient by reducing the number of event handlers required, and by replacing the descendant and element selector with the much simpler and faster ID selector. Also, within the event handler function you automatically have references to both elements you're interested in (via evt.target and this) without having to do any traversal.
$(document).ready(function() {
$("#mydiv").click(function(evt) {
if (evt.target.tagName.toLowerCase() == "input") {
alert("Clicked input with ID " + evt.target.id);
alert("Parent ID: " + this.id);
}
});
});
Change it to the following
$(document).ready(function() {
$(".common input").click(function() {
var divId = $(this).parent().attr('id'));
alert(divId);
});
$(document).ready(function() {
$(".common input").click(function() {
alert( $(this).parent().attr('id') ); // <- Use $(this).parent()
}); // <- don't forget to close this function too
});