Remove HTML onchange code using jQuery - javascript

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");
});
});

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">

selector with two property

I'm trying to loop unto all the input that has a required attribute and which value is empty.
I tried this
$("input[required][value='']").each(function(){
alert("s");
});
but unfortunately, not working. Any help, ideas?
Try like this:
$("input[required]").filter(function(){
return $(this).val().length === 0;
}).each(function(){
alert("s");
});
Your code should work as it is, just put it inside $(function()... as shown below.
$(function(){
$("input[required][value='']").each(function(){
alert("s");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input value="" required>
<input value="">
It should be
$("input[required][value='']").each(function)({
alert("s");
});

Trigger Event on Text box Value change

I want execute the alert inside the $("#address").change function , but that needs to be done only if the the value is changed using the button .
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('button').click(function(){
$("#address").val("hi")
})
$("#address").change(function(){
alert("The text has been changed.");
});
});
</script>
</head>
<body>
<input type="text" id="address">
<button>Click</button>
</body>
</html>
You can trigger change event in click function:
$('button').click(function(){
$("#address").val("hi")
$("#address").change(); //or $("#address").trigger("change");
});
$("#address").change(function(){
alert("The text has been changed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="address" type="text">
<button>Change</button>
Trigger the change event like this:
$('button').click(function(){
$("#address").val("hi")
$("#address").trigger('change');
});
$("#address").change(function(){
alert("The text has been changed.");
});
If you want the alert on #address change only when the button is clicked and not when changing the #address value manually:
var textChangedHandler = function() {
alert("The text has been changed.");
};
$('button').click(function(){
// Attach event handler for 'change' to #address
$("#address").bind("change", textChangedHandler);
// Update #address value
$("#address").val("hi");
// Trigger 'change'
$("#address").trigger('change');
// Remove event handler for 'change' from #address
$("#address").unbind("change", textChangedHandler);
});
DEMO

When we assign value jQuery event call?

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();

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