check change in drop down list every time click button - javascript

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

Related

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>

on change event fires only once

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

Javascript onchange on select inside script

I'm learning Javascript, and here's what I'm trying to do...
<body>
<select name="selTitle" id="titles">
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
</select>
</body>
and for the script,
<script type='text/javascript'>
var title = document.getElementById("titles");
title.onchange = function() {
alert("Hi");
}
</script>
But its not working, am I doing something wrong? Here's the demo.. http://jsfiddle.net/jq9UA/10/
Wrap your code in onload event:
window.onload = function(){
var titles = document.getElementById("titles");
titles.onchange = function() {
alert("Hi");
}
};
Working Demo
This makes sure that select box is actually available to apply events to which you can do using onload event or puting your script at bottom of your page just before </body> tag.
its working fine.
just change the options like this:

Why doesn't this click handler work in JQuery?

I've got the following code in my page:
var offer_link = $('<a>').addClass('fc-offer-link');
offer_link.click(function() {
alert('Hello');
});
offer_link.attr('href', "#" + this.id);
offer_link.append(this.subject);
this.list_item = $('<li>');
this.list_item.append(offer_link);
But even though the link appears on the page, the handler never gets called. What's going on?
The problem turned out to be where the item got inserted into the DOM. It was being inserted using:
$('#my_list').html(my_new_list.html())
It should have been using:
$('#my_list').replaceWith(my_new_list)
I think you just need to append the link to an element, like this:
<script type="text/javascript">
$(function(){
var link = $("<a>Click Me!</a>").addClass("fc-offer-link").appendTo($("#div1"));
if (link){
link.click(function(){
alert("Hey there!");
});
}
});
</script>
<div id="div1"></div>
EDIT: Not sure why I was downvoted, but here's a jsFiddle

jQuery: Make div clickable to check nested checkbox

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#myDiv').click(function() {
var checkBox = $(this).children("input[type='checkbox']");
checkBox.attr('checked', !checkBox.attr('checked'))
});
});
</script>
<div id="myDiv" style="background-color:red;height:50px;width:50px;">
<input type="checkbox" />
</div>
I'm having problems making the div clickable so that it checks the nested checkbox. I would like to make it so this function works only if the mouse is not hovering the checkbox. How can I do this? Something like this:
if (!checkBox.isHover)
checkBox.attr('checked', !checkBox.attr('checked'))
Note this question has been asked here before, but the answers did not seem to solve the problem. The wrapped label solution does not work properly in FireFox. Thank you.
Try this:
$('#myDiv').click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
evt.stopPropagation();
return false;
}
});
Untested, but I just successfully used something along these lines on a project.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#myDiv').click(function(e) {
e.stopPropagation();
var checkBox = $(this).children("input[type='checkbox']");
checkBox.attr('checked', !checkBox.attr('checked'))
});
});
</script>
The issue is that if you actually click on the checkbox it will still trigger the click event on the div - event bubbling. You can add a click event to the checkbox which stops the bubbling, this way only the div binds to the event.

Categories