Getting the url of an image if selected - javascript

I'm pretty new to js and having some trouble trying to get the img src next to a checkbox.
The structure of the elements looks like this:
'<input type="checkbox" class="myCheck" id="myCheck" data-s3="object"><!--...--><img src="'+object2hrefvirt(s3exp_config.Bucket, data)+'" width="100" height="100">';
Being object2hrefvirt(s3exp_config.Bucket, data) the image url.
The goal is to get all the urls to download them in a pack (not necessarily in a zip but to download all the selected urls at once) when a button is clicked.
Here's what I have so far to know if a checkbox has been selected:
$(document).ready(function() {
$('#download-checker').click(function(e) {
checkDownload();
});
function checkDownload(){
if(document.getElementsByTagName("input")){
if(document.getElementById("myCheck").checked){
//get img url
} else if (!document.getElementById("myCheck").checked){
alert("No selected files");
} else {
alert("Error");
}
}
}
}

Like this
NOTE: IDs need to be unique
const checkDownload = () => {
const list = $(".myCheck:checked")
.map(function() { return $(this).next().attr("src") })
.get();
$("#list").text( list.join(", ")); // or return list.length>0 if you want
}
$(function() {
$('#download-checker').on("click",checkDownload);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="myCheck" data-s3="object">
<img src="image1.jpg" width="100" height="100">
<input type="checkbox" class="myCheck" data-s3="object">
<img src="image1.jpg" width="100" height="100">
<button type="button" id="download-checker">Check</button>
<span id="list"></span>

Related

JavaScript - user selection function

I am new to JavaScript and I'm working on something. This is what I've reached so far and here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Image Editor V 1.0</title>
<script>
function changeOpacity(newValue) {
document.getElementById("span").innerHTML = newValue*100 +'%';
document.getElementById("image1").style.opacity = newValue;
}
var color = true;
function imgColor() {
if (color) {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
color = false;
} else {
document.getElementById("image1").style.WebkitFilter = "none";
color = true;
}
}
function colorImg() {
document.getElementById("image1").style.WebkitFilter = "none";
}
function greyImg() {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
}
function userImage() {
var link = document.getElementById("userImg").value;
document.getElementById("image1").src = link;
}
</script>
</head>
<body>
<button onclick="colorImg()">Colored</button>
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()" >Alternate</button><br><br>
Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/>
<span id="span">100%</span> <br><br>
Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>
<img class="myImages" id="image1" src="image4.jpg">
<img class="myImages" id="image2" src="image2.jpg">
<img class="myImages" id="image3" src="image3.jpg">
</body>
</html>
So far, the "Colored", "Greyscale", and "Alternate" buttons along with the opacity slider work as intended only on the first image (image1.jpg). Also, when the user inputs his own image, it replaces the first image and the functions work on it as intended. Here is what am trying to do:
1 - Let the user select which of the three images he wants to edit by clicking on it, then apply a border around it and use it in the other functions (greyscale and opacity). Here's what I tried (but didn't work):
<img class="myImages" id="image1" src="image4.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image2" src="image2.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image3" src="image3.jpg" onclick="selectImg(this.id)">
function selectImg(imgID) {
document.getElementById("imgID").style.border = 50px;
}
2 - When the user inputs his own image, I want it to replace all the 3 images I have displayed by default.
Your help is greatly appreciated. Thanks in advance!
You are missing quotes both on the id and the 50px. But it is better to define a style for the selection.
Then let a click handler first remove that style from all the images, except the clicked image, where it should set that style. The functions .classList.add and .classList.remove can be used for that.
Where you currently have document.getElementById('image1'), you would do instead:
document.querySelector('.selected')
Then you should also make sure that the page loads with one image selected, i.e. with the selected class.
Some other improvements make sure that when changing the selection, the opacity slider is also brought in line with that image's current opacity setting.
Here is a snippet that does all that:
function changeOpacity(newValue) {
document.getElementById("span").textContent = newValue*100 +'%';
document.querySelector(".selected").style.opacity = newValue;
document.querySelector('input[type=range]').value = newValue;
}
function getOpacity() {
return parseFloat(document.querySelector(".selected").style.opacity || '1');
}
function isColor() {
return document.querySelector(".selected").style.WebkitFilter !== "grayscale(100%)";
}
function imgColor() {
document.querySelector(".selected").style.filter =
document.querySelector(".selected").style.WebkitFilter =
isColor() ? "grayscale(100%)" : "none";
}
function colorImg() {
if (!isColor()) imgColor()
}
function greyImg() {
if (isColor()) imgColor()
}
function userImage() {
document.querySelector(".selected").src = document.getElementById("userImg").value;
}
// Add this function, and call it on click on an image
function select(img) {
Array.from(document.querySelectorAll('.myImages')).forEach(
myImg => myImg === img ? myImg.classList.add('selected')
: myImg.classList.remove('selected')
);
// bring opacity slider in line with selected image
changeOpacity(getOpacity());
}
.selected {
border: 1px solid;
}
<button onclick="colorImg()">Colored</button>
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()">Alternate</button><br><br>
Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/>
<span id="span">100%</span> <br><br>
Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>
<img class="myImages selected" id="image1" onclick="select(this)"
src="//cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4">
<img class="myImages" id="image2" onclick="select(this)"
src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
<img class="myImages" id="image3" onclick="select(this)"
src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb">
First - you are not using that imgID, but String like that variable. Change to:
function selectImg(imgID) {
document.getElementById(imgID).style.border = 50px; //notice no quotes for imgID
activeImage = imgID; //set activeImage ID
}
And then when you are doing something to an image, don't use "image1", but activeImage that is global variable (defined outside and before functions).
And as for new uploaded image:
Put it into another div and work with such algorithm -
when (uploaded_new)
hide default pics
show DIV with new image
activeImage = uploadedPic

Saving checkbox values causes issues with showing/hiding linked image

I have written a code to show or hide a picture based on the value of corresponding checkboxes. I was able to have the picture shown or hidden on reload if 'checked="checked"' is written into the checkbox.
I was able to write a code to save the value of the checkbox but then the picture is no longer tethered to the checked/unchecked value and changes with reload.
My end goal is to have the a checked checkbox to show the picture and unchecked checkbox to hide the picture and I need the value saved to allow the correct value to work on reload after a change has been made.
This is just a small snip of the overall code. The whole thing is a series of 64 checkboxes linked to 64 different pictures, which overlay a mapped background image.
I should also mention that this will ultimately be used for a SharePoint site, if that makes a difference.
Thanks in advance for any help!!
(There is a link to jsfiddle demo at the bottom)
HTML:
<a href="home.aspx">
<p id="A1R1" style="left:146px;top:256px;position:absolute;z-index:inherit;" class="hidden">
<img id="A1R1" alt="A1R1" src="red.jpg" width="108" height="60" />
</p>
</a>
<a href="home2.aspx">
<p id="A2R2" style="left:273px;top:256px;position:absolute;z-index:inherit;" class="hidden">
<img id="A2R2" alt="A2R2" src="green.html" width="108" height="60" />
</p>
</a>
<fieldset class="fieldset-auto-width" style="width:165px">
<center>
<p style="font-size:25px">Show/Hide</p>
</center>
<fieldset class="fieldset-auto-width" style="width:150px">
<center>A1 Green/Red
<p>
</center>
<center>
<input type="checkbox" id="A1G" checked="checked" /> </center>
</fieldset>
<fieldset class="fieldset-auto-width" style="width:150px">
<center>A2 Green/Red
<p>
</center>
<center>
<input type="checkbox" id="A2G" checked="checked" /> </center>
</fieldset>
</fieldset>
<center>
<input type="button" id="ReserveerButton1" value="save" onclick="save()" />
<input type="button" id="Wisbutton1" value="delete" onclick="wis()" />
</center>
JQUERY:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
(function(i, $) {
var $A_1_G = $('#A1G'),
$A_1_R_1 = $('#A1R1');
var toggleMain = function() {
$A_1_R_1.slideToggle();
};
if ($A_1_G.is(':checked')) {
toggleMain();
}
$A_1_G.on('click', toggleMain);
})(document, jQuery);
(function(i, $) {
var $A_2_G = $('#A2G'),
$A_2_R_2 = $('#A2R2');
var toggleMain = function() {
$A_2_R_2.slideToggle();
};
if ($A_2_G.is(':checked')) {
toggleMain();
}
$A_2_G.on('click', toggleMain);
})(document, jQuery);
</script>
Javascript:
function save() {
var checkbox = document.getElementById('A1G');
localStorage.setItem('A1G', checkbox.checked);
var checkbox = document.getElementById('A2G');
localStorage.setItem('A2G', checkbox.checked);
}
function load() {
var checked = JSON.parse(localStorage.getItem('A1G'));
document.getElementById("A1G").checked = checked;
var checked = JSON.parse(localStorage.getItem('A2G'));
document.getElementById("A2G").checked = checked;
}
function wis() {
location.reload();
localStorage.clear()
}
load();
Link to fiddle code
This seems to take care of it: http://jsfiddle.net/w0yL5njs/
Move your 'toggleMain w/ jQuery' code block to after your 'save/load' code block, so that the checkboxes will be pre-checked before the images' initial visibility are set.
So the order of your <script> tags will be
a) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
b) The script that uses jQuery.
c) your save/load script that doesn't use jQuery.
Actually, (b) and (c) can be in the same <script> but (a) must be separate.
Add display:none to the <p> containing the images.
Is that what class="hidden" was intended to do? You could add .hidden { display: none; } to your CSS...
// Remove
if ($A_1_G.is(':checked')) {
toggleMain();
}
// ADD
if ($A_1_G.is(':checked')) {
$A_1_R_1.show();
}else{
$A_1_R_1.hide();
}
//remove
if ($A_2_G.is(':checked')) {
toggleMain();
}
if ($A_2_G.is(':checked')) {
$A_2_G.show();
}else{
$A_2_G.hide();
}

Apply Same JS Script to Several File Upload Fields

I have a form with 3 separate file-upload fields. I also have a JS script to show an image preview whenever a file is added. The script works great. My problem is, I want it to run on each of the 3 upload fields so they all have preview images. Obviously, don't want to write the same script 3 times, but not sure how to apply the same script to multiple input fields.
Here's my markup:
<div class="form_box_item">
<input type='file' id="input1" />
<p><img id="image1" src="#" height="60" width="80" alt="" /></p>
</div>
<div class="form_box_item">
<input type='file' id="input2" />
<p><img id="image2" src="#" height="60" width="80" alt="" /></p>
</div>
And here's the JS:
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image1').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#input1").change(function () {
readURL(this);
});
Here's my script running as a JS Fiddle
Thanks for your help!
Well, the first thing that I notice is that your target image has an id that's almost the same as the source input element - one just has to replace "input" with "image". I.e input1 -> image1, input2 -> image2
Next thing I notice, is that your reader.onload function currently targets a specific element - #image1. I also note that the input to the readURL function is the input element itself.
With these things in mind, we can change the onload function so that it:
gets the id of the element that triggered its call
replace "input" with "image" in this id string
use this computed id string to target the correct image.
Once implemented, a complete example appears thusly:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script>
function readURL(input)
{
if (input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function (e)
{
var imgId = input.id.replace("input", "image");
$("#"+imgId).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
window.addEventListener('load', myInit, false);
// target 2 input elements explicitly
//function myInit()
//{
// $("#input1").change( onFileInputChanged );
// $("#input2").change( onFileInputChanged );
//}
// target all inputs of type=file
function myInit()
{
$(':file').each(
function(){
$(this).change( onFileInputChanged )
}
);
}
function onFileInputChanged(evt)
{
readURL(this);
}
</script>
<style>
</style>
</head>
<body>
<div class="form_box_item">
<input type='file' id="input1" />
<p><img id="image1" src="#" height="60" width="80" alt="" /></p>
</div>
<div class="form_box_item">
<input type='file' id="input2" />
<p><img id="image2" src="#" height="60" width="80" alt="" /></p>
</div>
</body>
<html>
Fiddle: http://jsfiddle.net/hvmVJ/16/

How to check if file was selected with Jquery?

I can't seem to find out why this won't work.
photoVal always equals nothing. So the background I have never disappears. When I select a file shouldn't the value change?
Jquery
$(document).ready(function() {
$('.browsebutton').bind("click" , function () {
$('#uploadphoto').click();
});
var photoVal = $('#uploadphoto').val();
$('#uploadphoto').change(function(){
alert(photoVal);
});
if (photoVal !== ''){
$('#photo').css('background', 'none');
}
});
HTML
<div id="photo">
<img id="preview" src="#" alt="Image Preview" />
</div>
<br>
<div id="browse">
<button type="button" class="browsebutton">Add Photo</button>
</div>
<input type="file" id="uploadphoto" name="uploadphoto" style="display: none;"/>
This question seems like a duplicate.
Try this :
$(function() {
$("#uploadphoto").change(function (){
var file_name = $(this).val();
});
});

make anchor tag clickable when checkbox is checked

is there anyway to make an anchor tag clickable if a checkbox is checked and visa versa (anchor tag not clickable if a checkbox is not checked)?
reason i am asking for this is because i am working on a custom mouthguard site and my client wants the visitor to click a checkbox (which means they agree to the terms) before being able to add the mouthguard to the cart and proceed to checkout.
right now i have an anchor tag around an image tag (due to signing a non-disclosure agreement, i can not display any code, but i will display the set up):
<input type="checkbox" name ="" id="" />
<img src="" border="" alt="" />
please let me know how i can accomplish my goal. thanks.
In the onclick for an anchor, you can return false if the checkbox is not checked, or return true if the checkbox is checked. This will mean the link will be followed when the checkbox is checked.
<input type="checkbox" name ="" id="terms" />
<img src="" border="" alt="" />
<script>
function checkTerms()
{
var ticked = document.getElementById("terms").checked;
if(!ticked) alert("Please accept the terms");
return ticked;
}
</script>
Say you had this wrapped in a div you could so something like this:
<div class="login">
<span>I have read and agree to the terms and conditions. <input type="checkbox" name ="" id="" /></span>
<img src="" border="" alt="" />
</div>
Then in your JavaScript.
$('.login a').click(function(ev) {
var $checkbox = $('.login input');
if ( $checkbox.is(':checked') ) {
console.log('GO AHEAD');
} else {
alert('You need to accept the terms and conditions before proceeding');
$checkbox.addClass('error');
ev.preventDefault();
}
});
You have to add this to the code:
<img src="" border="" alt="" />
Then inside checkInput, just check for the state of the checkbox.
If it is checked, then use
document.location = "Add to Cart Location";
Alternatively: you can use this:
document.getElementById("myCheckBox").addEventListener ("change", function() {
if(this.checked) {
document.getElementById("myLink").href = "Proper HREF";
} else {
document.getElementById("myLink").href = "#";
}
}

Categories

Resources