django: access elements from another template

django: access elements from another template - javascript

project/
|----app1/
|----templates/
app1/
|----home.html
|----exchange.html
I need to perform calculations on the home.html using javascript, but some data is stored in the table inside exchange.html, and I don't want to put them together under one page. how would I go about that. I am very new to python and django.
{% include "exchange.html" %}
I tried this on home.html but it loads all the content which i don't need. can anybody help please.
<table class="table table-hover">
<caption>Exchange rate</caption>
<thead>
<tr>
<th></th>
<th>GBP</th>
<th>EUR</th>
<th>USD</th>
<th>CAD</th>
<th>AUD</th>
</tr>
</thead>
<tbody>
<tr>
<td>GBP</td>
<td><input type="number" value="1" readonly></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
</tr>
<tr>
<td>EUR</td>
<td><input class="rate" type="number"></td>
<td><input type="number" value="1" readonly></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
</tr>
<td>USD</td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input type="number" value="1" readonly></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<tr>
<td>CAD</td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input type="number" value="1" readonly></td>
<td><input class="rate" type="number"></td>
</tr>
<tr>
<td>AUD</td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input class="rate" type="number"></td>
<td><input type="number" value="1" readonly></td>
</tr>
</tbody>
</table>
I have this table in exchage.html where users can input the exchange rate, and I need to to do some calculation on home.html using the relevant rate.

You want to create a small piece of html that contains only the information that you need, and put it in another file, calculations.html for example. You don't put all of the code from exchange.html in there, only the duplicated part.
Then use the include tag to add that HTML from both the exchange.html and home.html.
{% include calculations.html %}

Related

Changing the value of multiple inputs [duplicate]

This question already has answers here:
jQuery change input text value
(6 answers)
Closed 3 years ago.
Sorry for the simple question. I have a form with multiple input fields.
<table>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
</table>
I want to change the value of all class=amount inputs to 10. I've tried the following simple script but it doesn't seem to be working?
$(".amount").each(function(){
this.value = '10';
})

If you really just want to change the value of all .amount, no need to iterate them.
$(".amount").val(10)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
</table>

Change your jQuery code to the following:
$(".amount").val(100);

$('.amount').val(10);
OR
$('.amount').each(function(index,element) {
element.value = 10;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
</table>

How to search by filter in a table with rowspan

I need to search all my table and display the corresponding line.
I can not display the result of the search correctly when the search is on the first column, this column contains a rowspan. Instead of displaying the 2 or 3 corresponding lines, it's just the first one displayed
Input search
<div>
<input id="searchInput" type="text" placeholder="Search.."
</div>
a table
<table border="1" id="mytable">
<thead>
<tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
<th>Item4</th>
<th>Item5</th>
<th>Item6</th>
<th>Item7</th>
<th>Item8</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td rowspan='1'>D20180910</td>
<td>10910</td>
<td>W1</td>
<td><input type="text" value="2018-09-11 07:36:32" id="iddb_164" ></td>
<td><input type="text" value="2018-09-11 18:47:00" id="iddb_320" ></td>
<td><input type="text" value="2018-09-11 20:28:54" id="iddb_166" ></td>
<td><input type="text" value="2018-09-13 11:40:00" id="iddb_318" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td rowspan='2'>D20180905</td>
<td>10905</td><td>T2</td>
<td><input type="text" value="2018-09-06 08:14:52" id="iddb_147" ></td>
<td><input type="text" value="2018-09-06 12:00:00" id="iddb_324" ></td>
<td><input type="text" value="2018-09-06 12:42:04" id="iddb_152" ></td>
<td><input type="text" value="" id="iddb_" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>10905</td>
<td>W1</td>
<td><input type="text" value="2018-09-06 08:14:48" id="iddb_146" ></td>
<td><input type="text" value="2018-09-06 11:59:00" id="iddb_325" ></td>
<td><input type="text" value="2018-09-06 12:41:58" id="iddb_150" ></td>
<td><input type="text" value="2018-09-10 08:21:00" id="iddb_321" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td rowspan='3'>D20180905</td>
<td>20105</td><td>T2</td>
<td><input type="text" value="2018-09-06 08:14:52" id="iddb_112" ></td>
<td><input type="text" value="2018-09-01 12:12:00" id="iddb_753" ></td>
<td><input type="text" value="2018-10-06 12:50:04" id="iddb_725" ></td>
<td><input type="text" value="" id="iddb_" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>20105</td>
<td>w1</td>
<td><input type="text" value="" id="iddb_146" ></td>
<td><input type="text" value="2018-07-06 10:00:00" id="iddb_412" ></td>
<td><input type="text" value="2018--07 13:21:58" id="iddb_356" ></td>
<td><input type="text" value="2018-07-10 09:51:00" id="iddb_741" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>20105</td>
<td>F4</td>
<td><input type="text" value="2018-07-06 10:00:00" id="iddb_174" ></td>
<td><input type="text" value="" id="iddb_925" ></td>
<td><input type="text" value="" id="iddb_825" ></td>
<td><input type="text" value="2018-08-15 09:51:00" id="iddb_124" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
</tbody>
</table>
A javascript code
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#mytable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});

user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working

/* user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working. */
<script>
function max(){ /* this is the function to check the input feilds and if find mistake alert the message in to an alert box */
_aa=document.getElementById("s1").value
if(_aa.length>10)
xx="name should be less then or equal to 10 characters"
else xx=""
_bb=document.getElementById("s2").value
if(_bb.length>10)
yy="last name should be less then or equal to 10 characters"
else yy=""
_cc=document.getElementById("s3").value
if(_cc.length<6)
zz="street adress should be greater then or equal to 6 characters"
else zz=""
_dd=document.getElementById("s4").value
if(isNaN(_dd)){jj="fill"}
else if(_dd.length!=5 || _dd.length!=0){jj="fill"} \\this does'nt work
else{jj=""}
alert([xx,yy,zz,jj]);
}
</script>
<html>
<head>
<title>Form</title>
</head>
<body>
<form >
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM <hr/></td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text"id="s1"/ ></td>
<td><p id="a1"></p></td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text"id="s2" / ></td>
<td><p id="a2"></p></td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text"id="s3" maxlength="" / ></td>
<td><p id="a3"></p></td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number"id="s5" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number"id="s6" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio"id="s7"value="6.75" name="bt" onclick="calculate(this.value)"/ >UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s8" value="8.55" name="bt" onclick="calculate(this.value)" / >UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s9"value="10.00" name="bt" onclick="calculate(this.value)" / >FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number"id="s10" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number"id="s11" min="" max="" / ></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number"id="s12" min="" max="" / ></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION <hr/></td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio"id="s13"value="" name="bn" / >American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s14" value="" name="bn" / >Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s15"value="" name="bn" / >Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s16"value="" name="bn" / >MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio"id="s17"value="" name="bn" / >Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number"id="s18" min="" max="" / ></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()" >place</button></td>
<td><input type="submit"id="s21" value="Cancel" / ></td>
</tr>
</table>
</body>
</html>

variable declaration was wrong
Declare all your element value in function start
And declare the all _aa with variable like var _aa
Don't forget to add {} in if else condition
Why is not working?
Because you are declare the _dd in if (_cc.length < 6) in else condition ._dd always null until if (_cc.length < 6) else statement execute
function max() {
var _aa = document.getElementById("s1").value
var _bb = document.getElementById("s2").value
var _cc = document.getElementById("s3").value
var _dd = document.getElementById("s4").value
if (_aa.length > 10) {
var xx = "name should be less then or equal to 10 characters"
} else {
xx = ""
}
if (_bb.length > 10) {
var yy = "last name should be less then or equal to 10 characters"
} else {
yy = "";
}
if (_cc.length < 6) {
var zz = "street adress should be greater then or equal to 6 characters"
} else {
zz = ""
}
if (isNaN(_dd)) {
var jj = "fill"
} else if (_dd.length != 5 || _dd.length != 0) {
jj = "fill length"
} else {
jj = ""
}
console.log([xx, yy, zz, jj]);
}
<form>
<table>
<tr>
<td colspan="2" align="middle">CHECKOUT FORM
<hr/>
</td>
</tr>
<tr>
<td><strong>First name:</strong></td>
<td><input type="text" id="s1" /></td>
<td>
<p id="a1"></p>
</td>
</tr>
<tr>
<td><strong>Last name:</strong></td>
<td><input type="text" id="s2" /></td>
<td>
<p id="a2"></p>
</td>
</tr>
<tr>
<td><strong>Street Address:</strong></td>
<td><input type="text" id="s3" maxlength="" /></td>
<td>
<p id="a3"></p>
</td>
</tr>
<tr>
<td><strong>State:</strong></td>
<td><select><option>selet state</option></select></td>
</tr>
<tr>
<td><strong>Zip Code:</strong></td>
<td><input type="text" id="s4"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="number" id="s5" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">ORDER INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Order Subtotal:</strong></td>
<td><input type="number" id="s6" min="" max="" /></td>
</tr>
<tr>
<td><strong>Shipping Option:</strong></td>
<td><input type="radio" id="s7" value="6.75" name="bt" onclick="calculate(this.value)" />UPPS6.75</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s8" value="8.55" name="bt" onclick="calculate(this.value)" />UPS8.55</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s9" value="10.00" name="bt" onclick="calculate(this.value)" />FEDERAL EXPRESS10.00</td>
</tr>
<tr>
<td><strong>Shipping cost:</strong></td>
<td><input type="number" id="s10" min="" max="" /></td>
</tr>
<tr>
<td><strong>Tax(5%):</strong></td>
<td><input type="number" id="s11" min="" max="" /></td>
</tr>
<tr>
<td><strong>TOTAL:</strong></td>
<td><input type="number" id="s12" min="" max="" /></td>
</tr>
</table>
<table>
<tr>
<td colspan="2" align="middle">PAYMENT INFORMATION
<hr/>
</td>
</tr>
<tr>
<td><strong>Credit Card:</strong></td>
<td><input type="radio" id="s13" value="" name="bn" />American Express</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s14" value="" name="bn" />Diners Club</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s15" value="" name="bn" />Discover</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s16" value="" name="bn" />MasterCard</td>
</tr>
<tr>
<td></td>
<td><input type="radio" id="s17" value="" name="bn" />Visa</td>
</tr>
<tr>
<td><strong>Card Number:</strong></td>
<td><input type="number" id="s18" min="" max="" /></td>
</tr>
<tr>
<td><strong>Expiration:</strong></td>
<td colspan="2"><select id="s19"><option>01</option></select>/
<select><option>2011</option></select>
</td>
</tr>
<tr>
<td><button type="button" onclick="max()">place</button></td>
<td><input type="submit" id="s21" value="Cancel" /></td>
</tr>
</table>

Remove row when button is clicked

I am trying to do this using HtmlService in a Google App Script. I have researched it and I cannot figure out why the below doesn't work. https://jsfiddle.net/pfue7b71/
Script
function removeRow() {
// alert("run");
$(this).closest('tr').remove();
};
Html
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow()" value="X"></td>
</tr>
</table>

It's because of the context of the function. The immediate code that runs on the onClick attribute, works using the object context, so it has the right reference to this as the current object, but the call to removeRow is made on Window context, so the reference to this is Window, and not the object. You could solve that with your current code doing this:
function removeRow(object){
$(object).closest('tr').remove();
};
And changing the calls to:
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
</table>
Here you go: https://jsfiddle.net/pfue7b71/2/
Also, for future reference, you should try using console.log instead of alert, and use it to log important things like, for example, $(this)

You need to make sure that this is referencing the DOM element, not the function.
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="button" onClick="removeRow(this)" value="X"></td>
</tr>
</table>
You also need to rename the function to removeRow, as you're calling it in the HTML (was incorrect in fiddle).
function removeRow(e) {
$(e).closest('tr').remove();
};
https://jsfiddle.net/pfue7b71/3/

Validation errors with form

I am doing an assignment for school and it is a restaurant website. I am working on the "order online" page. I must include a table in my website so I put it in my form with all of my menu items and their cost and the total. The problem I am having is: I have each menu item wrapped in a form element in order to make my Javascript work but when I try to validate it, I get errors because my fieldset is outside of a form element and if I move it around I go from 3 errors to 150 and I just don't really understand why. Also, this is causing a problem with my reset button because the reset button is in a different form element then each menu item, and finally I can't get my grand total at the bottom working.
<!DOCTYPE html>
<html>
<head>
<title>Lefebvre-Oliver Final Assignment</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="Final2.css" media="screen">
</head>
<body>
<script type="text/javascript">
function multiply(element) {
var row = element.parentNode.parentNode;
row.querySelectorAll('input[name=TOTAL]')[0].value = element.value * row.querySelectorAll('input[name=PRICE]')[0].value;
}
</script>
<form id="contact-form" action="script.php" method="post">
<input type="hidden" name="redirect" value="file:///D:/Final%20Project/index.html"/>
<h1>Order Online</h1>
<fieldset>
<legend>Basic Information</legend>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value=""/>
</li>
<li>
<label for="address">Address:</label>
<input type="text" name="address" id="address" value=""/>
</li>
<li>
<label for="pwd">City</label>
<input type="text" name="city" id="city" value=""/>
</li>
</ul>
<div>Would you like the same order as last time?</div>
<label for="yes">Yes</label>
<input type="radio" name="yes" id="yes" value="yes" checked="checked">
<label for="no">No</label>
<input type="radio" name="yes" id="no" value="no"/>
<div>Special Instructions:</div>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
</fieldset>
<fieldset>
<legend>Order</legend>
<table id="OrderTable" style="width:100%">
<tr>
<th>Food Item</th>
<th>Quantity</th>
<th>Unit Price in ($)</th>
<th>Total Price in ($)</th>
</tr>
<tr>
<th>Appetizers</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Spiedini di Albicocca al Prosciutto Crudo</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="9" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Tortino di Gorgonzola</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Soup and Salads</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Zuppa di Giorno</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="5" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Minestrone Piemontese</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="5" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Zuppa de Pesce</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Insalata Mista</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Insalata Fagioli</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Pizza</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Margherita</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="10" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Sicilian</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Chicken Florentine</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Pasta</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Bucatini all'Amatriciana</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="16" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Rigatoni Alla Siciliana</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Paglia e Fieno</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="14" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Orecchiette con Rapini</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="14" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Pappardelle con Sugo di Coniglio</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="15" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Dessert</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Chocolate Zabaglione Cake</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Zuccotto</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Tira Misu</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Beverages</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Sparkling Water</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="2" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Coke, Iced Tea, Root Beer, Cream Soda</td>
<td><input name="QTY"></td>
<td><input name="PRICE" value="2" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Coffee and Brewed Decaf</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="3" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Cappuccino or Americano</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="3" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Total Cost:</td>
<td></td>
<td></td>
<td><label>Total amount</label>
<input disabled></td>
</tr>
</table>
<input type="submit" id="submit" value="Submit"/>
<input type="reset" id="reset" value="Reset"/>
</fieldset>
</form>
</body>
</html>

Use a single form element around everything and you can still access the correct inputs, relative to the row.
For example, your function could look like:
function multiply(element) {
var row = element.parentNode.parentNode;
row.querySelectorAll('input[name=TOTAL]')[0].value = element.value * row.querySelectorAll('input[name=PRICE]')[0].value;
}
First it gets the row that contains the three inputs, then from there it finds the TOTAL and PRICE inputs by name using querySelectorAll.
Note: querySelectorAll isn't supported by IE7 or lower but I doubt that will matter for an assignment.

Develop Reference

JavaScript is the programming language of the Web.

django: access elements from another template - javascript

Related

Changing the value of multiple inputs [duplicate]

How to search by filter in a table with rowspan

user have to either not input zip code and it should be of length 5(numbers only) but in my code else if statement line is not working

Remove row when button is clicked

Validation errors with form

Categories

Resources