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()" >
...
Related
<!DOCTYPE html>
<html>
<body bgcolor="#999966">
<select id="myFruitSelect">
<option value="0"> Please Choose a Fruit </option>
<option value="1"> Apple</option>
<option value="2">Orange</option>
<option value="3">Pineapple</option>
<option value="4">Banana</option>
<option value="5"> Watermelon </option>
</select>
</form>
<br>
<button onclick="myFunction()"> Select Your Fruit</button>
<img id="outputImage" src=""/>
<script>
function myFunction() {
var n =parseInt(x) -1;
var pictures=[ "apple.png", "orange.png", "pineapple.png", "banana.png", "Watermelon.png"];
var x = document.getElementById("myFruitSelect").value;
document.getElementById('outputImage').src = pictures[n-1];
}
</script>
</body>
</html>
Any help or points in the right direction is appreciated
I'm trying to make a page that a user selects a option from the dropdown and an array value is then shown based on the user's selection. I can't figure out how to access the array value based on the user selection. I can only use HTML and Script so no answers with jQuery please.
This line seems to be problematic (var n =parseInt(x) -1;), as you are using x before you defined it. You could just move that declaration below your var x declaration, or get rid of it altogether:
<!DOCTYPE html>
<html>
<body bgcolor="#999966">
<select id="myFruitSelect">
<option value="0"> Please Choose a Fruit </option>
<option value="1"> Apple</option>
<option value="2">Orange</option>
<option value="3">Pineapple</option>
<option value="4">Banana</option>
<option value="5"> Watermelon </option>
</select>
</form>
<br>
<button onclick="myFunction()"> Select Your Fruit</button>
<img id="outputImage" src=""/>
<script>
function myFunction() {
var pictures= [ "apple.png", "orange.png", "pineapple.png", "banana.png", "Watermelon.png"];
var x = document.getElementById("myFruitSelect").value;
document.getElementById('outputImage').src = pictures[parseInt(x, 10)-1];
}
</script>
</body>
</html>
This is rare, apparently your code is ok but there is a difference between the id you are giving to your image element and the one on your document.getElementById both seems the same to me but when i copy and paste the id from the image to the document.getElementById() it works perfect.
<!DOCTYPE html>
<html>
<body bgcolor="#999966">
<form>
<select id="myFruitSelect">
<option value="0"> Please Choose a Fruit </option>
<option value="1"> Apple</option>
<option value="2">Orange</option>
<option value="3">Pineapple</option>
<option value="4">Banana</option>
<option value="5"> Watermelon </option>
</select>
</form>
<br>
<button onclick="myFunction()"> Select Your Fruit</button>
<img id="outputImage" src=""/>
<script>
function myFunction() {
var pictures=[ "apple.png", "orange.png", "pineapple.png", "banana.png", "Watermelon.png"];
x = document.getElementById("myFruitSelect").value;
//This will give you index of the selected option.
//As the array starts from 0 , we need to subtract 1 to access the particular picture
y = parseInt(x);
m = y-1;
console.log(pictures[m]);
document.getElementById('outputImage').setAttribute("src", pictures[m]);
}
</script>
</body>
</html>
I understand that the general method of passing variables between pages is to have a form, have these elements within the form, like below, and access these as $_GET['year'] and $_GET['dropdown']
<body>
<form method="get" action="index.php">
<select name="language">
<option value = "english">English</option>
<option value = "tagalog">Tagalog</option>
</select>
</br>
<select name="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
<input type="submit" value="submit">
</form>
</body>
However, along with passing these two variables, namely year and dropdown, I would like to pass another variable, which is not part of the form. So, although there are only two elements in the form, I would like the GET URL to look as follows
http://localhost:63342/ApplicationName/php/index.php?language=tagalog&year=2010&randomNumber=1932932
Notice the randomNumber=1932932 at the end of the URL.
I cannot use session variables because in the same browser and for the same user, I would like different tabs to corresponding to different values.
If you don't want use things like jQuery (which is way easier than native JavaScript), you can make a simple click handler for the submit button:
<body>
<form method="get" action="test.php">
<select name="language">
<option value = "english">English</option>
<option value = "tagalog">Tagalog</option>
</select>
<select name="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
<input type="submit" value="submit" onclick="submitForm()">
</form>
</body>
<script>
function submitForm() {
var randomNumber = Math.floor((Math.random() * 10000) + 1);
var hiddenfield = document.createElement('input');
hiddenfield.setAttribute('type', 'hidden');
hiddenfield.name = 'randomnumber';
hiddenfield.value = randomNumber;
document.getElementsByTagName('form')[0].appendChild(hiddenfield);
}
</script>
This will add a hiddenfield to the form before posting and add a random number between 1 - 10000 to the hiddenfield.
You can use a hidden input within the form
<input type="hidden" value="something" name="name" />
An option you could take it is build the get method in Ajax. Here you access all the elements from your page and pass the into your url. This way you are not limiting your 'get parameters' to only elements within the form. An example is shown here http://www.w3schools.com/jquery/jquery_ajax_get_post.asp
If you use GET anyway, you can use javascript to create a URL based on the inputs, and navigate to it instead of submitting the form.
<body>
<select name="language" id="lang">
<option value = "english">English</option>
<option value = "tagalog">Tagalog</option>
</select>
</br>
<select name="year" id="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
<input type="button" onclick="nav()" value="submit">
<script>
function nav(){
var url = 'index.php?';
var ids = ['lang', 'year'];
var input;
for (var i = 0; i < ids.length; i++) {
input = document.getElementById(ids[i]);
url += encodeURIComponent(input.name) + '=' + encodeURIComponent(input.value) + '&';
};
url += 'randomNumber=' + 1932932; // generate a number here
document.location = url;
}
</script>
</body>
I have this html with javascript, but I don't know why it's not working. It's right now supposed to calculate the values of the two textboxes when the button is pressed. However nothing is happening.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Räpellys 2</h1>
<select id="mathType">
<option value="0">Addition</option>
<option value="1">Subtraction</option>
<option value="2">Multiplication</option>
<option value="3">Division</option>
<option value="4">Shift Left</option>
<option value="5">Shift Right</option>
<option value="6">Increment</option>
<option value="7">Decrement</option>
<option value="8">AND</option>
<option value="9">OR</option>
<option value="A">XOR</option>
</select>
<p></p>
<form>
Value 1: <input type="text" id="val1" value=""></input>
<p></p>
Value 2: <input type="text" id="val2" value=""></input>
</form>
<p></p>
<button onclick="mathFunc">Calculate!</button>
<p></p>
<script>
function mathFunc() {
var box1 = document.getElementById("val1").value;
var box2 = document.getElementById("val2").value;
if (document.getElementById("mathType").value == 0) {
document.write(box1 + box2);
}
}
</script>
<noscript>Java is required to display this element!</noscript>
</body>
</html>
The issue is that the function should be called on click: onclick="mathFunc()".
Generally, I would recommend you not to use document.write in the code but for debugging purposes use browser console and console.log function.
MDN: https://developer.mozilla.org/en/docs/Debugging_JavaScript#Console.log_in_Browser_Console
the <form> tag should contain the form elements...
eg
<form>
<select...
then I'd also make sure I don't get the string value of the input fields byt wrapping them with parseFloat(). eg:
var box1 = parseFloat( document.getElementById("val1").value ) ;
you also need to call the function as a function, basically what VisioN said above:
onclick="mathFunc()"
i am trying to find a way to allow a user to click items in a combo box and have its value populate an input field and also alert "work stop" or "work start" message when appropriate option is selected. But my code is not working. Please Help!
Here is my code:
<html>
<head>
</head>
<body>
<form>
<select name="sel1" onChange="populateField(this.form)" >
<option value="">---Select---</option>
<option value="stop" >Stop</option>
<option value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">
function populateField(frm){
test = frm.stop.value;
alert('work' test);
frm.eStop.value = test;
}
</script>
</body>
</html>
Thanks in Advance
http://jsfiddle.net/snHQY/
<form>
<select name="sel1" id="select" onchange="populateField();" >
<option value="">---Select---</option>
<option name="stop" value="stop" >Stop</option>
<option name="start" value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script>
function populateField() {
test = document.getElementById('select').value;
alert(test);
document.getElementById('eStop').value = test;
}
</script>
You can do it using the selectedIndex if you want as well,
<form>
<select name="sel1" id="select" onchange="populateField(this);" >
<option value="">---Select---</option>
<option name="stop" value="stop" >Stop</option>
<option name="start" value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script>
function populateField(sel) {
sel.form.eStop.value = 'work ' + (sel.selectedIndex == 1 ? 'Stop' : 'Start');
}
</script>
http://jsfiddle.net/cnpuM/
Your code has two errors. You can not reference an element by its value like this test = frm.stop.value; instead use test = frm.sel1.value; . Another error is in this line alert('work' test);. Here you are joining a string "work" with a variable "test". In java script where ever you join two or more variables or strings and variables you alway have to join them with + sign like this:alert('work ' + test);. Remaining code is ok:
<html>
<head>
</head>
<body>
<form>
<select name="sel1" onChange="populateField(this.form)" >
<option value="">---Select---</option>
<option value="stop" >Stop</option>
<option value="start">Start</option>
</select>
<input type="text" id="eStop" name="eStop" />
</form>
<script type="text/javascript">
function populateField(frm){
var test = frm.sel1.value;
alert('work '+ test);
frm.eStop.value = test;
}
</script>
</body>
</html>
You can also use selectedIndex property of "sel1" to do the same.
in your select you can add to onchange's and onkeypress to the populateField's function this as the objects reference.
<select name="sel1" onchange="populateField(this)" onkeypress="populateField(this)">
Now you can reference the select from o. to pass the selected value to the alert dialog and the input field.
function populateField(o){
alert("work " + o.value);
// use regular W3C DOM syntax for element referencing the input and populate it with the select objects selected options value
document.getElementById("eStop").value = o.value;
}
I'm using the select form to navigate around a page.
<form name="form">
<select name="menu1" onChange="MM_jumpMenu('parent',this,1)">
<option value="#" selected>SELECT</option>
<option value="#a">location A</option>
<option value="#b">location B</option>
</form>
I'd like the select form to have the added functionality of changing image src.
Something like:
<option value="#a; imagea.src='a2.jpg">location A</option>
Thank you.
MM_jumpMenu() is probably a big monolithic thing from Macromedia. Modifying it will be difficult if not impossible. The other issue is that MM_jumpMenu() seems to depend on the value being an anchor. Once you introduce additional information into the value attribute, MM_jumpMenu() will probably stop working.
Given all of that, I'd suggest hijacking another attribute on the <option> tag and writing your own new function:
<form name="form">
<select name="menu1"
onchange="MM_jumpMenu('parent',this,1);changeImageSrc(this);">
<option value="#" selected>SELECT</option>
<option id="a2" value="#a">location A</option>
<option id="b2" value="#b">location B</option>
</form>
<script type="text/javascript">
function changeImageSrc(sel) {
var opt = sel.options[sel.selectedIndex];
if (opt.id) {
var img = document.getElementById('yourImageId');
img.src = opt.id + '.jpg';
}
}
</script>
You'll need to modify the MM_jumpMenu function. Please post the source of that function.
MM_jumpMenu is a Dreamweaver function. You probably don't want to go there. Besides that, clumping a bunch of stuff together in the value attribute smells bad. Do something like this instead --
<img id="my-image" src="img/default.gif" />
<form name="form">
<select name="menu1"
onchange="MM_jumpMenu('parent',this,1); updateImage('my-image', this)">
<option value="#" selected>SELECT</option>
<option value="#a">location A</option>
<option value="#b">location B</option>
</form>
<script type="text/javascript">
updateImage = function(imageId, select) {
var images = {
a: 'img/a.gif',
b: 'img/b.gif'
}
var key = select.value.substr(1);
if (typeof images[key] != 'undefined') {
document.getElementById(imageId).src = images[key];
}
};
</script>