Im trying to gather the images selected, take their values, put them into an array, and then push them to a mysql database.
Here is my current code
$(document).ready(function() {
var startfind = $("body").find('.on').val();
var awnsers = $('.on').map(function() {
return $(startfind).text();
}).get().join(',');
$("img").click(function() {
$(this).toggleClass("on");
});
$('button').click(function() {
alert(awnsers);
});
});
#seasoning {
margin: 8px;
font-size: 16px;
height: 100px;
width: 100px;
}
.on {
padding: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.imgur.com/7HyU4yh.jpg" id="seasoning" value="0">
<br>
<img src="https://i.imgur.com/OEHCjCK.jpg" id="seasoning" value="1">
<br>
<button>Submit</button>
I can't get the alert to show the values of the items selected.
You can trigger an event when you click on an image
Then listen on that event, an update the answer
use answer when you need it
an I change a little in your html code, that change img's value attr to data-value
============Here is the code and jsFiddle=======================
$(function(){
//catch this values, because you will use these for more than one time
var answers = [];
function getAnswers(){
answers = []; //empty old answers so you can update it
$.map($('.on'), function(item){
answers.push($(item).data('value'));
});
}
//init the answers in case you use it before click
getAnswers();
$(document).on('click', 'img', function(e){
e.preventDefault();
$(this).toggleClass('on');
//trigger the state change when you click on an image
$(document).trigger('state-change');
});
//get answers when event was triggered
$(document).on('state-change', function(e){
getAnswers();
});
$('#btn-show').click(function(){
alert(answers.join(',') || 'nothing was selected');
});
});
#seasoning {
margin: 8px;
font-size: 16px;
height: 100px;
width: 100px;
}
.on {
padding: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.imgur.com/7HyU4yh.jpg" id="seasoning" data-value="0">
<br>
<img src="https://i.imgur.com/OEHCjCK.jpg" id="seasoning" data-value="1">
<br>
<button id="btn-show">Submit</button>
Please check this code.
$("img").on('click',function() {
$(this).toggleClass("on");
});
$(document).on('click', 'button', function() {
var awnsers = $('.on').map(function() {
return $(this).attr('value');
}).get().join(',');
alert(awnsers);
});
Working fiddle - http://jsfiddle.net/Ashish_developer/6ezf363a/
Related
I have a question about a code like the following:
$(function() {
var checkboxCnt = 1;
var checkboxHtml =
`<br><input type="checkbox" id="checkbox${checkboxCnt}">` +
`<label for="checkbox${checkboxCnt}">Checkbox 1</label>`;
// ******************************************
$('div :checkbox').change(function(e) {
checkboxChanged(e);
});
// ******************************************
$('#btn').click(function() {
checkboxCnt++;
checkboxHtml = checkboxHtml.replaceAll(checkboxCnt - 1, checkboxCnt);
$(this).before($(checkboxHtml));
// ******************************************
$('div :checkbox').change(function(e) {
checkboxChanged(e);
});
// ******************************************
});
function checkboxChanged(e) {
var checkboxID = '#' + e.target.id;
if ($(checkboxID).is(':checked')) {
console.log(checkboxID + ' is checked');
} else {
console.log(checkboxID + ' is unchecked');
}
}
});
#btn {
width: 100px;
height: 100px;
background-color: yellow;
display: block;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div>
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Checkbox 1</label>
<button type="button" id="btn">Click Me!</button>
</div>
Sample can be found on https://jsfiddle.net/da7wLukz/.
This is just a simplified version of the code I'm currently editing, and it adds a checkbox every time when you hit the button. I want to execute something every time when the checkboxes are (un)checked, but I've come across the problem that when you have 4 checkboxes and check the checkbox4, the change event is triggered only once but when you check the checkbox3, it's triggered twice, and when you check the checkbox2, it's triggered 3 times and so on. The code has the same lines inside and outside of $('#btn).click because, let's say we don't have the $('div :checkbox).change event inside the $('#btn).click event, then the change event isn't triggered when checkbox2, 3, 4... are checked.
I just want the change event to be triggered only once when I (un)check the checkbox, but how can I do this? Thank you for your help in advance.
Don't nest event handlers. Use unobtrusive event handling via $(document).on() (docs):
$(function() {
var checkboxCnt = 0;
var checkboxHtml =
`<input type="checkbox" id="checkbox$%%">` +
`<label for="checkbox$%%">Checkbox %%</label><br>`;
function addCheckbox() {
checkboxCnt++;
$("#btn").before(checkboxHtml.replaceAll('%%', checkboxCnt));
}
$(document).on('change', 'div :checkbox', function () {
if (this.checked) {
console.log(this.id + ' is checked');
} else {
console.log(this.id + ' is unchecked');
}
});
$('#btn').click(addCheckbox);
addCheckbox();
});
#btn {
width: 100px;
height: 100px;
background-color: yellow;
display: block;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div>
<button type="button" id="btn">Click Me!</button>
</div>
I have simple div with one element:
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
When I click on #drop-zone I want to trigger input manually. I'm trying like this:
jQuery('#drop-zone:not(input)').click(function() {
jQuery(this).find('input[type="file"]').trigger('click')
})
The main problem is that I'm getting an endless loop of clicks as my manual click trigger listener on parent element.
Make sure that the element clicked was the drop-zone by checking the id of the target. When jQuery emulates an event it will pass the same this reference but will not pass the event, so just check if the event is set.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone" && event.originalEvent) {
$("#drop-zone>input").trigger("click");
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
You could also just trigger the event manually.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone") {
$("#drop-zone>input")[0].click();
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
Maybe this is what you want:
var x_m = 0;
var y_m = 0;
$('#drop-zone').click(function(event) {
var mtarget = document.elementFromPoint(x_m, y_m);
if (mtarget.id === "drop-zone") {
var input = $(this).find('input[type="file"]');
var h = false;
if ($(input).is(":visible")) {
input.hide();
} else {
input.show();
h = true;
}
console.log("You clicking, the #drop-zone, input.visible =>", h);
} else {
console.log("You clicking the input.");
}
})
$('body').mousemove(function(evt){
x_m = evt.pageX;
y_m = evt.pageY;
});
#drop-zone {
height: 40px;
width: 250px;
background-color: #8b5fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none; background: green;" multiple="multiple">
</div>
I have a comparison in my if statement to check if the id's are identical, but I want to detect the B element who has the same id as the A element and give him a class. You can see the problem in this script:
jQuery('.button').click(function() {
var a = jQuery('.a').attr('id')
var b = jQuery('.b').attr('id')
if (a === b) {
// "jQuery(this)" should be the detectet B-element, which has the same "id" as A
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
jQuery(this).addClass("active");
jQuery(this).css("background", "red");
// But it detects the button as "jQuery(this)"
} else {
return;
}
});
.a,
.b,
.c {
width: 100px;
height: 100px;
margin: 1em;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Button
<div class="a" id="block">A</div>
<div class="b" id="block">B</div>
<div class="c" id="notblock">C</div>
Thanks for helping!
Here is the optimised code that you can have a look at. Instead of ID, you can use data attributes:
jQuery('.button').click(function() {
var a = jQuery('.a').data('check');
var $belement = jQuery('.b');
var b = $belement.data('check');
if (a === b) {
$belement.addClass("active").css("background", "red");
}
});
.a,
.b,
.c {
width: 100px;
height: 100px;
margin: 1em;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Button
<div class="a" id="block-a" data-check="block">A</div>
<div class="b" id="block-b" data-check="block">B</div>
<div class="c" id="notblock" data-check="notblock">C</div>
Ideally, DOM should never have same IDs. IDs are unique, classes can be same. And hence, your entire logic or question is kinda incorrect. You should rather compare some value or other attributes, but never IDs. IDs can't be compared as they are supposed to unique.
Try this : you need to get b element jquery object, here jQuery(this) is the button you clicked
jQuery('.button').click(function() {
var a = jQuery('.a').attr('id');
var $belement = jQuery('.b');
var b = $belement.attr('id')
if (a === b ) {
// "jQuery(this)" should be the detectet B-element, which has the same "id" as A
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
$belement.addClass("active");
$belement.css("background", "red");
// But it detects the button as "jQuery(this)"
}
else {
return;
}
});
.a, .b, .c {
width: 100px;
height: 100px;
margin: 1em;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Button
<div class="a" id="block">A</div>
<div class="b" id="block">B</div>
<div class="c" id="notblock">C</div>
jQuery('.button').click(function() {
var a = jQuery('.a').attr('id')
var b = jQuery('.b').attr('id')
if (a === b ) {
// "jQuery(this)" should be the detectet B-element, which has the same "id" as A
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
jQuery('.b').addClass("active");
jQuery('.b').css("background", "red");
// But it detects the button as "jQuery(this)"
}
else {
return;
}
});
Add the class to the element.
Here I am having one div and one input text. I can get the input element value which is focused, but couldn't get the div value.
If I use .val(), I can get the input text value.
If I use .html(), I can get div element value.
But, I need the value of whatever is focused.
HTML
<div class="tab_common tab_addclass" tabindex="-1">4</div>
<input class="text-input tab_addclass" id="other-input"/>
<button type="button" id="btn">Validate</button>
JS
$(document).on ('click', '.tab_addclass', function(){
$('.tab_addclass').each(function() {
if($(this).hasClass('tab_focus'))
{
suc_flg=1;
$(this).removeClass('tab_focus');
}
});
$(this).addClass('tab_focus');
});
$(document).on ('click', '#btn', function(){
alert($('.tab_focus').val());
});
CSS
.tab_focus {
border: 2px solid #7ECC27;
background-color: #F2F2F2;
}
.tab_common{
border: 2px solid #d4d4d4;
border-radius: 4px;
cursor: pointer;
}
div {
background: #fff;
margin: 20px;
}
div:focus {
border: 2px solid #7ECC27;
}
JSFIDDLE
$(document).on ('click', '.tab_addclass', function(){
$('.tab_addclass').each(function() {
if($(this).hasClass('tab_focus'))
{
suc_flg=1;
$(this).removeClass('tab_focus');
}
});
$(this).addClass('tab_focus');
});
$(document).on ('click', '#btn', function(){
var test = $('.tab_focus').html()||$('.tab_focus').val()
alert(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tab_common tab_addclass" tabindex="-1">4</div>
<input class="text-input tab_addclass" id="other-input"/>
<button type="button" id="btn">Validate</button>
Updated answer that returns the value of the most recently focused div or input following a button click:
$(document).on('click', '#btn', function () {
var focusExist = $(".focus").length;
if (focusExist) {
$focus = $(".focus");
if ($focus.hasClass("tab_common")) {
var tabValue = $focus.text();
alert(tabValue);
} else {
var inputValue = $focus.val();
alert(inputValue);
}
}
});
$(document).on('focus', '.tab_addclass', function () {
$(".focus").removeClass("focus");
$(this).addClass("focus");
});
Updated Fiddle
You have to loop through your elements and check if it is div then get the text otherwise take the input value:
$(document).on ('click', '#btn', function(){
var val = {};
$('.tab_addclass').each(function(){
if($(this).is('div')){
val.div = this.textContent;
}else{
val.input = this.value;
}
});
$('p').text(JSON.stringify(val));
});
p{background:black; color:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab_common tab_addclass" tabindex="-1">4</div>
<input class="text-input tab_addclass" id="other-input" value='input value' />
<button type="button" id="btn">Validate</button>
<br><br><br><br>
<p></p>
Use jQuery's keydown() funtion.
$(function(){
$('.tab_focus').keydown(function(){
alert($(this).val());
});
});
Try this in your js
alert($('.tab_focus').val() | $('.tab_focus').html());
I have added 2 codes here the window.scroll works on my example but not the second one binding the div to the scroll.
Any one knows what am I doing wrong!?
Just so you know I'm working in MeteorJS <- I dont think that this is the problem bc. the window scrolling works.
This 2 codes are in the same js file.
$(window).scroll(function() {
lastSession = Session.get('c_info')[Session.get('c_info').current]
if(lastSession.list == 0 && $(window).height() + $(window).scrollTop() >= $(document).height()){
lastItem = $( ".list-item div:last" ).html();
if (lastSession.page == 1){
currentSession().more();
lastItem2 = $( ".list-item div:last" ).html();
} else if( lastItem2 != lastItem) {
currentSession().more();
lastItem2 = $( ".list-item div:last" ).html()
}
}
});
$('#playlist').bind('scroll',function() {
console.log("div is scrolling");
});
I tried this too:
$('#playlist').scroll(function() {
console.log("div is scrolling");
});
MeteorJS Template:
<template name="playList">
<div id="playlist" class="playlist show-for-large-up">
{{#each list}}
<a href="/video/{{_id}}" class="large-12 columns" id="pl{{v_id}}">
<div>
<div class="large-7 columns plRight">
<span>{{vTitle}}</span>
</div>
</div>
</a>
{{/each}}
</div>
</template>
Also Tried:
$('#playlist').on('scroll',function() {console.log('test')});// not working
Tried to Change the id name and putting on the document ready:
$( document ).ready(function (){
$('#pl_list').bind('scroll',function() {
console.log("div is scrolling");
});
})//failed
The div has a scrollbar and the list is long and i have a css like this:
.playlist {
padding: 0;
overflow-y: scroll;
height: 458px;
}
Also tried:
Template.playList.rendered = function () {
console.log("playlist rendered");// i can see this on logs this tells that template is in doom
Meteor.setTimeout(function(){
$('#playlist').on('scroll',function(){
console.log('Scrolling...');
});
}, 2000);// with settimeout i have giveng it 2 more seconds
}
Try this out -
$(document).ready(function(){
$('#playlist').on('scroll',function(){
console.log('Scrolling...');
});
});
Use
$('#playlist').scroll(function() {
console.log("div is scrolling");
});
instead (like you did for window).
Thats the purpose of scroll(). See jquery documentation.
Scrolling event is fired on the element, if it has scrolled. So if you only scrolling the "body" element of the DOM it will not be triggered for #playlist.
So you have put a scrollbar to the container element of #playlist. Shot answer, cut the height and add a scrollbar, then the event will fire on it.
I did a Jsfiddle http://jsfiddle.net/34j0qnpg/4/
html
<div id="playlist-wrapper">
<div id="playlist" class="playlist show-for-large-up">
<a href="/video/1" class="large-12 columns" id="pl1">
<div>
<div class="large-7 columns plRight">
<span>Titel</span>
</div>
</div>
</a>
css part
body, html {
padding: 0;
margin: 0;
background-color: lightgrey;
color: #fff;
font-family: Arial;
height: 5000px;
overflow-y:scroll;
}
#stats {
position: relative;
}
#playlist-wrapper {
border: 1px solid #000;
padding: 10px;
height: 300px;
overflow-y: scroll;
}
#playlist {
height: 1000px;
background-color: darkgrey;
}
var $stats = $('#stats');
$('#playlist-wrapper').on('scroll', function() {
$stats.html('playlist scrolling');
console.log('playlist scrolling');
});
$(window).on('scroll', function() {
$stats.html('window scrolling');
console.log('window scrolling');
});
Solved with this code:
Tried it earlyer no results, after meteorjs project reset it just automagicly workded:
Template.playList.rendered = function () {
console.log("playlist rendered");
$('#playlist').on('scroll',function(){
console.log('Scrolling...');
});
}
I answered my question just if anybody is searching for the same answer.
Thanks to anybody who tried to help me.
I LOVE THIS COMMUNITY.