Capture value of a hidden input element jQuery - javascript

I have the following input element:
<input type="hidden" id="input_2_204_data" name="input_2_204_data" value>
I need to capture an event when it is changed and value is not empty. I have looked over older SO's questions, however nothing seemed to work.
Here is the latest snippet I have come up with, however it does not work either, and there are no errors in console:
jQuery(document).ready(function(){
var $sign = jQuery('[id$=input_2_204_data]');
$sign.on("change", function(){
alert('hey');
});
});
Any help or guidance is much appreciated.

jQuery(document).ready(function(){
var $sign = jQuery('#input_2_204_data');
alert($sign.val())
});

You have wrong selector to target element, You need to use ID selector # here to target element by id:
var $sign = jQuery('#input_2_204_data');
$sign.on("change", function(){
console.log($(this).val());
});

You have to use the correct selector #input_2_203_data. Using .change() works just fine.
jQuery(document).ready(function(){
var $sign = jQuery('#input_2_204_data');
$sign.change(function() {
if($sign.val() != '') {
alert( "Handler for .change() called." );
}
});
});

Related

Id Starwith and .not() selector

I have done a validation to avoid special characters with the following code for all input text, however, I have input text that require having special characters. My code is as follows
$('.twTextinput input, .twTextinput textarea').not( $( '#txtEmailPersonal input, #txtEmailTrabajo input' )).keyup(function (){
this.value = this.value.replace(/[^a-zA-Z0-9 _]/g,'');
});
The problem is this, I have an input text that must be within the selector .not(). Is a input text that has an id that starts with "iccw". I tried with this code but does not work
$('.twTextinput input, .twTextinput textarea').not( $( '#txtEmailPersonal input, #txtEmailTrabajo input, input[id^="iccw"]' )).keyup(function (){
this.value = this.value.replace(/[^a-zA-Z0-9 _]/g,'');
});
Any suggestions.
Thanks in advance.
That is an awfully complex way single out one special input, don't you think?
I would tend to want find all "regular" textareas or inputs into an container and use find to collect them, and then single out the other "normal" inputs.
$normal_input_list = $(container).find( 'input.normal, textarea.normal' );
$special_input_list = $( '#icww' );
onKeyupNormal = function (){
this.value = this.value.replace(/[^a-zA-Z0-9 _]/g,'');
};
// and now bind the handler
$normal_input_list.on( 'keyup', onKeyupNormal );
If there is a good reason to select as you have, then I have determined the following should work:
$('input, textarea').not( '#wmd-input' );
Specifying input and ID is redundant, as ID is already unique across the page.
Hope that helps!
Here's a hack:
$('.twTextinput input, .twTextinput textarea').not( $( '#txtEmailPersonal input, #txtEmailTrabajo input'
)).keyup(function (){
if( this.id != 'iccw' ) {
this.value = this.value.replace(/[^a-zA-Z0-9 _]/g,'');
}
});
I would tend to control this with HTML attributes. I find it more manageable.
<textarea data-allowedchars="[^a-zA-Z0-9 _]"><textarea>
<textarea ></textarea>
<input data-allowedchars="[^a-zA-Z0-9 _]" />
<input />
JS
$("body").on("keyup", "[data-allowedchars]",
function(e){
var $t = $(this),
re = new RegExp($t.data("allowedchars"),'g');
$t.val($t.val().replace(re, ""));
}
);
Sorry this doesn't directly answer your question. It is hard to see what is wrong with your syntax without seeing the code.

Why is jQuery .click() is skipped over?

I have a small script of javascript which iterates over a set of checkboxes which grabs the name attribute and value and then convert it to json. Then I use that value to set the href of an element and then try to trigger a click.
For some reason everything seems to function properly except for the click. I successfully change the href, I console.log() a value before the .click() and after. Everything hits except for the click. The url in the href is value as I clicked it manually.
I have my script included just before the closing body tag and have it wrapped in $(document).ready(). and I do not have duplicate ID's (I viewed the rendered source to check)
Can anyone offer some insight on this?
Here is the javascript
$(document).ready(function() {
$("#multiExport" ).on('click', function(e){
e.preventDefault();
var i = 0;
var list = new Array();
$('.appSelect:checked').each(function(){
var name = $(this).attr('name');
var id = $(this).val();
list[i] = new Array(name, id);
i++;
});
var serList = JSON.stringify(list);
console.log(serList);
var webRoot = $("#webRoot").text();
$("#exportLink").attr('href', webRoot+"/admin/admin_export_multiExport.php?emailList="+serList); //hits
console.log('1'); //hits
$("#exportLink").click(); //this line never executes
console.log('2'); //hits
});
});
$(selector).click() won't actually follow the link the way clicking on it with your mouse will. If that's what you want, you should unwrap the jquery object from the element.
$(selector)[0].click();
Otherwise, all you're doing is triggering event handlers that may or may not exist.
I may guess you need
$(document).on('click', '#multiExport', function(e){
(you can replace document by a nearest element, if you got one).
if you need dynamic click event binding.
EDIT
I would try something like that :
$(document).ready(function() {
$("#exportLink").click(function() {
window.location = $(this).attr('href');
});
$("#multiExport" ).on('click', function(e){
//whatever you want
$('#exportLink').attr('href', 'something').trigger('click');
});
});
$("#exportLink").click(); // this would launch the event.
I must admit I am very surprised that the .click() does not work.
If the idea is to load the page, then the alternative is
$(function() {
$("#multiExport" ).on('click', function(e){
e.preventDefault();
var list = [];
$('.appSelect:checked').each(function(){
var name = $(this).attr('name');
var val = $(this).val();
list.push([name, val]);
});
var serList = JSON.stringify(list);
var webRoot = $("#webRoot").text();
location=webRoot+"/admin/admin_export_multiExport.php?emailList="+serList;
});
});

jQuery click dynamic element

See the code's comment:
$.each($('input[type="radio"]'), function(){
var input = $(this);
var container = $('<div class="radio"></div>');
var mark = $('<span />');
input.wrap(container).after(mark);
container.click(function(){
alert('test'); // Not triggered.
});
});
The html is:
<input type="radio" value="female" name="gender" />
Anyone know why the alert is not triggered when clicked, and yes it is visible in CSS. When I use :
console.log(container);
It does give me the HTML it is containing.
Thanks
$('body').on('click', 'div.radio', function() {
});
Full Code
$('body').on('click', 'div.radio', function() {
alert('test');
});
$.each($('input[type="radio"]'), function(){
var input = $(this);
var container = $('<div class="radio"></div>');
var mark = $('<span />');
input.wrap(container).after(mark);
});
NOTE
Instead of body, you should use a static-element that is the container of container.
Why you need this
You need delegate event handler, as your element added to DOM dynamically that means. after page load.
after some tested it seems to me that the "wrap" clone the object you pass it as argument, or reference to the object is lost but I'm not so sure.
a first solution is to assign the event "onclick" before moving the object in the "wrap".
$.each($('input[type="radio"]'), function(){
var input = $(this);
var container = $('<div class="radio"></div>');
var mark = $('<span />');
$(container).click(function(){
alert('test'); // triggered now.
});
input.wrap(container).after(mark);
});
a simplified version :
$.each($('input[type="radio"]'), function(){
var wrapper = $('<div class="radio"></div>').click(function(){
alert('test'); // triggered now.
});
$(this).wrap(wrapper).after($('<span />'));
});
dont forget to decalare this function in the onload function
$(function(){
// your code here ....
});
I was also affected by this and found that on is available only with jquery 1.7 and above.
I am on jquery 1.4.1 and on is not available with version. Upgrading jquery was something I wanted to avoid.
Thankfully delegate was there and it solved the problem.

Hooking events with .on() with JQUERY

I want to hook events with the .on() method. The problem is I don't know how to get the object reference of the element on which the event take place. Maybe it's a midunderstanding of how the method really works... but I hope you can help.
Here's what I want to do:
When a file is selected, I want the path to be displayed in a div
<div class="wrapper">
<input type="file" class="finput" />
<div class="fpath">No file!</div>
</div>
Here's my script
$(document).ready(function() {
$this = $(this);
$this.on("change", ".finput", {}, function() {
var path = $(this).val()
$(this).parents().children(".fpath").html(path.split("\\").pop());
});
});
Something like that but that way it doesn't work.
Like this
$(document).ready(function() {
$('.finput').on("change", function() {
var path = $(this).val()
$(this).parents().children(".fpath").html(path.split("\\").pop());
});
});
Do you need to use on()? I'm not sure what you are trying to do exactly.
$("#wrapper").on("change", ".finput", function(event){
var path = $(this).val()
$(this).parents().children(".fpath").html(path.split("\\").pop());
});
I haven't tested your code, but you need to attach the on() to the wrapper.
Can you just use change()?
$('.finput').change(function() {
var path = $(this).val()
$(this).parents().children(".fpath").html(path.split("\\").pop());
});
This should help. If you want to see when a file input changes, bind the event to it
$("input[type='file']").on("change", function(e){
var path = $(this).val();
})
Try:
$(document).ready(function() {
$('body').on('change','input.finput', function() {
var path = $(this).val()
$(this).parent().children(".fpath").html(path.split("\\").pop());
});
});
$(document).on("change", ".finput", function() {
$(".fpath").html(this.value.split("\\").pop());
});
This is a delegated event handler, meaning the .finput element has been inserted dynamically so we need to delegate the listening to a parent element.
If the .finput element is not inserted with Ajax and is present on page load, you should use something like this instead:
$(".finput").on("change", function() {
$(".fpath").html(this.value.split("\\").pop());
});

jquery textarea value focus

This is probably stupidity on my part, but where am I going wrong with this?
$(function() {
$('textarea#comment').each(function() {
var $txt = $(this).val();
$(this).bind('focus', function() {
if($(this).val($txt)) {
$(this).val('');
}
});
});
});
Basically on focus I want to check if the value is the default value in this case 'Enter your comment', then if it is change the value to nothing.
Anyone know how to do this? I'm guessing its relatively simple. What the code does at the moment is removes any value.
Ok first off you should only have one tag with the id of comment since ids are supposed to be unique, but if we go with your code you have to setup a default value first like this:
<textarea id="comment">Enter text here</textarea>
Now the javascript:
(function() {
$('textarea#comment').each(function() {
var $txt = $(this).val();
//alert($txt);
$(this).bind('focus', function() {
if($(this).val() === this.defaultValue) {
$(this).val('');
}
});
});
})();
The self executing function syntax has been corrected here and should be as follow:
(function () { // my code here })();
and for default value use:
this.defaulValue; // works for input boxes as well
Hope it helps. Cheers
jquery_example plugin do exactly what you need. You may have a look at its source code and get some inspiration. Or you can store the default value as meta-data on the tag and check against it on change event of the textarea tag.
try
$('#comment').live('click change focus', function() {
var $txt = $(this).val();
if($txt == 'Enter your comment' );
$(this).val('');
});
DEMO

Categories