The following HTML code is working as expected. What I need is a drop down option where the user will select any platform and the righ frame will load the required file.
android form
J2ME form
windows form
The following html generates the drop down option but how to make the required pages load automatically?
<form>
Platform:
<select name='platform'>
<option>Android </option>
<option> J2ME </option>
<option> Windows </option>
</select>
</form>
<html>
<head>
<script type="text/javascript">
function loadFrame()
{
var s=document.getElementById("platform").value;
document.getElementById("loadContainer").innerHTML=""
var iframe = document.createElement("iframe");
iframe.src = s;
document.getElementById("loadContainer").appendChild(iframe);
}
</script>
</head>
<body>
<div style="float:left">
<form>
Platform:
<select id='platform' onchange="loadFrame()">
<option value="android.html">Android</option>
<option value="J2ME.html">J2ME</option>
<option value="Windows.html">Windows</option>
</select>
</form>
</div>
<div id="loadContainer" style="float:right"></div>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function loadFrame()
{
var select_value=document.getElementById("platform").value;
window.location =select_value;
}
</script>
</head>
<body>
<form>
Platform:
<select id='platform' onchange="loadFrame()">
<option value="andriod.html">Android</option>
<option value="j2me.html">J2ME</option>
<option value="windows.html">Windows</option>
</select>
</form>
</body>
</html>
You can add an empty frame in your page and directly change its src, there's no need to retrieve html content, like below:
<html>
<head>
<script type="text/javascript">
function loadFrame(comboBox)
{
var frame = window.frames['platformFrame'],
src = comboBox.options[comboBox.selectedIndex].value;
frame.window.location.href = src; //use window.location to avoid browser capability.
}
</script>
</head>
<body>
<form>
Platform:
<select id='platform' onchange="loadFrame()">
<option value="andriod.html">Android</option>
<option value="j2me.html">J2ME</option>
<option value="windows.html">Windows</option>
</select>
</form>
<iframe src="" id="platformFrame"></iframe>
</body>
</html>
You can try such a variant:
First, set values for your options like this and set the onchange event for select element:
<form>
Platform:
<select name='platform' onchange='loadFrame(this)' id='OSList'>
<option value="1.html">Android</option>
<option value="2.html">J2ME</option>
<option value="3.html">Windows</option>
</select>
</form>
<div id="loadContainer"></div>
Second, create a function, that creates an iFrame with the src got from selected option value and appends it somewhere (like to div#loadContainer):
function loadFrame(comboBox)
{
var frame = document.createElement("iframe");
frame.src = comboBox.options[comboBox.selectedIndex].value;
var container = document.getElementById("loadContainer");
container.innerHTML = "";
container.appendChild(frame);
}
Look at the example here
If you are able to use jQuery (or other frameworks you may bind to the select onchange event in such a way via JS):
var el = $("#OSList");
el.change(function() {
var frame = document.createElement("iframe");
frame.src = el.val();
$("#loadContainer").empty().append(frame)
});
Example here
Related
I am trying to get user input data in index.html. Then once user clicks on next, it should show the input data in the getapart.html page(second page). I am trying to use session storage for same. There are no errors, but it doesn't show the value. Not sure what I am doing wrong.
HTML
<html>
<head>
<script src = "showdata.js">
</script>
</head>
<body>
<fieldset style="width: fit-content; margin: 0 auto; font-size: 30px;">
<form action="getapart.html">
<legend>Check for your part!</legend><br>
<label>Year:<br />
<select id="Year" onchange="show_yeardata()">
<option> - Select Year - </option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</select>
<br>
<label>Make:<br />
<select id="Make" onchange= show_makedata()">
<option> - Select Make - </option>
<option value="Chevrolet">Chevrolet</option>
<option value="Ford">Ford</option>
<option value="BMW">BMW</option>
<option value="Audi">Audi</option>
<option value="Toyota">Toyota</option>
</select>
<br>
<br><br>
<input type="text" id="showyear"><br>
<input type="text" id="showmake"> <br>
<input type="Submit"; value="Next" />
</form>
</fieldset>
</body>
</html>
getapart.html (second page to retrieve the user input and display the data)
<html>
<head>
<script src = "showdata.js">
</script>
</head>
<body>
Home
<br><br><br>
<div onload= "show_yeardata()" >
Year: <span id="ss_showyear"> </span><br>
Make: <span id="ss_showmake"> </span><br>
</div>
</body>
</html>
JS script (showdata.js)
function show_yeardata()
{
var year = document.getElementById("Year");
var year1 = year.options[year.selectedIndex].text;
document.getElementById("showyear").value=year1;
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
}
function show_makedata()
{
var make = document.getElementById("Make");
var make1 = make.options[make.selectedIndex].text;
document.getElementById("showmake").value=make1;
sessionStorage.setItem("key_showmake",make1);
document.getElementById("ss_showmake").innerHTML = sessionStorage.getItem("key_showmake");
}
Looks like you are using same function for setting and getting the data. This increases complexity in many cases and brokes the system in your case.
Edit: Placement of the onload event is also invalid. You should put that to the body tag. See: How to add onload event to a div element
In the first page you successfully get data from selection and set to the session storage. However, when you trigger the same function again in the second page, year1 becomes undefined since there is no element with id "Year".
Then with these line you first put undefined to session storage then get it back immediately.
sessionStorage.setItem("key_showyear",year1);
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
Solution is simple. You split setter and getter functions like this.
function set_year_data() {
var year = document.getElementById("Year");
var year1 = year.options[year.selectedIndex].text;
document.getElementById("showyear").value=year1;
sessionStorage.setItem("key_showyear",year1);
}
function get_year_data() {
document.getElementById("ss_showyear").innerHTML = sessionStorage.getItem("key_showyear");
}
And in the first html:
...
<select id="Year" onchange="set_year_data()">
...
And in the secondhtml:
...
<body onload="get_year_data()" >
...
When combined like this, it works
<form name="classic">
<select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>thing</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>
<script type="text/javascript">
var countrieslist = document.classic.countries
var citieslist = document.classic.cities
var cities = new Array()
cities[0] = ""
cities[1] = ["1.1|gvhj", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
cities[2] = ["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
cities[3] = ["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
cities[4] = ["4.1|4.1"]
function updatecities(selectedcitygroup) {
citieslist.options.length = 0
if (selectedcitygroup > 0) {
for (i = 0; i < cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length] = new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
}
}
</script>
But when separated into a .html and .js file, it doesn't. Why?
3lev.html:
<html>
<head>
<meta charset="utf-8"/>
<title>3lev</title>
<script src="3lev.js"></script>
</head>
<body>
<form name="classic">
<select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
<option selected>thing</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
</select>
</form>
</body>
</html>
3lev.js:
var countrieslist=document.classic.countries
var citieslist=document.classic.cities
var cities=new Array()
cities[0]=""
cities[1]=["1.1|1.1", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
cities[2]=["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
cities[3]=["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
cities[4]=["4.1|4.1"]
function updatecities(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
}
}
The file is properly linked and the code is directly copied and pasted, so I can't see why wouldn't it work.
I don't know why it keeps making me add details, it's literally all I've got. I've given everything related that I could.
Add the defer attribute to the script tag
<script src="3lev.js" defer></script>
Or you can include the script tag just before the </body>closing tag intead of putting within head tag.
</form>
<script src="3lev.js"></script>
</body>
</html>
This will make the browser execute script only after DOM content has been loaded.
You need to use window.onload event of the javascript to make sure all the DOM content is loaded before javascript starts executing.
Below is the working code snippet:
window.onload=function(){
countrieslist=document.classic.countries
citieslist=document.classic.cities
};
var countrieslist,citieslist;
var cities=new Array() cities[0]=""
cities[1]=["1.1|1.1", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
cities[2]=["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
cities[3]=["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
cities[4]=["4.1|4.1"];
function updatecities(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new
Option(cities[selectedcitygroup][i].split("|")[0],
cities[selectedcitygroup][i].split("|")[1])
}
}
}
What I want to reach:
Show an image depending on select box selection. But I don't want to take attribute value="", I want to take a custom attribute data-img="" instead.
This is the code I actually have, but it's not working:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
function showFormatImage() {
var image = document.getElementById("itemImage");
image.src = $('select[name=itemImage] option:selected').data('img');
return false;
}
document.getElementById("itemImage").onchange = showFormatImage;
</script>
</head>
<body>
<select id="itemImage" name="itemImage">
<option data-img="first.png">First</option>
<option data-img="second.png">Second</option>
<option data-img="third.png">Third</option>
</select><br>
<img id="itemImage" src="">
</body>
</html>
No image is shown. Does anybody know what's wrong?
P.S.: If there's a non-Javascript solution, that would be even better but I don't think there is.
var image = document.getElementById("itemImage");
var image is the select - not the img, also - itemImage does not exist at time of execution so the event handler isn't placed.
you should change your code to:
<html>
<head>
<script>
window.onload = function() {
document.getElementById("itemImage").onchange = showFormatImage;
};
function showFormatImage() {
var image = document.getElementById("changeImage");
image.src = $('select[name=itemImage] option:selected').attr('data-img');
return false;
}
</script>
</head>
<body>
<select id="itemImage" name="itemImage">
<option data-img="first.png">First</option>
<option data-img="second.png">Second</option>
<option data-img="third.png">Third</option>
</select><br>
<img src="" id='changeImage'/>
</body>
</html>
jquery solution:
$(document).ready(function(){
$('#itemImage').change(function(){
var src = $(this).find('option:selected').attr('data-img');
$('img#changeImage').attr('src',src);
});
});
Should replace .data function with .attr(data-img)
I have a form and i have the input values say
google
microsoft
On selection of the input value google i want to open a new google page in the new window. how i can get that.
HTML code:
<html>
<body>
<script>
function openAnotherWin(combo) {
var v = combo.value;
window.open(v);
}
</script>
<select name="sites" onchange="openAnotherWin(this)">
<option value="">Select one site...</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.microsoft.com">Microsoft</option>
</select>
</body>
</html>
Test site: http://jsfiddle.net/JU4p3/
you should add an "onchange" event to the input field
<script type="text/javascript">
<!--
function onChangeExample(){
window.location = "http://www.google.com/"
}
//-->
</script>
<input type="text" id="example" onchange="onChangeExample()">
I need to make javascript code to swap images with option change.
Here is the code:
<select name="Color:"onchange="document.getElementById('myimage').src = this.value;
">
<option value="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_byr.jpg">Black/Yelow/Red</option>
<option value="images/taylormade_purelite_standbag_by.jpg">Black/Yellow</option>
<option value="images/taylormade_purelite_standbag_nr.jpg">Navy/Red</option>
<option value="images/taylormade_purelite_standbag_nw.jpg">Red/Black/White</option>
<option value="images/taylormade_purelite_standbag_rb.jpg">Black/Red</option>
<option value="images/taylormade_purelite_standbag_wrb.jpg">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
My problem is this: I need to have option values in plain text such as "Black/Yelow/Red" not a URL because this option value will show up in the check out page. Can anybody help me?
Setting up a mapping from your color options to the URLs might work, I think.
<script>
var colorUrlMap = {
"Black/White" : "images/taylormade_purelite_standbag_bk.jpg",
//Add more here
"White/Red/Black" : "images/taylormade_purelite_standbag_wrb.jpg"
};
</script>
<select name="Color:"onchange="document.getElementById('myimage').src = colorUrlMap[this.value];">
<option value="Black/White">Black/White</option>
<!-- Add more here -->
<option value="White/Red/Black">White/Red/Black</option>
</select>
<img src="images/taylormade_purelite_standbag_bk.jpg" id="myimage">
Use another attribute on the option:
<option value="Black/White" rel="images/taylormade_purelite_standbag_bk.jpg">Black/White</option>
Then get that attribute with getAttribute("rel")
<select name="Color:" onchange="document.getElementById('myimage').src = this.options[this.selectedIndex].getAttribute('rel');">
You could use CSS and just change the class based upon the selection. Then all of your URL's are in a stylesheet.
CSS:
.red
{
background: url(red.gif) no-repeat;
}
HTML/JS:
<select name="Color:" onchange="document.getElementById('myimageholder').setAttribute("class", "red");">
This works for me.
<HTML>
<head>
<TITLE>Image Select Test</TITLE>
<script type="text/javascript" language='javascript'>
function flip() {
myimage.src = ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url');
}
</script>
</head>
<body>
<form>
Select an image:<br/>
<select id="ColorSelect" onchange="javascript:flip();">
<option url="images/0.png" value='Zero'>Zero</option>
<option url="images/1.png" value='One'>One</option>
<option url="images/2.png" value='Two'>Two</option>
<option url="images/3.png" value='Three'>Three</option>
<option url="images/4.png" value='Four'>Four</option>
</select>
</form>
<img src="images/unknown.png" id="myimage"/>
</body>
<script type="text/javascript" language='javascript'>
// place this after <body> to run it after body has loaded.
var myimage = document.getElementById('myimage');
var ColorSelect= document.getElementById('ColorSelect');
</script>
</HTML>
ColorSelect.children[ColorSelect.selectedIndex].getAttribute('url'); does not work.
It is rather ColorSelect.options[ColorSelect.selectedIndex].getAttribute('url');