How to implement this to my index.html? - javascript

I want to implement this function http://rvera.github.io/image-picker/ and connect this on my Internet store with buying things, so you choose items(on images) and selections save to variable and this variable says to support payment how much user want to pay me. The problem is that I don't know how to do it. I linked js, css from inside but in source code there are files with folders like coffee and sassy. Any ideas? :) I don't have experience with Javascript and jQuery I just want do this feature :).
this is certain file index.html
<html>
<head>
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>
<!-- scripts for imagepicker -->
<link rel="stylesheet" href="css/image-picker.css">
<script type="text/javascript" src="js/image-picker.js"></script>
<script type="text/javascript" src="ja/image-picker.min.js"></script>
<!--code for imagepicker-->
<select multiple="multiple" class="image-picker show-html">
<option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
<option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
<option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
<option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</select>
</head>
<body><script>
$("select").imagepicker()
</script>
<select class="image-picker show-html">
<option value=""></option>
<option data-img-src="image-path goes here" value="1">Image 1</option>
<option data-img-src="image-path goes here" value="2">Image 2</option>
</select></body>
</html>

Once, you have downloaded the files and added to project. Add below on your HTML page:
EDIT: This should work for you, I guess
<html>
<head>
<!-- scripts for imagepicker -->
<link rel="stylesheet" href="css/image-picker.css">
<script type="text/javascript" src="js/image-picker.js"></script>
<script type="text/javascript" src="js/image-picker.min.js"></script>
<script type="text/javascript">
$("select").imagepicker();
</script>
</head>
<body>
<!--code for imagepicker-->
<select multiple="multiple" class="image-picker show-html">
<option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
<option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
<option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
<option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</select>
<select class="image-picker show-html">
<option value=""></option>
<option data-img-src="image-path goes here" value="1">Image 1</option>
<option data-img-src="image-path goes here" value="2">Image 2</option>
</select>
</body>
</html>

You need to install CoffeeScript first to use this http://rvera.github.io/image-picker/ if you prefer using coffee folder.
On ubuntu machine you can use following command
sudo npm install -g coffee-script
And than in the script which you had download from here - http://rvera.github.io/image-picker/ in that do following:
a. Create folder named "img" and some images with name - 01.jpg, 02.jpg, 03.jpg, 04.jpg. Give full permissions.
b. Create one file imagepicker.html. This file should be placed outside directory "image-picker", and copy following code in that file.
c. Run HTML file in browser.
<link rel="stylesheet" type="text/css" href="image-picker/image-picker.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="image-picker/image-picker.js" type="text/javascript"></script>
<div class="picker">
<select multiple="multiple" class='image-picker show-html'>
<option data-img-src='img/01.jpg' value='1'> Page 1 </option>
<option data-img-src='img/02.jpg' value='2'> Page 2 </option>
<option data-img-src='img/03.jpg' value='3'> Page 3 </option>
<option data-img-src='img/04.jpg' value='4'> Page 4 </option>
</select>
</div>
<ul class="thumbnails image_picker_selector" style="display: none">
<li><div class="thumbnail"><img class="image_picker_image" src="img/01.jpg"></div></li>
<li><div class="thumbnail"><img class="image_picker_image" src="img/02.jpg"></div></li>
<li><div class="thumbnail"><img class="image_picker_image" src="img/03.jpg"></div></li>
<li><div class="thumbnail"><img class="image_picker_image" src="img/04.jpg"></div></li>
</ul>
<script type="text/javascript">
jQuery("select.image-picker").imagepicker({
hide_select: false,
});
jQuery("select.image-picker.show-labels").imagepicker({
hide_select: false,
show_label: true,
});
jQuery("select.image-picker.limit_callback").imagepicker({
limit_reached: function(){alert('We are full!')},
hide_select: false
});
//Return total amount on click of options in drop down. considering $50 for each item
$('.image-picker').click(function(){
var amount = 0;
$('.image-picker option:selected').each(function()
{
amount = amount + 50;
});
alert("Final Amount - "+amount);
});

Related

How can i create this FORM functionality using HTML, CSS & JavaScript

I want to create a form similar to the image below. Please someone help me with this
Please try the following code:
I'm using cdn for jquery multiselect in the below example. You can find the latest cdn here: https://cdnjs.com/libraries/multi-select
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" integrity="sha512-2sFkW9HTkUJVIu0jTS8AUEsTk8gFAFrPmtAxyzIhbeXHRH8NXhBFnLAMLQpuhHF/dL5+sYoNHWYYX2Hlk+BVHQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
<option value='elem_100'>elem 100</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js" integrity="sha512-X1iMoI6a2IoZFOheUVf3ZmcD1L7zN/eVtig6enIq8yBlwDcbPVao/LG8+/SdjcVn72zF+A/viRLPSxfXLu/rbQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$('#my-select').multiSelect();
</script>
</body>
</html>

JavaScript code isn't working to show pictures while making dropdown selection

I am trying to run a code,in which once an option is choosen through a drop down a picture should appear.Not sure but, only the first picture appears(It should be only because I have choosen it to start with) but thereafter nothing changes.Looks like my JS is not working at all.Sorry for posting a basic type,I am new to Javascript/HTML. Code is attached.
Tried keeping the javascript separate and calling it but didnt work.
var pictureList = [
"http://lorempixel.com/400/200/sports/1",
"http://lorempixel.com/400/200/sports/2",
"http://lorempixel.com/400/200/sports/3",
"http://lorempixel.com/400/200/sports/4",
"http://lorempixel.com/400/200/sports/5", ];
$('#picDD').change(function () {
var val = parseInt($('#picDD').val());
$('img').attr("src",pictureList[val]);
});
img {
width:400px;
margin:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
<option value="1" selected>Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>
<option value="5">Picture 5</option>
</select>
</body>
</html>
You should use jquery library to run your code. Add this script to your HTML code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you do not use this library, your select will not working.
Since your base URL is same, you could also refactor the code as below without an array.
$('#picDD').change(function() {
$('img').attr("src",
"http://lorempixel.com/400/200/sports/" + $(this).val());
});
img {
width: 400px;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
<option value="1" selected>Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>
<option value="5">Picture 5</option>
</select>

Chosen.js Multiple select option

Is there a way to set up chosen on a multiple select box so that when items are selected just the option values are shown instead of the option name by default.
<select multiple>
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
So whenselected, the input box shows "A", "B" and or "C"
Thanks in advance
Make sure you are using the correct .js and .css files.
This works for me:
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css">
</head>
<body>
<select multiple style="width: 500px;">
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.min.js"></script>
<script>
$(document).ready(function() {
$('select').chosen();
});
</script>
</body>
In this example are used the external resources from cdnjs.cloudflare.com:
3.1.0/jquery.min.js
1.6.1/chosen.css
1.6.1/chosen.jquery.min.js

If a Select All option is Checked then display a div using bootstrap multiselect

After Selecting "Select All" option in the drop down list,I'll click on a generate graph button.Then I want to display a chart containing of all options in the drop down list in a particular div using bootstrap multi-select.
My code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Multi Select Dropdown with Checkboxes</title>
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<div id="PiDiv"></div>
<div id="AllDiv"></div>
<form id="form1">
<div style="padding:20px">
<label>Select Country</label>
<select id="selectId" multiple="multiple">
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
<option value="Nepal">Nepal</option>
<option value="Iraq">Iraq</option>
<option value="China">China</option>
</select><br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
$(function() {
$('#selectId').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#selectId').val());
if($('#selectId').val() == "India"){
$("#PiDiv").load("/home/divya/html_docs/pi.html");
}
})
});
</script>
</div>
</form>
</body>
</html>
I'm able to select one option and display its corresponding chart.But for select all option,I'm not getting how to display a div after clicking on a generate graph button.Can anyone please suggest me on this issue ...
try this option. Change the html to below and replace your URL in data-url
<select id="selectId" multiple="multiple">
<option value="India" data-url="<!-- URL -->">India</option>
<option value="Japan" data-url="<!-- URL -->">Japan</option>
<option value="Germany" data-url="<!-- URL -->">Germany</option>
<option value="Nepal" data-url="<!-- URL -->">Nepal</option>
<option value="Iraq" data-url="<!-- URL -->">Iraq</option>
<option value="China" data-url="<!-- URL -->">China</option>
</select>
jQuery Code
$('#btnget').click(function() {
$("#PiDiv").empty();
$('#selectId option:selected').each(function(index,elem){
if(typeof $(elem).data('url') != "undefined"){
$.get( $(elem).data('url'), function( data ) {
$("#PiDiv").append(data);
});
}
});
})

Selecting a value in drop down list using javascript

A] Summary of the problem:
Trying to pre-select a users country on page load
B] Details:
1] I am using maximinds javascript to find out a users county.
2] I have a drop down list which contains a list of 225 or so countries.
3] Inside the javascript section of my HTMLr page, I am trying to select the users country from the drop-down list.
But the country is not getting selected
C] Code excerpt:
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aring land Islands">Aring land Islands</option>
</select>
<!-- including the geoip javascript library -->
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
<!-- By default, we will select users country -->
<script type="text/javascript" language="JavaScript">
document.getElementById(geoip_country_name()).selected = true
</script>
Thanks,
[Edit#1]
Tried the following jquery code, but this isnt populating the drop-down list:
<!-- including the geoip javascript library -->
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("option[value='" + geoip_country_name() + "']").attr('selected', 'selected');
});
</script>
[Edit#2]
Tried the $("#id_country_name").val(geoip_country_name());,
<div id="userDataForm">
<form method="POST" action="/UserReporting">
<table>
<!-- Printing the forms for users country, city -->
<tr><th><label for="id_country_name">Country name:</label></th><td>
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aring land Islands">Aring land Islands</option>
<option value="Albania">Albania</option>
</select>
</td></tr>
<tr><th>
<label for="id_city_name">City name:</label></th><td><input type="text" name="city_name" id="id_city_name" /></td></tr>
</table>
<input type="submit" name="report_up" value= "Report Up">
<input type="submit" name="report_down" value= "Report Down">
</form>
<!-- including the geoip javascript library -->
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function () {
$("#id_country_name").val(geoip_country_name());
});
</script>
The document.getElementById call would only work if each <option> in your HTML had the country name as the id (replacing spaces with "_" or something similar):
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option id="Afghanistan" value="Afghanistan">Afghanistan</option>
<option id="Aring_land_Islands" value="Aring land Islands">Aring land Islands</option>
</select>
However, I'd lean towards this approach with jquery, as it doesn't require giving every option its own id:
$(function () {
$("#id_country_name").val(geoip_country_name());
});
Try
document.getElementById('id_country_name').selectedIndex=index;
where index is an integer corresponding to the selection you want.

Categories