on change event fires only once - javascript

i'm trying to update cart whenever product quantity is changed. but jquery code is stop working after first time updating cart items.
here is jquery code
jQuery(document).ready(function($){
$("input.qty").on('keyup change click',function(){
$('input[name=update_cart]').trigger('click');
});
});

Please try following code.
jQuery(document).ready(function($){
$(document).on('keyup change click','input.qty', function() {
$('input[name=update_cart]').trigger('click');
});
});
let me know if you require further information.

Use the input event
jQuery(document).ready(function($){
$("input.qty").on('input',function(){
$(this).closest('form').submit();
});
});

Your code is working. See result of below code.
jQuery(document).ready(function($){
var count = 0;
$("input.qty").on('keyup change click',function(){
$('input[name=update_cart]').trigger('click');
count++;
});
$('input[name=update_cart]').click(function(e){
$(this).val('Click called '+count);
});
});
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<input class="qty" name="test"/>
<input name="update_cart"/>

Related

Detect if a field is updated with JavaScript or jQuery

I have a very extensive template, and there is a form that updates the value of a text field with JavaScript or jQuery, this function has not been able to locate it, and I need to detect when this field is updated, I have tried with all these functions, but it is not detecting when it is updated.
What is the reason why it is not detected when the field is updated from JavaScript but is detected when updated when I write and click outside the field?
Important: The value 90,000 "that is added dynamically, makes it a specific function, which I have not been able to find, and is to try to detect if the value changed with JavaScript.
$(function(){
// Automatic update, strange function
setTimeout(function(){
// Value updated automatically
$('#long').val("90.000");
}, 2000);
/**
* Detect if that field is updated
*/
$('input#long').on('change', function(){
alert("Updated");
});
$(':input').on('change', function(){
alert("Updated");
});
$('input#long').change(function(){
alert("Updated");
});
$(document).on('change', 'input#long', function(){
alert("Updated");
});
$(document).on('change', 'input', function(){
alert("Updated");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
So, according to your edits/comments from other answers, you cannot trigger change manually.
A MutationObserver would be a good way to solve this, except they can't observe input value changes, as explained here.
Your only way out, as far as I can tell, is using setInterval to compare the current value with the old one every few milliseconds. A bit ugly and not optimal at all, but does the job. Here's a sample:
$(function() {
setTimeout(function() {
$('#long').val('90.000');
}, 1000);
$('#long').on('change', function() {
alert('changed');
});
// Store the current value
$('#long').data('oldVal', $('#long').val());
// Every 100ms, trigger `change` event whenever new value != old
setInterval(function() {
if ($('#long').val() !== $('#long').data('oldVal')) {
$('#long').trigger('change');
$('#long').data('oldVal', $('#long').val());
}
}, 100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
You can use the change method from jquery to subscribe the event.
The html
<input class="target" type="text" value="Field 1">
and the script
$(".target").change(function() {
alert( "Handler for .change() called." );
});
See this codepen
See the jquery docs
DOM events won't be triggered by JS/jQuery calls. You can easily trigger the change event manually, like this:
$('#long').val('90.000').trigger('change')
Sample:
$(function(){
// Automatic update, strange function
setTimeout(function(){
// Value updated automatically
$('#long').val("90.000").trigger('change');
}, 2000);
/**
* Detect if that field is updated
*/
$('input#long').on('change', function(){
alert("Updated");
});
$(':input').on('change', function(){
alert("Updated");
});
$('input#long').change(function(){
alert("Updated");
});
$(document).on('change', 'input#long', function(){
alert("Updated");
});
$(document).on('change', 'input', function(){
alert("Updated");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
Have you tried the keyup trigger wich fires straight when the key is released?
$(function(){
// Automatic update, strange function
setTimeout(function(){
// Value updated automatically
$('#long').val("90.000");
}, 2000);
/**
* Detect if that field is updated
*/
$( "#long" ).keyup(function() {
alert( "Handler for .keyup() called." );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
Use keyup and paste instead of change. See keyup()
$(function(){
// Automatic update, strange function
setTimeout(function(){
// Value updated automatically
$('#long').val("90.000");
}, 2000);
/**
* Detect if that field is updated by key press or pasting text
*/
$(document).on('keyup paste', 'input', function(){
alert("Updated text field");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
change()
The change event is sent to an element when its value changes. This
event is limited to input elements, textarea boxes and select
elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse,
but for the other element types the event is deferred until the
element loses focus.

JS .click() trigger not working

I'm using dropzone.js to upload files.
I have a dropzone button #btn and input field #input.
This code is working:
$('#input').on('input', function() {
$("#btn").click();
});
But when I use $("#btn").click(); in other part, for example below, it's not working and I have no errors:
$(document).ready(function(){
$("#btn").click();
});
What is wrong?
You are trying to simulate the click event so you need to use trigger() with click event like
$("#btn").trigger("click")
Change your code to:
$(document).ready(function(){
$("#btn").trigger("click");
});
click() its vanila javascript function that mean trigger type.
element.on.click(){
doSomthing;
}
Dropzone is probably taking some time to initialize by the same document.ready event. So give it a time. I would try:
$(document).ready(function(){
setTimeout(function(){
$("#btn").trigger("click");
}, 100);
});
Try this
$(document).ready(function(){
$("button").click(function(){
alert("The paragraph was clicked.");
});
});
or instead of id give class name
$(document).ready(function(){
$(".btn-primary").click(function(){
alert("The paragraph was clicked.");
});
});
$('#btn').click( function() {
console.log('success');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value='upload' id='btn'>
Upload
</button>

jQuery getting data attribute not working

I have a script that produces a number of buttons with a class and I want it to alert the data attribute on click but it's not working.
Here is the output of HTML
<button class="request box-button" data-value="18492500814">Request</button>
jQuery code
$(document).ready(function(){
$('.request').each(function () {
var photoID = $(this);
photoID.click(function () {
alert($(this).data('value'));
});
});
});
Since your elements don't exist when the page loads, the event won't be bound to them. Fix that by using event delegation:
$(document).ready(function(){
$(document).on('click','.request', function () {
alert($(this).data('value'));
});
});
JS Fiddle demo with dynamically generated elements
Note: Here, I used $(document).on() because I don't have your page's structure. But if you insert the buttons in a container that already exists in your HTML, use this instead: $('#myContainer').on(). It won't be noticeable, but it is best for performance.
Why not just have the listener on request, instead of inside of the loop. Also use the attr to get the data-value
$(document).ready(function(){
$('.request').click(function () {
alert($(this).attr('data-value'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="request box-button" data-value="18492500814">Request</button>
Try with attr method.
$(document).ready(function(){
$('.request').each(function () {
var photoID = $(this);
photoID.click(function () {
alert($(this).attr('data-value'));
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button class="request box-button" data-value="18492500814">Request</button>

When I trigger an event, it is fired few times instead one time on input in jQuery

I have the following HTML code, simple one:
<input type="text" />
<input type="hidden" />
<input type="button" value="ok" />
and javascript:
$(function(){
$(":text").on("keyup", function(){
$(":hidden").val($(this).val()).trigger("propertychange");
});
$(":hidden").on("propertychange", function(){
alert($(this).val());
});
$(":button").on("click", function(){
alert($(":hidden").val());
});
});
When I type something in input type text then alert is displayed few times instead of once time.
How to fix it ?
See jsFiddle. (I checked with Firefox)
Your :hidden selector is actually matching 8 elements (including <head>, <title> and <script>) instead of only the hidden input, hence the propertyChange event is raised for each one.
From jQuery hidden documentation:
In some browsers :hidden includes head, title, script, etc...
Try this instead:
$("input:hidden").on("input propertychange", function(){
alert($(this).val());
});
Try this,
$(function(){
$(":text").on("keyup", function(e){
e.preventDefault();
$(":hidden").val($(this).val()).trigger("propertychange");
alert($(this).val());
});
$(":hidden").on("input propertychange", function(){
});
$(":button").on("click", function(){
alert($(":hidden").val());
});
});
Apply any class or ID to hidden, due to using fiddle, it is accessing some other hidden objects also. Try below code.
$(function(){
$(":text").on("keyup", function(){
$(".md:hidden").val($(this).val()).trigger("propertychange");
});
$(".md:hidden").on("input propertychange", function(){
alert($(this).val());
});
$(":button").on("click", function(){
alert($(".md:hidden").val());
});
});
I updated your fiddle check this [fiddle](http://jsfiddle.net/gkvgzc5p/2/)

check change in drop down list every time click button

check change in drop down list every time a button is clicked and my button is an image
Code:
<select id="dropdown_name">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
<img src="images.jpg" class="btn"/>
<script language="javascript">
var com;
$('#dropdown_name').change(){
com=$(this).val();
}
$('.btn').click(function(){
alert(com);
//code
}
</script>
you have lots of error in you code...
<script language="javascript">
var com;
$('#dropdown_name').change(function(){ //missing function here
com=$(this).val();
}) //<---missing bracket here;
$('.btn').click(function(){
alert(com);
//code
}); //<-- missing bracet here
</script>
from whatever i understood i assum you need this..
try this
$(function(){
$('.btn').click(function(){
alert($('#dropdown_name').val());
});
});
your script is not valid .. Supposed to look like this
Also there is a typo in the click event .. comp is supposed to be com
var com;
$('#dropdown_name').change(function () {
com = $(this).val();
}).change();
$('.btn').click(function () {
alert(com);
//code
});
Working fiddle
I'm not sure what your question is . But i am guessing you are trying to
to bind the change event on click of the image . If that is the case , this will help.
$('.btn').click(function () {
$('#dropdown_name').change(function () {
alert("changed to : "+ $(this).val());
});
});
Now the change event binded to dropdown_name only after click the event , if the image/.btn is not click you will not get any alert while changing the select
Working Fiddle

Categories