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()"
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()" >
...
I have this code to calculate results (multipliers * 5) , but it shows me results into <div id="total"></div>
<script type="text/javascript">
function calculate(multiplier) {
var product = multiplier*5;
document.getElementById('total').innerHTML = product;
}
</script>
<form>
<select name="multipliers" onchange="calculate(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="total"></div> <!-- result is displayed here -->
<input type="text" id="total" readonly="readonly">
</form>
Is it possible to show results into an input text not into a div ?
<input type="text" id="total" readonly="readonly"> <!-- I'd like to show result here -->
yes you can... try it like this
document.getElementById('total').value = product;
but it is better to have unique ids.
so remove div if you are not using it anymore
or give another id to textbox
Every element should have a unique identifier, but you have two with id='total'. Change the second ID attribute to something unique.
I am building a tool which on a selection of a value from a dropdown box populates the other fields.So if suppose (a) is selected fileds 2 3 and 4 are displayed in a form but if(b) is selected fields 2 3 4 as well as additional fields 5 and 6 are added as well.Right now I am working around a way to have two forms one with fields 2 3 and 4 and other with 2 3 4 5 and 6.Depending on selection of values from dropdown list(a or b) either forms are shown/hidden.
But it doesn't do as expected.
The html is
<html>
<head>
<title>My Page</title>
</head>
<body>
<center><h1>URL Builder</h1></center>
<div align="center">
<select id ="Type1" name="Aoldropdown">
<option value="Fixed">Fixed Ad Units</option>
<option value="Scrolled">Scrolled Ad Units</option>
<option value="Custom">Custom Ad Units</option>
</select>
<form name="Aolform" id ="aol1" action="/URLBuilder/URLRetriever" method="GET">
<select name="Sizedropdown">
<option value="300x1050">300x1050</option>
<option value="300x600">300x600</option>
<option value="300x250">300x250</option>
<option value="728x90">728x90</option>
<option value="970x250">970x250</option>
<option value="320x50">320x50</option>
<option value="768x90">768x90</option>
<option value="1024x90">1024x90</option>
</select>
<br></br>
Base URL:<input type="text" name="baseURL"><br>
Title Number:<input type="text" name="titleNo"><br>
Placement ID: <input type="text" name="placementId"><br>
Flight ID: <input type="text" name="flightId"><br>
<input type="submit" value="Retrieve URL">
<!-- input type = "submit" Value ="Select URL Type"-->
</div>
</form>
<form name="Aolform2" id ="aol2" action="/URLBuilder/URLRetriever" method="GET">
<select name="Sizedropdown">
<option value="300x1050">300x1050</option>
<option value="300x600">300x600</option>
<option value="300x250">300x250</option>
<option value="728x90">728x90</option>
<option value="970x250">970x250</option>
<option value="320x50">320x50</option>
<option value="768x90">768x90</option>
<option value="1024x90">1024x90</option>
</select>
<br></br>
Placement ID: <input type="text" name="placementId"><br>
Flight ID: <input type="text" name="flightId"><br>
<input type="submit" value="Retrieve URL">
<!-- input type = "submit" Value ="Select URL Type"-->
</div>
</form>
<script type ="text/javascript">
var forms = document.forms['Aolform'];
//console.log(forms);
//console.log(forms.elements);
document.getElementById("Type1").addEventListener("onchange",onDropDownChange,true);
if(document.getElementById("Type1").value =='Custom'){
document.getElementById('aol1').style.visiblity='visible';
document.getElementById('aol2').style.visibility='hidden';
}
else
{
document.getElementById('aol2').style.visibility='visible';
document.getElementById('aol1').style.visibility='hidden';
}
</script>
</body>
</html>
Please help me fix this.
IS THERE ANY OTHER WAY I CAN DO IT.
Thanks
Swaraj
Check out this fiddle. I made a few changes, first instead of onchange just use change. Also you are referencing a non-existent function onDropDownChange(), so I have put your condition inside of that:
function onDropDownChange() {
if (document.getElementById("Type1").value == 'Custom') {
document.getElementById('aol1').style.display = 'none';
document.getElementById('aol2').style.display = 'block';
} else {
document.getElementById('aol2').style.display = 'none';
document.getElementById('aol1').style.display = 'block';
}
}
I also changed the function to use style.display instead of style.visibility so that you don't have a gap above the second form when it displays.
Yes, there are lots of ways to do what you want, but I'm going to give you a straight answer based on what you have done so far. Your script is incorrect because the conditional is not triggered by the event OnChange. Try it like this:
document.getElementById("Type1").onchange = function() {
if(document.getElementById("Type1").value =='Custom'){
document.getElementById('aol1').style.visiblity='visible';
document.getElementById('aol2').style.visibility='hidden';
}
else
{
document.getElementById('aol2').style.visibility='visible';
document.getElementById('aol1').style.visibility='hidden';
}
}
But you should check the behaviour of your "if" condition to see if that's what you really want to do.
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 am trying to develop a code in js where i have three feilds in a form
one is the price that is dynamic and other is the drop down in which i had ten values from 1 to 10 I want whenever I select option from dropdown i should get the total price base on the unit price
any kind of help appreciated
i don't know if I exactly understand what you want, but i tried write some code. You can test is on jsfiddle
so html markup can look something like that:
<input type="text" id="priceId" value="5" />
<select id="priceTypeId" name="priceType">
<option value="1">1</option>
<option value="2">2</option>
...
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="text" id="resultId" />
and jQuery functions for this are:
$(document).ready(function() {
$('#priceTypeId').change(function() {
$('#resultId').val( $('#priceTypeId').val() * $('#priceId').val() );
});
});
If you have any question, I'll try to answer quickly.
Use some thig like these:
<script type='text/javascript'>
function FieldOnChange()
{
// put logic here use document.getElementByID('FieldID').value;
}
</script>
<form>
<select name='title' onchange='javascript:FieldOnChange();'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
...
</select>
<!-- rest of your form -->
</form>
You need to add an onchange to your drop down and have it call a javascript function that does the calculation and sets the new value of the field.
<script type="text/javascript">
function recalculate()
{
var f = document.forms.myform;
f.cost.value = f.price.value * f.qty.value;
}
</script>
<form action="doStuff" method="post" id="myform">
<p>Price<input type="text" id="price"/></p>
<p>Quantity
<select id="qty" onChange="recalculate()">
<option id="0">0</option>
<option id="1">1</option>
<option id="2">2</option>
</select>
<p>
<p>Cost<input type="text" id="cost"/></p>
</form>