Background
Hey everyone, first off thanks for your help. This issue has been bothering my for quite a while now and I just can't seem to figure it out.
Some background, I am creating a page that links to a db that has movie posters stored. This page will allow me to retrieve specific movie posters based on two factors: the movieid that is passed and the poster size.
Specifics
I am trying to change the value of data-pp-pubid to the input from Publisher ID (in this case King Kong). I am also wanting to do the same thing for data-pp-placementtype to fill from my dropdown box.
This works if I use static information in the html. However, I am wanting to create dynamic variables to save me the trouble of constantly editing the html file. This is what I've got so far.
<div>
<form>
<select id="generic_size" name="Poster Size">
<option value="120x90">120x90</option>
<option value="120x240">120x240</option>
<option value="120x600">120x600</option>
<option value="150x100">150x100</option>
<option value="170x100">170x100</option>
<option value="190x100">190x100</option>
<option value="234x400">234x400</option>
<option value="234x60">234x60</option>
<option value="250x250">250x250</option>
<option value="280x280">280x280</option>
<option value="300x50">300x50</option>
<option value="300x250">300x250</option>
<option value="468x60">468x60</option>
<option value="540x200">540x200</option>
<option value="720x90">720x90</option>
<option value="800x60">800x60</option>
</select>
Publisher ID: <input type="text" value="King Kong" id="movieId">
<input type="submit" value="Get poster"
onclick="javascript:getMovInfo(); setSize(); getPoster();";>
</form>
</div>
<script type="text/javascript" data-pp-pubid="Mad Max" data-pp-placementtype="120x240"> (function getPoster(d, t) {
"use strict";
var s = d.getElementsByTagName(t)[0], n = d.createElement(t);
n.src = "//movietime.adtag.now.com/merchant.js";
s.parentNode.insertBefore(n, s);
}(document, "script"));
</script>
<script type="text/javascript">
function getMovInfo() {
var movRetrieve= document.getElementById("movieId").value;
var movInfo = document.getElementsByTagName("script")[2];
var movSet = movInfo.setAttribute("data-pp-pubid", movRetrieve);
}
function setSize (){
var sizeDropDown= document.getElementById("generic_size");
var sizeSelected= sizeDropDown.options[sizeDropDown.selectedIndex].value;
var sizeInScript = document.getElementsByTagName("script")[2];
var newSize = sizeInScript.setAttribute("data-pp-placementtype", sizeSelected);
}
</script>
Thanks again, this is my first post!
Ok, then you should convert the html data you have to some data in the code. An array ["300x50", ...] will do the job. Then you have to populate your select with the data.
Related
I found a custom select dropdown with button redirect code. It works with one dropdown, but I want to make two dropdown menus.
I tried adding var's for select-id2, but script stopped working and nothing happened.
<select id="select-id1">
<option value="" selected="">First category</option>
<option value="http://example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
function siteRedirect() {
var selectbox = document.getElementById("select-id");
var selectedValue = selectbox.options[selectbox.selectedIndex].value;
window.location.href = selectedValue;
}
</script>
First one (select-id1) should have domain example.com, and the second one (select-id2) should add /page on the first one. So the redirection link should be example.com/page.
Is there any way to do with this code?
You are searching for the element with id="select-id". When only select-id1 and select-id2 exists.
Try this:
function siteRedirect() {
var select1 = document.querySelector("#select-id1"),
select2 = document.querySelector("#select-id2");
var category = select1.options[select1.selectedIndex].value,
subcategory = select2.options[select2.selectedIndex].value;
redirect = category+subcategory;
console.log("Redirect to: "+redirect);
}
<select id="select-id1">
<option value="" selected="">First category</option>
<option value="http://example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
You are not getting a reference to the second <select> element. You just added it to your HTML, your script is unaware of it.
var selectbox2 = document.getElementById("select-id2");
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
This will make it redirect to whatever is the value of select-id2 option element
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
function siteRedirect() {
var selectbox = document.getElementById('select-id2');
var selectedValue = selectbox.options[selectbox.selectedIndex].value;
window.location.href = selectedValue;
}
</script>
You want to join split URLs together, for that, you have to concatenate the two parts and you can do it simply parsing the values on JS (as JavaScript already stores data into variables as strings, so you shouldn't have a problem with that)
The logic is pretty much like this :
var link1 = document.getElementById("select-id1").value;
var link2 = document.getElementById("select-id2").value;
var joined = link1 + link2
function siteRedirect() {
window.location.href = joined;
}
See if that helps you
Thats it! Thank you all, but especially to k3llydev!
So. The final code is :
<html>
<head>
</head>
<body>
<select id="select-id1">
<option value="" selected="">First category</option>
<option value="example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
function siteRedirect() {
var select1 = document.querySelector("#select-id1"),
select2 = document.querySelector("#select-id2");
var category = select1.options[select1.selectedIndex].value,
subcategory = select2.options[select2.selectedIndex].value;
redirect = category+subcategory;
/*console.log("Redirect to: "+redirect);*/
window.location.href = redirect;
}
</script>
</body>
</html>
Solved!
Is is possible to swap a .load text with one that can be edited by a user using form input or something similar? Basically I'm trying to write a code that fetches information using the div IDs (unique per emp) that hold their information within tables within multiple HTML documents for many years.
Example:
.load('day.html #empId')
the "day" and "empid" part of .load can be changed on the user end.
[Link] [ID] submit
then it runs the rest of the script.
The part of the script I'm trying to make adjustable:
$('a').click(function() {
$('#metrics').load('day.html #empId', function() {
$(this).hide()
.appendTo('#main')
.slideDown(500);
});
return false;
})
});
I'm not sure if I explained it clear enough(new to jquery)
Get the selected options of two form select elements, combine into string and insert them into the jQuery .load function.
$('a').click(function() {
var ds = $('#datasources option:selected').text();
var empId = $('#empIds option:selected').text();
$('#metrics').load(ds + '.html #' + empId, function() {
$(this).hide()
.appendTo('#main')
.slideDown(500);
});
return false;
});
And the HTML affected:
<div id="main">
<h1 id="metrics">Metrics</h1>
</div>
JSFiddle: http://jsfiddle.net/a8dTR/ (Open the console to see what's going on. This will give an error because the loading won't work on JSFiddle but you can see it's send the correct argument.)
FIXED IT!!!!!! I'm pretty sure its terrible practice, but it gets the job done(tried it with multiple docs and ids). If anyone has suggestions for a better way I'm all ears
I know it's pretty bare and basic, but here's the code in case anyone else wanted to do something similar
I put back in $<'div id= metrics'/> in order to open it in a new div tag appended to #main
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
$('a').click(function() {
var pD = $('#period').val();
var wD = $('#week').val();
var dD = $('#day').val();
var eD = $('#empId').val();
$('<div id"metrics" />').load(
pD
+ wD
+ dD
+ eD, function(){
$(this).hide()
.appendTo('#main')
.slideDown(1000);
});
});
});
</script>
I then removed then .html # from the function and just added it in as a value to #empId options
<form>
<select class="dates" id="period">
<option value="p00"class="emp">Period</option>
<option value="p01">1</option>
<option value="p02">2</option>
<option value="p03">3</option>
<option value="p04">4</option>
<option value="p05">5</option>
<option value="p06">6</option>
<option value="p07">7</option>
<option value="p08">8</option>
<option value="p09">9</option>
<option value="p10">10</option>
<option value="p11">11</option>
<option value="p12">12</option>
<option value="p13">13</option>
<option value="p14">14</option>
</select>
<select class="dates" id="week">
<option Value="w00"class="emp">Week</option>
<option value="w01">1</option>
<option value="w02">2</option>
<option value="w03">3</option>
<option value="w04">4</option>
<option value="w05">5</option>
<option value="w06">6</option>
</select>
<select class="dates" id="day">
<option value="d00"class="emp">Select Day or Leave Blank for Week</option>
<option value="d01">1</option>
<option value="d02">2</option>
<option value="d03">3</option>
<option value="d04">4</option>
<option value="d05">5</option>
<option value="d06">6</option>
<option value="d07">7</option>
</select>
<select id="empId">
<option class="emp">Employee ID</option>
<option value=".html #JXS0001">John Smith</option>
</select>
Load Metrics
</form>
</div>
<div id="main">
<h1>Metrics</h1>
</div>
I still have a lot of bedazelling to do(such as making the emp id dynamic and editable from a separate html) but that's the fun part(and I know how haha). Anywho thanks a million for helping this newb out #bloodyKnuckles
I am a beginer in javascript and I want to change an image based upon options in my dropdown (select)
I find this tutorial, but I am having some problems.
In this tutorial they replace iljbild by the name of the picture files you are going to use
if you want to use the code as it is the names of the picture files have got to be of the same type as in the example, ie the only thing telling the files apart should be a number, e g pict0.gif, pict2.gif etc.
if you are using jpg images you will have to replace gif by jpg.
set the WIDTH and the HEIGHT of the images
if you change the (length of the) words in the selection list you will also have to change the number after charAt (here it is 8)
it's what i did by replacing iljbid by:
http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg
but it doesn't work.
The tutorial expect you to have a list of images with a named convention. That is {prefix}{number}.{extension}. For exmaple:
image0.jpg
image1.jpg
image2.jpg
and so on...
The prefix on all images must be the same, and the extension on all images must be the same. This is a simple tutorial to get the effect done.
It can be expanded once you have more JavaScript knowledge.
Also, that tutorial is really bad (don't mean to disrespect, but it is really lacking. Copying and pasting the example itself into JSFiddle throws errors everywhere).
The tutorial is from 1998. That is 16 years old. I strongly suggest you to look for newer tutorials. (2010+)
Here is an example replica of the tutorial that works:
http://jsfiddle.net/VmWD9/
HTML
<img src="http://www.flowsim.se/picts/selec01.jpg" width="70" height="70" name="myImage" />
<form method="" action="" name="myForm">
<select size="8" name="switch" onchange="switchImage();">
<option value="1">Image 1</option>
<option value="2">Image 2</option>
<option value="3">Image 3</option>
<option value="4">Image 4</option>
<option value="5">Image 5</option>
<option value="6">Image 6</option>
<option value="7">Image 7</option>
</select>
</form>
JavaScript
// This is the code to preload the images
var imageList = Array();
for (var i = 1; i <= 7; i++) {
imageList[i] = new Image(70, 70);
imageList[i].src = "http://www.flowsim.se/picts/selec0" + i + ".jpg";
}
function switchImage() {
var selectedImage = document.myForm.switch.options[document.myForm.switch.selectedIndex].value;
document.myImage.src = imageList[selectedImage].src;
}
Though nowadays people use JavaScript libraries such as jQuery or MooTools to acomplish things like that. I do find that it is better to first explore things in pure JS before heading into these libraries, though it is not a necessity. Most of these libraries are easy to grasp, but when you want to make something big you might need to have prior JS knowledge.
I recommend that you go through the Codecademy JavaScript tutorial.
Here try this FIDDLE
<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
<option value="1" selected>Picute 1</option>
<option value="2">Picute 2</option>
<option value="3">Picute 3</option>
<option value="4">Picute 4</option>
<option value="5">Picute 5</option>
</select>
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]);
});
There are multiple ways to achieve the desired.
This one is by getting the Number value after the select change event and get that src out of the imagesArray Array key.
<select id="changeImage">
<option value="0">image 0</option>
<option value="1">image 1</option>
<option value="2">image 2</option>
</select>
<img id="image" src='//placehold.it/50x50/cf5'>
var imagesArray = [
"//placehold.it/50x50/cf5", // represents val 0,
"//placehold.it/50x50/f1f", // 1,
"//placehold.it/50x50/444" // 2 ...
];
$('#changeImage').change(function(){
$('#image')[0].src = imagesArray[this.value];
});
The other one is to have image names inside the option text:
<select id="changeImage">
<option>image.jpg</option>
<option>something.png</option>
<option>nature.jpg</option>
</select>
<img id="image" src='image.jpg'>
$('#changeImage').change(function(){
$('#image')[0].src = this.value;
});
I've got a number of drop downs on a page that filter a list. However, when I try to get those values within a function I get nothing returned every time!
I've tried the following: -
var browserVal= document.getElementById("browser").options[document.getElementById("browser").selectedIndex].value;
var browserVal= document.getElementById("browser").options[document.getElementById("browser").selectedIndex].text;
I've also tried: -
systemVal = $("#browser").children("option").filter(":selected").val();
systemVal = $("#browser").children("option").filter(":selected").value;
systemVal = $("#browser").children("option").filter(":selected").text();
As well as: -
var browserVal= $("#browser").text()
var browserVal= $("#browser").val()
The items are setup like so: -
<fieldset class="buttons">
system
<select id="System" class="filterField" name="System" style="width:250px">
<option value="">Please Select</option>
<option value="3">Processing</option>
<option value="2">Other</option>
<option value="1">Reporting</option>
</select>
Browser
<select id="browser" class="filterField" style="width:175px" name="browser">
<option value="">Please Select</option>
<option value="IE">IE</option>
<option value="RND">RND</option>
<option value="FF">FF</option>
<option value="CH">CH</option>
</select>
</fieldSet>
Any suggestions to alternatives that I could try I'm out of ideas as an identical approach on a different page works fine... :S
You can get selected value of drop down like this
var dropDown=document.getElementById("browser");
var selectedValue=dropDown[dropDown.selectedIndex].value;
Similarly You can do This to get text
var e = document.getElementById("browser");
var strUser = e.options[e.selectedIndex].text;
Try this:
systemVal = $("#browser").find("option:selected").val();
UPDATE: The original question asked was answered. However, the code revealed for all. So, I've modified my question below:
So I have the following dynamically generated html via php
<div class="image-link link-posttypes mainSelector1">
<select id="wp_accordion_images[20110630022615][post_type]" name="wp_accordion_images[20110630022615][post_type]">
<option value="">default</option>
<option value="post" class="post-type">Post</option><option value="page" class="post-type">Page</option><option value="dp_menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option><option value="custom-link">Custom Link</option>
</select>
</div>
<div class="image-link link-pages1">
<select id="wp_accordion_images[20110630022615][page_id]" name="wp_accordion_images[20110630022615][page_id]">
<option value="50" class="level-0">About</option>
<option value="65" class="level-0">Contact</option>
<option value="2" class="level-0">Sample Page</option>
<option value="60" class="level-0">Staff</option>
</select>
</div>
<div class="image-link link-posts1">
<select onchange="javascript:dropdown_post_js(this)" id="wp_accordion_images[20110630022615][post_id]" name="wp_accordion_images[20110630022615][post_id]">
<option value="http://localhost/tomatopie/?p=1" class="level-0">Hello world!</option>
</select>
</div>
<div class="image-link link-custom1">
<input type="text" size="25" value="" name="wp_accordion_images[20110630022615][image_links_to]">
</div>
***THEN IT REPEATS four times: where the #1 goes to 2..3...4 (max to 4 at this time).
I have the ability to label div .classes, select #ids, and option classes. However, what I want to be able to do is based on the option selected from div .link-posttypes, I want to reveal .link-pages (if page is selected) or .link-posts (if post is selected) and .link-custom for all others (except the default).
So as written on the screen there should only be the initial div, and once the user selects an item, the appropriate div appears.
I have never developed anything in jQuery or javascript. This is my maiden voyage. Any help will be greatly appreciated!
***Also, this will be loaded via an external js file.
Here is the final answer that worked:
jQuery(document).ready(function($) {
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").slideDown('slow');
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal=="page"){
$(this).parent().nextAll(".link-pages").slideDown('slow');
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}else if(selectedVal!=""){
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().next().nextAll(".link-custom").slideDown('slow');
}else{
$(this).parent().nextAll(".link-pages").hide();
$(this).parent().nextAll(".link-posts").hide();
$(this).parent().nextAll(".link-custom").hide();
}
});
});
jQuery(document).ready(function($) {
$(".image-content select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="content-limit"){
$(this).parent().next().nextAll(".content-limit-chars").slideDown('slow');
$(this).parent().nextAll(".content-custom").hide();
}else if(selectedVal=="custom-content"){
$(this).parent().nextAll(".content-limit-chars").hide();
$(this).parent().next().nextAll(".content-custom").slideDown('slow');
}
});
});
Thanks for your help!
Assuming that you're outputting proper IDs, you can do something like this (note I replaced the id):
$(window).load(function(){
// hide all the divs except the posttypes
$('.image-link').not('.link-posttypes').hide();
$('#wp_accordion_images_20110630022615_post_type').change(function() {
var divSelector = '.link-' + $(this).val();
$('.image-link').not('.link-posttypes').hide();
$(divSelector).show();
});
});
Also, consider changing your options like this:
<option value="posts" class="post-type">Post</option>
<option value="pages" class="post-type">Page</option>
<option value="menu_items" class="post-type">Menu Items</option>
<option value="wps_employees" class="post-type">Employees</option>
<option value="custom">Custom Link</option>
Here's a jsfiddle for this: http://jsfiddle.net/JrPeR/
There's my understandable jquery script
jQuery(document).ready(function($) {
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
$(".link-posttypes select").change(function(){
var selectedVal = $(":selected",this).val();
if(selectedVal=="post"){
$(".link-pages").hide();
$(".link-posts").show();
$(".link-custom").hide();
}else if(selectedVal=="page"){
$(".link-pages").show();
$(".link-posts").hide();
$(".link-custom").hide();
}else if(selectedVal!=""){
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").show();
}else{
$(".link-pages").hide();
$(".link-posts").hide();
$(".link-custom").hide();
}
});
});
Demo here. Take me couple minute to make you easy to understand. Have fun.
http://jsfiddle.net/JrPeR/3/
added a conditional so if its not the two variables it defaults to the custom.