When we assign value jQuery event call? - javascript

I have two text fields:
<input type="text" id="ex_1" class="update">
<input type="text" id="ex_2" class="update">
I want when I assign value:
jQuery("#ex_1").val(12);
jQuery event called like below but not on the change but on assign value:
jQuery(".update").change();
jQuery(".update").live('keyup change', function()
{
alert(jQuery(this).val());
}
On the assignment of value jQuery event called?

you can use like this
$(".update").keyup(function () {
$(this).trigger("change");
});
$(".update").change(function () {
alert("change");
});
DEMO

Is this what you are looking for>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../JS/jQuery.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("input").change(function () {
alert('in'); // do you stuff here
});
$("#Button1").click(function () {
$("input").val(12);
$("input").trigger("change");
});
});
</script>
</head>
<body>
<input type="text" id="ex_1" class="update">
<input type="text" id="ex_2" class="update">
<input id="Button1" type="button" value="button" />
</div>
</body>
</html>
.trigger("change") will invoke the elements change function.
In the code above, on click of the button the val will be changed and also the change function will be triggered.
Syntax :
$("selector_of_element").trigger("event_function");

The change event fires only if the value is changed by the user interaction.
If you want to fire event then you have manually trigger event. So use .change(); or.trigger('change');

If you're programatically assigning value, you'll have to manually trigger the change event. Check this answer.
Try this:
jQuery('#ex_1').val(12).change();

Related

Jquery .on() 'keyup' function does not work

I am trying to give event when pressing keyboard.
Don't know why this does not work. Any help?
$('input').on('keyup', '.aa', function() {
alert('hello');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="aa">
You have missed to prefix the dot before the class.
Also use a static container instead of input. Try $('body').on('keyup', '.aa', function(){
$('body').on('keyup', '.aa', function(){
alert('hello');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="aa">
Have you tried:
HTML:
<input type="text" class="aa">
jQuery:
$('.aa').keyup(function() {
alert('hello');
});
The keyup event above is just a shortcut for .on( "keyup", handler )
Another way of doing it is just put the class identified right in the selector
$('input.aa').on('keyup', function(){
alert('hello');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="aa">

Remove HTML onchange code using jQuery

Below code snippet has HTML onchange attribute as well as jQuery's change event on the input text. I want only the jQuery's change event to be effective. I tried using both unbind and off without luck.
Could somebody please help?
$(document).ready(function(){
$("#testInput").unbind("change").bind("change",function(){
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');"/>
If you want to remove the "previous" onchange event, use
$("#testInput").removeAttr("onchange")
$(document).ready(function() {
$("#testInput").removeAttr("onchange")
$("#testInput").unbind("change").bind("change", function() {
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');" />
Just remove onchange attribute. removeAttr('onchange') will remove onchange attribute
$(document).ready(function(){
$("input").each(function(){
$(this).removeAttr('onchange');
});
$("input").bind("change",function(){
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');"/>
<input id="testInput2" type="text" onchange="console.log('change');"/>
you could set the onchange to null and add listener, like:
$(document).ready(function(){
//remove inline 'onchange' event by setting it to null
$("#testInput")[0].onchange = null;
$(document).on("change" "#testInput", function(){
console.log("jQuery change");
});
});
try this
$(document).ready(function(){
$(document).on('change','#testInput',function(){
console.log("jQuery change");
});
});

javascript onkeypress input text

I am learning Javascript.. Below code working only if my script tag below my input text element, but if i place code above input text tag, its not working. May I know why? Below is code:
<head>
</head>
<body>
<input type="text" id="name" >
<script type="text/javascript">
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
</script>
</body>
Below code is same as above except that I am using function, inside which I am using same code as above. But in this case, my script tag is above input text tag, and its working. How it's working in this case? Below is the code:
<head>
<script type="text/javascript">
function keyPressListener(){
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
}
</script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">
</body>
So, what exactly difference between above 2 codes?
When you are using the onkeypress attribute. It actually works the same way as the addEventListener. You just have to write a simple function and call it in onkeypress
<input type="text" id="name" onkeypress="keyPressed()">
<script>
function keyPressed(){
console.log('Key Pressed');
}
</script>
Why is not working to place above the input
-Because document was not ready .so you need body.onload event .see the body onload=start() it will apply the js function after body loaded
<body onload="start()">
<input type="text" id="name">
<script type="text/javascript">
function start() {
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e) {
console.log('Pressed!')
})
}
</script>
</body>
And the second one -you are using two function in a single event. So use with any one of the event
if use with inline keypress of keyPressListener() else use Dom event of the
keypress (addEventListener)
*Note:
Dont include the addEventListener() inside keyPressListener() .
If you use with addEventListener() remove the onkeypress event inline of the markup.
because both are same action .
<head>
<script type="text/javascript">
function keyPressListener() {
console.log('Pressed!')
}
</script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">
</body>
You can use addEventListener.
Or try this as your input:
Add a ; after keyPressListener():
<input type="text" id="name" onkeypress="keyPressListener();">
If that doesn't work try this:
<input type="text" id="name" onkeypress="keyPressListener(); return true;">
HTML5 knows that when you use an onkeypress attribute that it needs to call the JavaScript function when the key is pressed. You can basically put any functional JavaScript in the parameter for the onkeypress="(JavaScript goes here)" attribute.
You can also just grab the element from the DOM and then add the event listener to the element like so:
jQuery: $('#name').onkeypress( function() { //code goes here } );
Regular Js: document.getElementById('name').onkeypress( function() { //code goes here } );

Doesn't set event on input when click button

I wrote function, which control input text. When I click button, in Input set value. In that time I need that function 'StartDate1.change' control change input value. So if this is value no equals 12/24/2013 -> clear field. But this is function doesn't work. Can you help me fix it?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="demo_form.asp">
Date: <input type="text" name="Phone" title="title1" value="">
<input id="target" class="ms-ButtonHeightWidth" type="button" accesskey="O"
value="Add date" >
</form>
<script type="text/javascript">
$(document).ready(function(){
$( "#target" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.val('12/25/2013');
});
var StartDate1=$('[title="title1"]');
StartDate1.change(function(event){//doesn't get here
window.setInterval(function(){
if($(event.target).val()==='12/24/2013')
{
//some code
}else
{
$(event.target).val('');
}
});
});
});
</script>
</body>
</html>
This is example on fidler:
Fiddle
If you need to control value in input field use keyup handler
http://jsfiddle.net/yPYDJ/5/
The onchange event only fires when the value changes and the input loses focus.
You can trigger it manually changing your code like this:
$( "#target" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.val('12/25/2013');
StartDate.change();
});
The function passed to window.setInterval is called repeatedly. So value set by the function on button click is reset immediately.
var timeFunction;
$( "#targetb" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.off('change');
StartDate.val('12/25/2013');
StartDate.on('change',function(event){
console.log("lol");
timeFunction=window.setInterval(clearInput,2000);
});
});
function clearInput(){
var StartDate=$('[title="title1"]');
if(StartDate.val()==='12/24/2013')
{
//some code
}else
{
StartDate.val('');
window.clearInterval(timeFunction);
}
}
I have created a new fiddle http://jsfiddle.net/yPYDJ/4/. Check this and accept it ifthis is what you expected.

Show/Hide with Checkbox using jQuery

I am trying to have a section of an html form to show/hide based on a checkbox. This is the essence code I have:
<script src="/js/jquery.js"></script>
<script language="JavaScript">
function toggle(className){
var $input = $(this);
if($(this).prop('checked'))
$(className).show();
else
$(className).hide();
}
</script>
<fieldset><legend>Check Here
<input type="checkbox" onclick="toggle('.myClass')" ></legend>
<span class="myClass">
<p>This is the text.</p>
</span>
</fieldset>
When you click on the checkbox, the span gets hidden and will not come back. I have also used $(this).is(':checked'). It appears that $(this).prop('checked') is evaluating to false whether it is checked or not. My best guess is that I am using $(this) incorrectly. What am I missing here?
HTML, pass this from on click event
<input type="checkbox" onclick="toggle('.myClass', this)" ></legend>
JS
function toggle(className, obj) {
var $input = $(obj);
if ($input.prop('checked')) $(className).hide();
else $(className).show();
}
OR, without using prop you can just do:
function toggle(className, obj) {
if ( obj.checked ) $(className).hide();
else $(className).show();
}
OR, in one-line using .toggle( display ):
function toggle(className, obj) {
$(className).toggle( !obj.checked )
}
Use an event handler that is'nt inline, and then just toggle() the element based on the checkbox state :
<script src="/js/jquery.js"></script>
<script type="text/javaScript">
$(function() {
$('input[type="checkbox"]').on('change', function() {
$(this).closest('fieldset').find('.myClass').toggle(!this.checked);
});
});
</script>
<fieldset>
<legend>Check Here<input type="checkbox"></legend>
<span class="myClass">
<p>This is the text.</p>
</span>
</fieldset>
FIDDLE
This would even work with several fieldset's with the same markup.
try binding event via jQuery, and then you can access to $(this):
$(document).ready(function() {
$(":checkbox").click(function(event) {
if ($(this).is(":checked"))
$(".myClass").show();
else
$(".myClass").hide();
});
});
<input type="checkbox" checked>
<input type="text" id="amount">
$document.ready(function() {
$("input:checked").on("click",function () {
$("#amount").toggle()
})
});

Categories

Resources