I currently have this piece of code, which is to determine a height and wingspan from a given length. I'd really like for the results to be input as a measurement of feet and inches, and the resulting wingspan and height to respond in the same measurements. I don't mind if it uses apostrophises or periods.
<SCRIPT LANGUAGE="LiveScript">
function wings(form) {
form.wingspan.value = (form.length.value * .75) * 2
form.height.value = form.length.value * .5
}
</SCRIPT>
<TABLE>
<TR>
<TD>Dragon Length:</TD>
<TD><INPUT TYPE="text" NAME="length" SIZE=15 /></TD>
</TR>
<TR>
<TD>Dragon Wingspan:</TD>
<TD><INPUT TYPE="text" NAME="wingspan" SIZE=15 /></TD>
</TR>
<TR>
<TD>Dragon Height:</TD>
<TD><INPUT TYPE="text" NAME="height" SIZE=15 /></TD>
</TR>
<TR>
<TD><INPUT TYPE="button" VALUE="Calculate" ONCLICK="wings(this.form)" /></TD>
</TR>
</TABLE>
</FORM>
Are you loading this in your browser?
If you are, then LiveScript will not run in most cases. You probably want to look at programming using Javascript or JQuery instead.
Here's a snippet to get you started, with inline comments for explanation. Note I don't actually calculate anything for you... you should try doing that on your own as practice:
<!DOCTYPE html>
<html>
<head>
<!-- You need this line so you can load the JQuery functions that you will be using -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form id="wings">
<TABLE>
<TR><TD>Dragon Length:</TD><TD>
<INPUT TYPE ="text" id="winglength" SIZE=15</TD></TR>
</TABLE>
</form>
<!-- ID of this element is called "trigger" and will be used for clicking -->
<div id="trigger">Click me to calculate the Wingspan and Height!</div>
<!-- This div tag is called "wingspan" -->
<div id="wingspan">Wingspan is: </div>
<!-- Can you write the HTML code for "height" here? -->
<script>
// Everything in here will run when your page is loaded
$(document).ready(function() {
// When you click on the DIV tag called "trigger", you run this cod below.
$("#trigger").click(function() {
// "append" the wing length to the HTML tag above: the # refers to id called winglength
$("#wingspan").append($("#winglength").val());
// How you calculate the "height" is left as an exercise for the original poaster!
});
});
</script>
</body>
</html>
With no plugins or libraries, here is your example working...
Take a look at this example: http://jsfiddle.net/BtC4K/
Javascript:
function wings(){
var lenght = document.getElementsByName("length")[0];
var wingspan = document.getElementsByName("wingspan")[0];
var height = document.getElementsByName("height")[0];
wingspan.value = (lenght.value * 0.75) * 2;
height.value = lenght.value * 0.5;
}
HTML:
<table>
<tr>
<td>Dragon Length:</td>
<td><input type="text" name="length" SIZE=15 /></td>
</tr>
<tr>
<td>Dragon Wingspan:</td>
<td><input type="text" name="wingspan" SIZE=15 readonly /></td>
</tr>
<tr>
<td>Dragon Height:</td>
<td><input type="text" name="height" SIZE=15 readonly /></td>
</tr>
<tr>
<td><button onclick="wings()">Calculate</button></td>
</tr>
</table>
Related
my assignment is to make weight calculator but due to limitations of university I am not able to use all tags so I write code it works fine but gives me a error of please enter a valid value the two nearest valid value are ***number*** and ***number***.
I think that is because of the number attribute in input tag but I can not able to find what's wrong and how to correct it.
There is one more error if I only calculate one conversion output flash on screen and vanished if I get output in all fields then answer is shown.
<html>
<head>
<title>Weight Convertor Calculator</title>
<script>
var z;
var x;
function converter() {
if (document.weight.kg.value >= 1) {
x = document.weight.kg.value;
document.getElementById("g").value = x * 1000;
document.getElementById("p").value = x * 2.2046;
document.getElementById("m").value = x * 1000000;
document.getElementById("ut").value = x * 0.0011023;
z = 35.274 * x;
document.getElementById("o").value = z;
} else {
window.alert("please enter any number greater than 0");
}
}
</script>
</head>
<body bgcolor="#b3f0ff">
<h1 align="center" style="color:#ff0066;"> Weight Calculator</h1>
<br>
<br>
<form name="weight" method="post">
<table align="center" style="color:#ff0066;">
<tr>
<td><b>Enter your weight in Kg:</b></td>
<td><input type="number" id="kg" name="kilogram" placeholder="enter_any_number"></td>
</tr>
<tr>
<td align="right"><input type="submit" value="Convert" onClick="converter(kg.value)"></td>
<td><input type="reset"></td>
</tr>
<tr>
<td align="right"><b>weight in Grams=</b></td>
<td><input type="number" id="g" name="gram"></td>
</tr>
<tr>
<td align="right"><b>weight in Pounds=</b></td>
<td><input type="text" id="p" name="pound"></td>
</tr>
<tr>
<td align="right"><b>weight in MilliGrams=</b></td>
<td><input type="number" id="m" name="milligram"></td>
</tr>
<tr>
<td align="right"><b>weight in US Ton=</b></td>
<td><input type="text" id="ut" name="uton"></td>
</tr>
<tr>
<td align="right"><b>weight in Ounces=</b></td>
<td><input type="number" id="o" name="ounce"></td>
</tr>
</table>
</form><br>
<p align="center" style="color:#ff0066;"><b>NOTE: Enter only numerical
value which is greater than 0</b></p>
</body>
</html>
Try adding the attribute step="any" to your input. That helped me.
No need to make input type 'text', just add one attribute step="0.01" with type="number" to accept decimal values.
In number inputs fragments are not allowed, so you need to use an text input.
Your form will be submitted: data gone
Here you can find a demo that works, based on your code.
Changing input typ from number to text will work.
I am trying to create a small HTML document for my team to use to create fake devices for testing purposes in our program. We currently have a link to do this with but we have to manually change parts of it in the URL field before hitting enter to process it. I came up with the idea of creating this form so we can make sure that we are filling in all the elements of the URL correctly and then copy and paste the created URL into the browser. There are static parts of the address that we don't change and then there are values we update after the '=' sign. There are 4 different environments that we can use this in.
I admit it has been a while since I last worked in HTML so I've been trying to search forums and sites like W3School to find the segments of code that I think will serve the purpose I'm aiming for. The following code is where I have gotten so far but can't get it to work the way I've intended it to. If anyone can provide suggestions or feedback on what I missed or did wrong I'd appreciate it. Thank you!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Item birth generator</title>
<script>
function mySubmit() {
var addStart;
var addPart1 = "part1=";
var addPart2 = "&part2=";
var addPart3 = "&part3=";
var addPart4 = "&part4=";
var addPart5 = "&part5=";
var addPart6 = "&part6=";
var addPart7 = "&part7=";
var addPart8 = "&part8=";
var myChoice = "choice";
if (myChoice.value == "choice1")
{addStart="https://address1?";}
else if (myChoice.value == "choice2")
{addStart="https://address2?";}
else if (myChoice.value == "choice3")
{addStart="https://address3?";}
else (myChoice.value == "choice4")
{addStart="https://address4?";}
var address = addStart.concat(addPart1, "mInput1", addPart2, "mInput2", addPart3, "mInput3", addPart4, "mInput4", addPart5, "mInput5", addPart6, "mInput6", addPart7, "mInput7", addPart8, "mInput8");
document.getElementById("demo").innerHTML = address;
}
</script>
</head>
<body>
<font> <H3>Please fill in the appropriate fields and then click Generate to create a url for an item in the chosen environment.</H3></font>
<form target="_self" id="demo" name="item" method="post" onSubmit="return checkValue();">
<input type="radio" name="choice" id="ch1" value="choice1" checked> Choice 1 <input type="radio" name ="choice" id="ch2" value="choice2"> Choice 2 <input type="radio" name="choice" id="ch3" value="choice3"> Choice 3 <input type="radio" name ="choice" id="ch4" value="choice4"> Choice 4
<br><br>
<table>
<tbody>
<tr>
<td>Item Part 1</td>
<td><input type="text" name="mInput1" maxlength="13"></td>
</tr>
<tr>
<td>Item Part 2</td>
<td><input type="text" name="mInput2"></td>
</tr>
<tr>
<td>Item Part 3</td>
<td><input type="text" name="mInput3"></td>
</tr>
<tr>
<td>Item Part 4</td>
<td><input type="text" name="mInput4"></td>
<tr>
<td>Item Part 5</td>
<td><input type="text" name="mInput5"></td>
</tr>
<tr>
<td>Item Part 6</td>
<td><input type="text" name="mInput6"></td>
</tr>
<tr>
<td>Item Part 7</td>
<td><input type="text" name="mInput7"></td>
</tr>
<tr>
<td>Item Part 8</td>
<td><input type="text" name="mInput8"></td>
</tr>
<tr>
</tr>
<tr>
<td><input type="submit" value="Generate" onclick="mySubmit()"></td>
</tr>
</tbody>
</table>
<br>
<input type="text" size="250" name="address" value=''>
</form>
</body>
</html>
There is an error with this line:
var s.address = s.addStart.concat(addPart1, mInput1, addPart2, mInput2, addPart3, mInput3, addPart4, mInput4, addPart5, mInput5, addPart6, mInput6, addPart7, mInput7, addPart8, mInput8);
Verify what you are using is valid by testing the variables (output with a console.log or an alert) and check the command syntax. :)
I'm trying to make a table, in which user can fill some cells with values and then click submit to show the calculation result. I have jquery-2.0.3.min.js and script.js in my directory. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Inteligence Decision Support System</title>
<script src='localhost/idss/jquery-2.0.3.min.js'></script>
<script type="text/javascript" src='localhost/idss/script.js' charset="utf-8"></script>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>
<tr>
<td>someName</td>
<td><input name="Cost" type="text" value="0"></td>
<td><input name="a20" type="text" value=""></td>
<td><input name="a25" type="text" value=""></td>
</tr>
</table>
<input type="button" onclick="Zcount()" value="Submit" >
</body>
</html>
and here is the script.js file
<script type="text/javascript">
function Zcount(){
var cost, a20, a25;
a20 = document.getElementById("a20").value;
a25 = document.getElementById("a25").value;
cost = (2*parseInt(a20))+(3*parseInt(a25));
document.getElementById("Cost").value=cost;
}
</script>
but when I filled a20 and a25 and click the submit button, nothing happened. The result stayed zero. Where did I go wrong?
You have to check if the external javascripts are actually loaded. You can do this by right-clicking in he browser ind click "inspect element" in chrome or firefox. If you click "console" in these inspectors you can check if they are loaded. If they aren't, you have to adjust your src attribute in the HTML script element.
Also, you have to use the id attribute on the input's because you're using getElementById, and officially inputs have to be surrounded by a form element. So, in the body tag, your HTML will be like this:
<form id="form" action="#" method="post">
<table border="1">
<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>
<tr>
<td>someName</td>
<td><input name="Cost" id="Cost" type="text" value="0"></td>
<td><input name="a20" id="a20" type="text" value=""></td>
<td><input name="a25" id="a25" type="text" value=""></td>
</tr>
</table>
<input type="submit" value="Submit" >
</form>
Inside the script.js, you don't have to use the HTML script tags.
Why are u including jquery if you don't use it?
But because you do, you can use this script:
$('form').submit(function(){
var cost, a20, a25;
a20 = $("#a20").val();
a25 = $("#a25").val();
cost = (2*parseInt(a20))+(3*parseInt(a25));
$("#Cost").val(cost);
return false;
});
Working jsFiddle: http://jsfiddle.net/jwvanveelen/ch2wR/
I have a jquery / javascript function that totals the number of cubes in my order. this works 100% and is below.
function calculateTotalVolume() {
var grandTotalCubes = 0;
$("table.authors-list").find('input[name^="cubicvolume"]').each(function () {
grandTotalCubes += +$(this).val();
});
$("#grandtotalcubes").text(grandTotalCubes.toFixed(2));
}
as mentioned the above works great. I need a second function to total the same field but only if an checkbox named treated is checked. each row has the checkbox named treated but as the table is dynamically generated, a counter is appended to the name each time hence my use of name^="treated"
I am after something like below but this doesn't work:
function calculateTotalTreatedVolume() {
var grandTotaltreatedCubes = 0;
$("table.authors-list").find('input[name^="cubicvolume"]').each(function () {
if($("table.authors-list").find('checkbox[name^="treated"]').checked){
alert('10');
grandTotaltreatedCubes += +$(this).val();
}
});
$("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));
}
help appreciated as always.
UPDATE
Rendered HTML output [1 dynamic row added]: (Still in development so very rough, please excuse it)
<table class="authors-list" border=1>
<thead>
<tr>
<td></td><td>Product</td><td>Price/Cube</td><td>Qty</td><td>line total cost</td><td>Discount</td><td>Cubes per bundle</td><td>pcs per bundle</td><td>cubic vol</td><td>Bundles</td><td><input type="checkbox" class="checkall"> Treated</td>
</tr>
</thead>
<tbody>
<tr>
<td><a class="deleteRow"> <img src="http://devryan.tekwani.co.za/application/assets/images/delete2.png" /></a></td>
<td><input type="text" id="product" name="product" />
<input type="hidden" id="price" name="price" readonly="readonly"/></td>
<td><input type="text" id="adjustedprice" name="adjustedprice" /></td>
<td><input type="text" id="qty" name="qty" /></td>
<td><input type="text" id="linetotal" name="linetotal" readonly="readonly"/></td>
<td><input type="text" id="discount" name="discount" /></td>
<td>
<input type="text" id="cubesperbundle" name="cubesperbundle" >
</td>
<td>
<input type="text" id="pcsperbundle" name="pcsperbundle" >
</td>
<td>
<input type="text" id="cubicvolume" name="cubicvolume" size='5' disabled>
</td>
<td><input type="text" id="totalbundles" name="totalbundles" size='5' disabled ></td>
<td valign="top" ><input type="checkbox" id="treated" name="treated" ></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="15"><input type="button" id="addrow" value="Add Product" /></td>
</tr>
<tr>
<td colspan="3">Grand Total: R<span id="grandtotal"></span></td>
<td colspan="2">Ave Discount: <span id="avediscount"></span>%</td>
<td colspan="1">Total Cubes: <span id="grandtotalcubes"></span></td>
<td colspan="15">Treated Cubes: <span id="grandtotaltreatedcubes"></span></td>
</tr>
<tr>
<td colspan="15"><textarea rows="1" cols="50" placeholder="Specific Comments"></textarea><textarea rows="1" cols="20" placeholder="Customer Reference"></textarea>
</td>
</tr>
</tfoot>
</table>
First go the parent tr and then using find to find the checkbox in current row and also use checked with DOM object not jQuery object, you can use indexer to convert jQuery object to DOM object.
Change
if($("table.authors-list").find('checkbox[name^="treated"]').checked){
To
if($(this).closest('tr').find('checkbox[name^="treated"]')[0].checked){
checked is a property of the actual DOM element, and what you have is a jQuery element. You need to change this:
$("table.authors-list").find('checkbox[name^="treated"]').checked
To this:
$("table.authors-list").find('checkbox[name^="treated"]')[0].checked
-^- // get DOM element
Or more jQuery-ish:
$("table.authors-list").find('checkbox[name^="treated"]').is(':checked')
You can iterate through the "checked" checkboxes using $("table.authors-list").find('checkbox[name^="treated"]:checked') and use the value of the input nearest to it (assumed to be in the same row).
Assuming your table has many rows each having a checkbox and an input, you can use:
function calculateTotalTreatedVolume() {
var grandTotaltreatedCubes = 0;
// iterate through the "checked" checkboxes
$("table.authors-list").find('input[type="checkbox"][name^="treated"]:checked').each(function () {
// use the value of the input in the same row
grandTotaltreatedCubes += +$(this).closest('tr').find('input[name^="cubicvolume"]').val();
});
$("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));
}
Try this:
var grandTotaltreatedCubes = 0;
// Cache the table object here for faster processing of your code..
var $table = $("table.authors-list");
$table.find('input[name^="cubicvolume"]').each(function () {
// Check if checkbox is checked or not here using is(':checked')
if ($table.find('checkbox[name^="treated"]').is(':checked')) {
grandTotaltreatedCubes += $(this).val();
}
});
$("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));
Change the following line
if($("table.authors-list").find('input[name^="treated"]').checked){
To this
if($("table.authors-list").find('input[name^="treated"]').is(':checked')){
I'm using this codes below but seems my setValue() method is not working. can someone point what is wrong with this codes?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script language="javascript">
function rand ( n )
{
document.getElementById("orderRefId").value = ( Math.floor ( Math.random ( ) * n + 1 ) );
}
function setValue(amount1)
{
myValue = amount1;
document.getElementById("amount").value = myValue;
}
</script>
</head>
<body onLoad="rand( 2000000 )">
<!--
Note: https://www.pesopay.com/b2c2/eng/payment/payForm.jsp for live payment URL
https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp for test payment URL
-->
<form method="POST" name="frmPayment" action="https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp">
<table>
<tbody>
<tr>
<td>Order Reference No. (your reference number for every transaction that has transpired):</td>
<td><input type="text" id="orderRefId" name="orderRef" value="Test-001"/></td>
</tr>
<tr>
<td>Amount:</td>
<td><input type="text" onLoad = "setValue()" name="amount" value=""/></td>
</tr>
<tr>
<td>Currency Code - "608" for Philippine Peso, "840" for US Dollar:</td>
<td><input type="text" name="currCode" value="608"/></td>
</tr>
<tr>
<td>Language:</td>
<td><input type="text" name="lang" value="E"/></td>
</tr>
<tr>
<td>Merchant ID (the merchant identification number that was issued to you - merchant IDs between test account and live account are not the same):</td>
<td><input type="text" name="merchantId" value="18056869"/></td>
</tr>
<tr>
<td>Redirect to a URL upon failed transaction:</td>
<td><input type="text" name="failUrl" value="http://www.yahoo.com?flag=failed"/></td>
</tr>
<tr>
<td>Redirect to a URL upon successful transaction:</td>
<td><input type="text" name="successUrl" value="http://www.google.com?flag=success"/></td>
</tr>
<tr>
<td>Redirect to a URL upon canceled transaction:</td>
<td><input type="text" name="cancelUrl" value="http://www.altavista.com?flag=cancel"/></td>
</tr>
<tr>
<td>Type of payment (normal sales or authorized i.e. hold payment):</td>
<td><input type="text" name="payType" value="N"/></td>
</tr>
<tr>
<td>Payment Method - Change to "ALL" for all the activated payment methods in the account, Change to "BancNet" for BancNet debit card payments only, Change to "GCASH" for GCash mobile payments only, Change to "CC" for credit card payments only:</td>
<td><input type="text" name="payMethod" value="ALL"/></td>
</tr>
<tr>
<td>Remark:</td>
<td><input type="text" name="remark" value="Asiapay Test"/></td>
</tr>
<!--<tr>
<td>Redirect:</td>
<td><input type="text" name="redirect" value="1"/></td>
</tr>-->
<tr>
<td></td>
</tr>
<input type="submit" value="Submit">
</tbody>
</table>
</form>
</body>
</html>
NOTE: the variable "amount1" is came from my android. and its not causing the problem because I'm using it in other codes.
I will be very thankful for any thoughts.
1.You don't have no DOMInputElement with id "amount". You need to change the html like this:
<input type="text" onLoad = "setValue()" name="amount" id="amount" value=""/>
Or the js like this:
function setValue(amount1)
{
myValue = amount1;
document.frmPayment.amount.value = myValue;
}
2.The second issue is that you cannot attach the onLoad event to input element. What you can do, is put the <script/> with setValue() call or change your <body> tag to:
<body onLoad="rand(200000);setValue();">
JavaScript is in the default settings disabled in the WebView. You need to activate it first.
YourWebView.getSettings().setJavaScriptEnabled(true);
You also need to correct your JavaScript. You call the function document.getElementById(...), but your input element has no Id but a name. So you need to call document.getElementsByName(...)[0].
function text() {
var dt = new Date();
dt.format("dd-mmm-yyyy");
var newdt = dt.getFullYear();
var tt = document.getElementById("ctl00_ContentPlaceHolder1_txtPolicyStartDate").value;
var dt2 = new Date.parseLocale(tt, 'dd-MMM-yyyy');
dt2.setFullYear(dt2.getFullYear() + 1);
dt2.setDate(dt2.getDate() - 1);
document.getElementById("ctl00_ContentPlaceHolder1_txtPolicyExpiryDate").value = dt2.format("dd-MMM-yyyy");
return dt2;
}