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.
Related
I have a txtSubTotal text box, a discount drop down and a txtGrossTotal text box. txtSubTotal text box is updating when the ADD button is clicked. txtGrossTotal text box is updating when the drop down value is selected. But, when updating the txtSubTotal text box, at the same time txtGrossTotal text box should be updated for the default drop down value, which is "0". Here, txtGrossTotal should be the value of txtSubTotal.
Below is my code, it doesn't display the txtGrossTotal when the drop down has it's default value. (But, after selecting another option, and again select the default value, it updates the txtGrossTotal.)
function discountedGrossTotal(dropdownVal){
var discountOption = document.getElementById("discount"),
subTotal = document.getElementById("txtSubTotal"),
grossTotal = document.getElementById("txtGrossTotal").value;
grossTotal.value = subTotal.value - (subTotal.value * dropdownVal/100);}
discount drop down
<select class="select" id="discount" name="discount" onchange="discountedGrossTotal(this.value);">
<option selected>0</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
txtGrossTotal HTML
<div id="gross_total_div">
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly/>
</div>
Basically you want to take the same action by changing the "discount" dropdown value as well as the "subtotal" textbox value. So, you will have to call the same function on both.
You can achieve this by doing below modifications in your code:
Remove the parameters from "discountedGrossTotal" function
Add a new variable inside your function like dropdownVal = document.getElementById("discount").value
Call the same function on change event of your "txtSubTotal" textbox
Now, this function will be called if any of these (textbox or dropdown) value is changed and hence the "Gross Total" value will be updated accordingly.
Please Try this, it should work for you...
function discountedGrossTotal() {
var dropdownVal= document.getElementById("discount").options[document.getElementById("discount").selectedIndex].innerHTML;
subTotal = document.getElementById("txtSubTotal");
grossTotal = document.getElementById("txtGrossTotal").value;
document.getElementById("txtGrossTotal").value = subTotal.value - (subTotal.value * dropdownVal / 100);
}
sub total: <input type="text" id="txtSubTotal" onblur="discountedGrossTotal()" />
<br />
discount: <select class="select" id="discount" name="discount" onchange="discountedGrossTotal();">
<option selected>0</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br />
<div id="gross_total_div">
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly />
</div>
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 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>