How to fetch selected image in the next page? - javascript

I have dropdown option to get image and on selecting option image shows up. I want to get same image in next page. How can I achieve that?
index.php
<div class="col-md-2" style="color: #000; font-family:Titillium Web">
<span style="color: #fff"> Pickup Location * </span>
<select class='selectpicker1' id='colorselector' name='pickup_loc'>
<option value=''></option>
<option value='Building1'>Building1</option>
<option value='Building2'>Building2</option>
</select>
</div>
<div class="col-md-2 text-center">
<br> <input type="text" id="pwr1" class="required p-control" name="pickup_ward" />
</div>
<div class="col-md-2" style="color: #000; font-family:Titillium Web ">
<span style="color: #fff"> Drop Location *</span>
<select class='selectpicker2' id='dropselector' name='drop_loc'>
<option value=''></option>
<option value='Floor1'>Floor1</option>
<option value='Floor2'>Floor2</option>
</select>
</div>
<div class="container colorselector show-image output">
<div id="Building1" class="colors Building2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWb3sciAdSaUG1Up0xz9facEB2bWr_OPZG6jNzHaQKcmwDBTB2iA" style="width: 100%" class="img-responsive" />
</div>
<div id="Building2" class="colors Building2">
<img src="https://cdn.vox-cdn.com/thumbor/MJguYcgKkDes6NzbE8Y0OgdyF64=/0x0:1500x974/1200x800/filters:focal(630x367:870x607)/cdn.vox-cdn.com/uploads/chorus_image/image/56258041/2401_Third_Ave.0.jpg" style="width: 100%" class="img-responsive" />
</div>
</div>
<div class="container dropselector show-image output">
<div id="Floor1" class="colors Floor1">
<img src="https://images.mydoorsign.com/img/lg/S/1-floor-number-braille-sign-se-6089.png" style="width: 100%" class="img-responsive" />
</div>
<div id="Floor2" class="colors Floor2">
<img src="https://images.mydoorsign.com/img/lg/S/2-floor-number-braille-sign-se-6090.png" style="width: 100%" class="img-responsive" />
</div>
</div>
$('#colorselector, #dropselector').change(function() {
var select = $(this);
$('.' + select.attr("id") + ' .colors').hide();
$('#' + select.val()).show();
});
I want to get the selected image in the next page.

In JavaScript, you can use session storage to achieve this.
On first page set the image URL with a desired unique key.
sessionStorage.setItem("myImage", "some url");
Then on the next page, retrieve the image:
sessionStorage.getItem("myImage");

Related

how to change the image url when i paste the link

I work in javascript basically I want to show the image when the user pick the image from the device the image must change the code that I use in the javascript file is
function changeProfile(){
var location = document.getElementById("profileLocation");
alert(location.value);
var image = document.getElementById("profileAAImage");
image.src(location.value);
}
and the code that I wrote in html file is
<div class="row">
<div class="col-md-3 form-group" style="padding-left: 7%;">
<img id="profileImage" style="border-radius: 200px;" src="images/interne/areab%20suhaib.jpg" class="img-thumbnail" width="100" height="100" >
</div>
<div class="col-md-9 form-group mt-3 mt-md-0" style="padding-top: 5%;">
<input type="file" name="file" class="form-control" id="profileLocation" onclick="changeProfile()" onkeyup="changeProfile()" placeholder="select profile image"
required>
</div>
</div>
what I do to do the required task.
Change location.value to location.files[0] to get the selected file.
function changeProfile() {
var location = document.getElementById("profileLocation");
var image = document.getElementById("profileImage");
image.src = window.URL.createObjectURL(location.files[0]);
}
<div class="row">
<div class="col-md-3 form-group" style="padding-left: 7%;">
<img id="profileImage" style="border-radius: 200px;" src="images/interne/areab%20suhaib.jpg" class="img-thumbnail" width="100" height="100">
</div>
<div class="col-md-9 form-group mt-3 mt-md-0" style="padding-top: 5%;">
<input type="file" name="file" class="form-control" id="profileLocation" onchange="changeProfile()" placeholder="select profile image" required>
</div>
</div>

How can I use 2 dropdown filters with bootstrap 4 in html

I'm working on a website that has a 'projects' page. On this page, they show all their finished projects to show to there clients. Now, they want 2 filters to it. 1 for the 'type of service' and 1 for the 'type of structure'.
I want to have it inside a dropdown list but it seems only to work with 'a element' and not with 'data-list' which I'm using right now. But the problem with the 'data-list' attribute is that it only works for 1 filter.
Can't figure it out how I can do this... But there must be a way, right?
Thanks in advance!
Grts
This method matches classnames with the values found in data-list attribute in both select boxes. Logical operators used here would help you choose between exclusive or inclusive condition.
$(document).ready(function(){
$('select').on('change',function(){
var struct=$('.structure').find(':selected').attr('data-list');
var serv=$('.service').find(':selected').attr('data-list');
$('.project').each(function() {
var classList = $(this).attr('class').split(/\s+/);
//console.log(classList);
if(struct==='all' && serv==='all') {
$('.project').show();
} else if(struct==='all' || serv==='all') {
$(this).toggle((classList.includes(struct) || classList.includes(serv)));
} else{
$(this).toggle((classList.includes(struct) && classList.includes(serv)));
}
});
});
});
img{
width:150px;
height:150px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="project" class="structure">
<option data-list="all">--Filter by Structure--</option>
<option data-list="hotel">Hotels</option>
<option data-list="house">Houses</option>
<option data-list="office">Office</option>
<option data-list="theater">Theaters</option>
</select>
<select name="service" class="service">
<option data-list="all">--Filter by Service--</option>
<option data-list="Deco">Deco</option>
<option data-list="Design">Design</option>
<option data-list="Construction">Construction</option>
<option data-list="Lighting">Lighting</option>
</select>
<div class="container-fluid">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 project hotel Construction">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/c/ce/H%C3%B4tel_du_Lac_Tunis.jpg">
</div>
<div class="col-md-3 project house Construction">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Teremok_%28Talashkino%3B_2013-11-10%29_02.JPG">
</div>
<div class="col-md-3 project theater Lighting">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/7/71/Palais_Garnier._December_5%2C_2010.jpg">
</div>
<div class="col-md-3 project office Lighting">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/London_MMB_%C2%BB093_15_Westferry_Circus.jpg/640px-London_MMB_%C2%BB093_15_Westferry_Circus.jpg">
</div>
<div class="col-md-3 project house Deco">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/8/85/The_16_house_on_the_Beautiful_Street_from_Bucharest_%28Romania%29_1.jpg">
</div>
</div>
<div class="row">
<div class="col-md-3 project hotel Design">
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/commons/0/07/Toru%C5%84%2C_Hotel_Polonia.jpg">
</div>
</div>
</div>
</div>
If you are looking for a good plugin, I suggest MixItUp or iSotope.

Reset select menu that is styled as <li>

once I submit a form I want to reset it. Everything is resetting except the select menu. I have tried this:
const catDrop = document.getElementById('category');
catDrop.selectedIndex = 0;
In the code, it looks like a normal option:
<form id="add-listing">
<div class="col-lg-12">
<div id="add-listing">
<div class="add-listing-section">
<div class="add-listing-headline">
<h3>Basic Information</h3>
</div>
<div class="row with-forms">
<div class="col-md-12">
<h5>Item Name <i class="tip" data-tip-content=""></i></h5>
<input class="search-field" type="text" name="title" id="title" />
</div>
</div>
<div class="row with-forms">
<div class="col-md-12">
<h5>Category</h5>
<select class="chosen-select-no-single" name="category" id="category">
<option value="0">Select Category</option>
<% for (const categories of cats) { %>
<option value="<%= categories.catName %>">
<%= categories.catName %>
</option>
<% } %>
</select>
</div>
</div>
<div class="row with-forms">
<input type="file" name="files" id="image" data-fileuploader-limit="3" data-fileuploader-maxSize="5" data-fileuploader-extensions="jpg, png, jpeg">
</div>
<div class="row with-forms">
<div class="col-md-12">
<h5>Description</h5>
<textarea class="WYSIWYG" name="description" cols="40" rows="3" id="description"
spellcheck="true"></textarea>
</div>
</div>
</div>
<input type="hidden" name="_csrf" value="<%= csrfToken %>" id="csrf">
<button type="submit" class="button preview addItem">Add Item <i class="fa fa-arrow-circle-right"></i></button>
<div class="error"></div>
<div class="successmsg"></div>
</div>
</div>
</form>
But it does not reset the select menu. When taking a look in console what it looks like, it seems that it is styled as an unordered list with list items like this:
<select class="chosen-select-no-single" name="category" id="category" style="display: none;">
<option value="0">Select Category</option>
<option value="Stuff">
Stuff
</option>
</select>
<div
class="chosen-container chosen-container-single chosen-container-single-nosearch chosen-container-active"
style="width: 100%;"
title=""
id="category_chosen"
>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off" readonly="" />
</div>
<ul class="chosen-results">
<li class="active-result" data-option-array-index="0" style="">
Select Category
</li>
<li class="active-result" data-option-array-index="11" style="">
Stuff
</li>
</ul>
</div>
</div>
This is the item I want to set it back to once the form has submitted.
The problem seems to be here
<form id="add-listing">
<div class="col-lg-12">
<div id="add-listing">
You have two dom elements with same id, which always need to be unique. Change the id of the form or divand then insidethencall thereset` function
Also you need to pass a string to selectedIndex
document.getElementById('category').selectedIndex = "0"

Add product information to cart

I have a cart function that adds items to it, but I cannot get it to add the details of that item. Right now it just pulls generic data I would like it to get the product title, location and dates. I know there is a way to get to the text of the HTML, but don't know how to add it to this script. Here is the HTML mark up:
var cartOpen = false;
var numberOfProducts = 0;
$('body').on('click', '.js-toggle-cart', toggleCart);
$('body').on('click', '.js-add-product', addProduct);
$('body').on('click', '.js-remove-product', removeProduct);
function toggleCart(e) {
e.preventDefault();
if (cartOpen) {
closeCart();
return;
}
openCart();
}
function openCart() {
cartOpen = true;
$('body').addClass('open');
}
function closeCart() {
cartOpen = false;
$('body').removeClass('open');
}
function addProduct(e) {
e.preventDefault();
openCart();
$('.js-cart-empty').addClass('hide');
var product = $('.js-cart-product-template').html();
$('.js-cart-products').prepend(product);
numberOfProducts++;
}
function removeProduct(e) {
e.preventDefault();
numberOfProducts--;
$(this).closest('.js-cart-product').hide(250);
if (numberOfProducts == 0) {
$('.js-cart-empty').removeClass('hide');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="cards-item">
<figure class="card product">
<div class="card-image card-image-2lc"></div>
<figcaption class="card-content">
<h1 class="card-title">McElroy</h1>
<h2 class="card-title product__title">2LC Fusion Machine 1/2" CTS - 2" IPS Pipe</h2>
<p class="card-text">The 2LC employs a semi-automatic locking cam (LC) system to maintain force during the cooling cycle. It incorporates McElroy's patented Centerline Guidance System and is designed to butt fuse tees, ells and other fittings.</p>
<form action="" method="">
<fieldset class="product">
<div class="formrow">
<div class="formitem col1">
<label class="label req" for="pu-2lc">Pick Up Date</label>
<input type="date" name="pu-2lc" id="pu-2lc/>
</div>
</div>
<div class=" formrow ">
<div class="formitem col1 ">
<label class="label req " for="rd-2lc ">Return Date</label>
<input type="date " name="rd-2lc " id="rd-2lc "/>
</div>
</div>
<div class="formrow ">
<div class="formitem col1of2 ">
<label class="label " for="country ">Country</label>
<select name="country " id="country " x-autocompletetype="country-name ">
<option selected="selected ">please choose</option>
<option value="bkf ">Bakersfield</option>
<option value="ch ">Chico</option>
<option value="fsn ">Fresno</option>
<option value="hyw ">Hayward</option>
<option value="mtc ">Manteca</option>
<option value="oak ">Oakley</option>
<option value="rwc ">Redwood City</option>
<option value="sac ">Sacramento</option>
<option value="sal ">Salinas</option>
<option value="sj ">San Jose</option>
<option value="sjf ">San Jose Fusion</option>
<option value="sr ">Santa Rosa</option>
</select>
</div>
</div>
</fieldset>
<div class="buttons ">
<div class="back ">
<button class="primary button js-add-product " title="Add to cart " >Add to Cart</button>
</div>
</div>
</form>
</figcaption>
</figure>
</article>
<aside class="cart js-cart ">
<div class="cart__header ">
<h1 class="cart__title ">Shopping cart</h1>
<p class="cart__text ">
<a class="button button--light js-toggle-cart " href="# " title="Close cart ">
Close cart
</a>
</p>
</div>
<div class="cart__products js-cart-products ">
<p class="cart__empty js-cart-empty ">
Add a product to your cart
</p>
<div class="cart__product js-cart-product-template ">
<article class="js-cart-product ">
<h1>Product title</h1>
<p>Pick up Date</p>
<p>Return Date</p>
<p>Location</p>
<p>
<a class="js-remove-product " href="# " title="Delete product ">
Delete product
</a>
</p>
</article>
</div>
</div>
<div class="cart__footer ">
<p class="cart__text ">
<a class="button " href="# " title="Buy products ">
Buy products
</a>
</p>
</div>
</aside>
Thanks for any help.
This will select the text of the product__title
$('.product__title').text()
This will get the country option selected text and value
$('#country option:selected').val()
$('#country option:selected').text()
This will get your dates
$('#pu-2lc').val()
Once you have the text, you can place it where you want. Just looking over the code it looks like you would want to grab these values within the
addProduct() method. Please let me know if that is what you are looking for. I can provide more insight if we had the code for the cart its self.

Appending row in container

I am writing a code which dynamically creates rows.
The problem is when I click on button it adds row after the already present row. but Now div with id dynamic contains two rows and so if I click now button it will add two rows. If I use ('#dynamic').html() then it grabs columns but if it is done so it violates the indentation because it will not add the div with class row.
Please any body can tell me the solution to problem?
$(function() {
$("#button1").click(function() {
$("#main-row").after($('#dynamic').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="above">
<div class="container">
<div class="row">
<div class="col-sm-1">No.</div>
<div class="col-sm-2">Name of Item</div>
<div class="col-sm-3">Quanity</div>
<div class="col-sm-3">Price</div>
<div class="col-sm-1"><span class="btn"></span></div>
</div>
</div>
<div class="container" id="dynamic">
<div class="row padding-3 " id="main-row">
<div class="col-sm-1 ">1</div>
<div class="col-sm-2 ">
<select class="container-fluid">
<option value="1">Computer</option>
<option value="2">Mobile</option>
<option value="3">LCD</option>
<option value="4">Keyboard</option>
<option value="5">Mouse</option>
</select>
</div>
<div class="col-sm-3 "><input class="container-fluid" type="number" name="name" value="" /></div>
<div class="col-sm-3 "><input type="text" name="text" value="" /></div>
<div class="col-sm-1 ">-</div>
</div>
</div>
<button class="btn btn-primary" id="button1">Add Row</button>
</section>
Try:
$(function() {
$("#button1").click(function() {
$('#dynamic').append($("#main-row").clone().removeAttr('id'));
});
});

Categories