jQuery capture all changes to named input on a form - javascript

I'm trying to determine when any of a set of named input/select/radio/checked/hidden fields in a form change.
In particular, I'd like to capture when any changes are made to fields matching jQuery's selector $("form :input"), and where that input is has a name attribute. However, the form isn't static i.e. some of the fields are dynamically added later.
My initial thought is to keep track of when new named elements matching :input are added, and then add an event handler, like this:
function on_change() {
alert("The form element with name " + $(this).attr("name") + " has changed");
}
function reg_new_e_handler(input_element) {
input_element.change(on_change);
}
However, I'm quite hopeful I can avoid this with some jQuery magic. In particular, is there a way to register an event handler in jQuery that would handle input elements that match the following:
$("form :input").filter( function () { $(this).attr("name") } ).change(on_change);
However, have this event set update whenever new input elements are added.
I've thought that it may be possible to capture keyup event on the form node with $("form").keyup(on_change), but I'm not so sure how one could capture change events.
I'd also like this to capture keyup events.
Thank you for reading.
Brian

You're looking for live events.
For example:
$(':input[name="something"]'.live('change', function(e) {
//Do things
});
Adding an event handler using .live will handle the event for all elements that match the selector, no matter when they were added.

Related

Add multiple Element to single onkeyPress , onkeyup, and onkeydown

I am learning Javascript and I would like to add multiple element to an event listener at once, I don't want to add call I know on an element for example input field I can add attribute onkeyup=myfunction(). but what I want is something similar with what I have thinking below
var keypress = [document.getElementById('field'), document.getElementById('field1')
]
keypress.forEach((element)=>{
element.addEventListener('click', myfunctionTocall);
});
function myfunctionTocall(){
doSomething()
}
How can I achieve this. I apologize for my English I am using Translator

Live form validation using javascript

I want to do live form validation using javascript like if I type number in text field it should give error message instantly or vice versa.How can I achieve this.
You need to start by detecting changes in the input entries. You can do that easily by using the oninput event (read more here).
Looking at that example:
<script>
window.addEventListener('input', function (e) {
console.log("input event detected! coming from this element:", e.target);
}, false);
</script>
<input placeholder="type here and see console.">
Each time your input value changes, an event will be fired an received in that listener.
In your case, you need to add an event listener for each of the inputs and, instead of doing a console.log in the handler function, just call a generic function that will validate all the values for all the inputs in the form.
For the validations, you can look at multiple libraries, like validate.js or jQuery Validation. Also, take a look at validator.js.

Capture jQuery Masked Input change of Input

I have lots of input fields using the Jquery Masked Input but I can't figure out how to capture the change of the value on the input.
I have tried:
JQuery.Change()
$('#Selector').bind('input', function () {})
But, no success.
Anyone could help me?
Do you just mean this?:
$('#Selector').change(function () {
// respond to the change
})
Or, if your elements are dynamically being added to the DOM, you might use:
$(document).on('change', '#Selector', function () {
// respond to the change
});
(You don't have to use document as the common parent element, any common parent element will work.)
Depending on the type of the input (and sometimes on the browser, unfortunately), you might try other events as well, such as keypress, keyup, even blur in some cases.

How do I dynamically assign IDs to form fields with event listeners?

I am allowing for the user to click a link, which will add a field to the page. The user can click the link to add as many fields to the page as they like. When the field is clicked, a calendar appears, because it is a date field. I am using the Any+Time calendar. The jQuery waits for a click event from the field with a specific id. Here is the code:
$('#start_date').click(
function(e) {
$('#start_date').AnyTime_noPicker().AnyTime_picker().focus();
} );
The id is start_date. The problem is that the user can click the link to add a new field called start_date and since the id is the same, the jQuery event listener cannot uniquely identify each field. Is there a known solution for this kind of a scenario?
I'm not clear: does appending the unique number not work for you? If you're OK creating the field but it's not attaching the click handlers, then try adding a class="pickerField" to the elements when you create them, and change your handler to:
$('.pickerField').click(
function(e) {
$(this).AnyTime_noPicker().AnyTime_picker().focus();
} );
I believe that should work with jQuery 1.7.2. If for some reason it doesn't, then try the following instead:
$('.pickerField').on('click',
function(e) {
$(this).AnyTime_noPicker().AnyTime_picker().focus();
} );
If you're using an older version of jQuery, try using live instead of on.

Jquery dynamic addition of form fields problem

I'm using the following code to insert extra form fields.
function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}
I'm dynamically sending the field values to mysql when a blur event occurs. However, when this field is inserted, it doesn't recognise and the blur event isn't picking up when any value has been entered on the new fields. Is this due to the original blur event handler being set up on document ready?
How do I get the mysql update jquery code to recognise when the extra form fields are made visible after the document ready initialisation has already been completed? I've tried various events based on the div id but to no avail.....
The reason your code is not working for the dynamically added inputs is because when you do something like:
$(selector).blur(myFunction);
jQuery goes through every element that matches selector at that point and adds an event handler that runs myFunction when the blur event is fired happens on the element. This means that any elements that match selector added after this line of code runs will not have been bound.
To get around this problem, jQuery introduced the live function in 1.3. As the documentation reads:
Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.
Unfortunately, as of right now jQuery does not support the blur event with the live function.
Your options then are:
A) Run the binding code everytime you add new inputs.
B) Use the livequery plugin, which is that live is based off of and does support blur.
Personally, I would go with A.
You should bind your events using the live() method:
for example:
$("input").live("blur", function() { ... });
That way, any fields added at runtime will be bound to the event handler.
EDIT: as pointed out in the comments, "blur" is not supported, but there's a plugin that does support this event: http://plugins.jquery.com/project/livequery

Categories