Validating a users input and adding a value to it - javascript

I am trying to create a html page with JavaScript that would wait for a user to put in a certain set of letters ("A", "B", and "C".)
If a user types any of these letters into the text input area, they would have the following subtotal by letter:
"A" ($7.50)
"B" ($8)
"C" ($10)
My HTML code below has select input attributes with id's referred to as "badge"
I would like the code to when a certain character (referred above) is entered into the text fields, it calculates the amount for the select inputs and prints them in the placeholder within this element (- $ <input type="text" name="price" placeholder="0.00" readonly).
Any help would be greatly appreciated. Let me know if you need any more information. Thanks =)
Here's the question if it helps:
Based on the badge options chosen, calculations are needed to calculate the total cost of the order:
The amount for each badge option should be calculated and displayed
<tr>
<th>1</th>
<td><input type="text" id="bfname1" name="firstname1"></td>
<td><input type="text" id="bsname1" name="surname1"></td>
<td><input type="text" id="borank1" name="officerrank1"></td>
<td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
</tr>
<tr>
<th>2</th>
<td><input type="text" id="bfname2" name="firstname2"></td>
<td><input type="text" id="bsname2" name="surname2"></td>
<td><input type="text" id="borank2" name="officerrank2"></td>
<td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
</tr>
<tr>
<th>3</th>
<td><input type="text" id="bfname3" name="firstname3"></td>
<td><input type="text" id="bsname3" name="surname3"></td>
<td><input type="text" id="borank3" name="officerrank3"></td>
<td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
</tr>
<tr>
<th>4</th>
<td><input type="text" id="bfname4" name="firstname4"></td>
<td><input type="text" id="bsname4" name="surname4"></td>
<td><input type="text" id="borank4" name="officerrank4"></td>
<td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
</tr>
<tr>
<th>5</th>
<td><input type="text" id="bfname5" name="firstname5"></td>
<td><input type="text" id="bsname5" name="surname5"></td>
<td><input type="text" id="borank5" name="officerrank5"></td>
<td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
Here is my javascript:
function updatePrice (element) {
var price = price.value;
document.getElementById('price').value = price;
}


You have multiple error, the first one is ID must be unique, the second one you try to use price.value; but price doesn't exist you need to use element.value === selected value from select, and instead of use ID you can use nextElementSibling for input like:
function updatePrice(element) {
var price = element.value;
element.nextElementSibling.value = price;
}
<table>
<tr>
<th>1</th>
<td><input type="text" id="bfname1" name="firstname1"></td>
<td><input type="text" id="bsname1" name="surname1"></td>
<td><input type="text" id="borank1" name="officerrank1"></td>
<td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly>
</td>
</tr>
<tr>
<th>2</th>
<td><input type="text" id="bfname2" name="firstname2"></td>
<td><input type="text" id="bsname2" name="surname2"></td>
<td><input type="text" id="borank2" name="officerrank2"></td>
<td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly>
</td>
</tr>
<tr>
<th>3</th>
<td><input type="text" id="bfname3" name="firstname3"></td>
<td><input type="text" id="bsname3" name="surname3"></td>
<td><input type="text" id="borank3" name="officerrank3"></td>
<td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly>
</td>
</tr>
<tr>
<th>4</th>
<td><input type="text" id="bfname4" name="firstname4"></td>
<td><input type="text" id="bsname4" name="surname4"></td>
<td><input type="text" id="borank4" name="officerrank4"></td>
<td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price">
</td>
</tr>
<tr>
<th>5</th>
<td><input type="text" id="bfname5" name="firstname5"></td>
<td><input type="text" id="bsname5" name="surname5"></td>
<td><input type="text" id="borank5" name="officerrank5"></td>
<td class="form-element"><label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" onchange="updatePrice(this)">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly>
</td>
</tr>
</table>
Reference:
ID
Element.nextElementSibling
Although we should keep the focus on one problem at a time I give you a little help for the last part when the letter changes as well as changing the value you should add / change the dataset so that you can then select each dataset and calculate the total price.
HTMLElement.dataset


As Simone said in their answer, you need IDs to be unique,
So you could use the code like below
<table>
<tr>
<th>1</th>
<td>
<input type="text" id="bfname1" name="firstname1">
</td>
<td>
<input type="text" id="bsname1" name="surname1">
</td>
<td>
<input type="text" id="borank1" name="officerrank1">
</td>
<td class="form-element">
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge1">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price1">
</td>
</tr>
<tr>
<th>2</th>
<td>
<input type="text" id="bfname2" name="firstname2">
</td>
<td>
<input type="text" id="bsname2" name="surname2">
</td>
<td>
<input type="text" id="borank2" name="officerrank2">
</td>
<td class="form-element">
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge2">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price2">
</td>
</tr>
<tr>
<th>3</th>
<td>
<input type="text" id="bfname3" name="firstname3">
</td>
<td>
<input type="text" id="bsname3" name="surname3">
</td>
<td>
<input type="text" id="borank3" name="officerrank3">
</td>
<td class="form-element">
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge3">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price3">
</td>
</tr>
<tr>
<th>4</th>
<td>
<input type="text" id="bfname4" name="firstname4">
</td>
<td>
<input type="text" id="bsname4" name="surname4">
</td>
<td>
<input type="text" id="borank4" name="officerrank4">
</td>
<td class="form-element">
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge4">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price4">
</td>
</tr>
<tr>
<th>5</th>
<td>
<input type="text" id="bfname5" name="firstname5">
</td>
<td>
<input type="text" id="bsname5" name="surname5">
</td>
<td>
<input type="text" id="borank5" name="officerrank5">
</td>
<td class="form-element">
<label for="badge3">Choose a Badge Type (A, B, or C)</label>
<select name="badge" id="badge5">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly id="price5">
</td>
</table>
<script>
function updatePrice(priceId) {
return e => document.getElementById(priceId).value = e.target.value;
}
Object.entries({
"badge1": "price1",
"badge2": "price2",
"badge3": "price3",
"badge4": "price4",
"badge5": "price5",
}).map(([badgeId, priceId]) => {
console.log(badgeId, priceId)
document.getElementById(badgeId).addEventListener('change', updatePrice(priceId))
});
</script>
I've just changed each ID to a unique ID, and added the event listener in your code instead, and change the updatePrice function a little, so it's almost the same as your original code.
But when you have all these select inputs that are essentially the same, you shouldn't really be using IDs at all, and it would be better to use classes instead of IDs like this:
<table>
<tr>
<th>1</th>
<td>
<input type="text" id="bfname1" name="firstname1">
</td>
<td>
<input type="text" id="bsname1" name="surname1">
</td>
<td>
<input type="text" id="borank1" name="officerrank1">
</td>
<td class="form-element">
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" class="badge">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly class="price">
</td>
</tr>
<tr>
<th>2</th>
<td>
<input type="text" id="bfname2" name="firstname2">
</td>
<td>
<input type="text" id="bsname2" name="surname2">
</td>
<td>
<input type="text" id="borank2" name="officerrank2">
</td>
<td class="form-element">
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" class="badge">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly class="price">
</td>
</tr>
<tr>
<th>3</th>
<td>
<input type="text" id="bfname3" name="firstname3">
</td>
<td>
<input type="text" id="bsname3" name="surname3">
</td>
<td>
<input type="text" id="borank3" name="officerrank3">
</td>
<td class="form-element">
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" class="badge">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly class="price">
</td>
</tr>
<tr>
<th>4</th>
<td>
<input type="text" id="bfname4" name="firstname4">
</td>
<td>
<input type="text" id="bsname4" name="surname4">
</td>
<td>
<input type="text" id="borank4" name="officerrank4">
</td>
<td class="form-element">
<label for="badge">Choose a Badge Type (A, B, or C)</label>
<select name="badge" class="badge">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly class="price">
</td>
</tr>
<tr>
<th>5</th>
<td>
<input type="text" id="bfname5" name="firstname5">
</td>
<td>
<input type="text" id="bsname5" name="surname5">
</td>
<td>
<input type="text" id="borank5" name="officerrank5">
</td>
<td class="form-element">
<label for="badge3">Choose a Badge Type (A, B, or C)</label>
<select name="badge" class="badge">
<option value="" selected>Select Badge</option>
<option value="7.50">A</option>
<option value="8.00">B</option>
<option value="10.00">C</option>
</select>
- $ <input type="text" name="price" placeholder="0.00" readonly class="price">
</td>
</table>
<script>
function updatePrice(event) {
event.target.nextElementSibling.value = event.target.value;
}
[...document.getElementsByClassName('badge')]
.forEach(badge => badge.addEventListener('change', updatePrice));
</script>

Related

Trying to auto-calculate in the input box but the input isn't showing

I am working on an assignment where I need to place in JavaScript into my HTML. I needed to make an auto-calculate feature that would display the answer on a grey input box which is read only. However, it just doesn't show, I needed to know if it is a problem with the coding.
Here's my JavaScript code:
function calculate_Total() {
document.querySelector('#total_1').value = parseFloat(price_1.value) * parseFloat(qty1.value);
}
const price_1 = document.querySelector('#price_1');
const qty_1 = document.querySelector('#qty_1');
price_1.addEventListener("keyup", (e) => calculate_Total());
qty_1.addEventListener("keyup", (e) => calculate_Total());
And here's the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order a book!</title>
<link rel="stylesheet" href="CSS/book-order.css">
<script src="JS/book-order.js"></script>
</head>
<body>
<form>
<h1>Book Ordering System</h1>
<table>
<thead>
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</label></th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01"/></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" onchange="calculate_Total()" readonly /></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calculate_Total()" /></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calculate_Total()" /></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()"/></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calc()" /></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calc()" /></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calc()" /></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calc()" /></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calc()" /></td>
<td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calc()" /></td>
<td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
</tbody>
<tfoot>
<td colspan="5">
<div style="text-align: right">
<button onclick="calculate();">Calculate Grand Total Price</button>
</div>
</td>
<td colspan="2">
<div style="text-align: right;">
<input type="number" name="grand_total" id="grand_total" value="0.00" readonly>
</div>
</td>
</tfoot>
</table>
</form>
<script src="book-order.js"></script>
</body>
</html>
Edit: I've changed the IDs for a bit, so this is to be ignored at the moment, but still when I type, it doesn't show according to this image.
The output in the grey input box is not showing.

As it has been said already, an element's id should be unique in a file. I'm sure there are better ways to achieve what you are trying to do. To make your code work without changing much of the code, all we need to do is to change element id's into classes and then attach event handlers to each of them.
function calculate_Total(elementIndex) {
document.querySelectorAll('.total_1')[elementIndex].value = parseFloat(price_1[elementIndex].value) * parseFloat(qty_1[elementIndex].value);
}
const price_1 = document.querySelectorAll('.price_1');
const qty_1 = document.querySelectorAll('.qty_1');
price_1.forEach((element, key) => {
element.addEventListener("keyup", e => calculate_Total(key));
});
qty_1.forEach((element, key) => {
element.addEventListener("keyup", e => calculate_Total(key));
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order a book!</title>
<link rel="stylesheet" href="CSS/book-order.css">
</head>
<body>
<form>
<h1>Book Ordering System</h1>
<table>
<thead>
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</label>
</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" class="price_1" min="0.00" value="0.00" step="0.01" /></td>
<td><input type="number" name="qty" class="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" class="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" class="price_1" min="0.00" value="0.00" step="0.01" /></td>
<td><input type="number" name="qty" class="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" class="total_1" min="0" value="0.00" step="0.01" readonly/></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" class="price_1" min="0.00" value="0.00" step="0.01" /></td>
<td><input type="number" name="qty" class="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" class="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" class="price_1" min="0.00" value="0.00" step="0.01" /></td>
<td><input type="number" name="qty" class="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" class="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="book-title" id="book-title"></td>
<td><input type="text" name="author" id="author"></td>
<td>
<select id="category">
<option disabled selected>Please choose a category...</option>
<option value="bsn">Business</option>
<option value="fic">Fiction</option>
<option value="math">Mathematics</option>
<option value="tech">Technology</option>
</select>
</td>
<td><input type="number" name="price" class="price_1" min="0.00" value="0.00" step="0.01" /></td>
<td><input type="number" name="qty" class="qty_1" min="0" value="0" /></td>
<td><input type="number" name="total" class="total_1" min="0" value="0.00" step="0.01" readonly /></td>
</tr>
</tbody>
<tfoot>
<td colspan="5">
<div style="text-align: right">
<button onclick="calculate();">Calculate Grand Total Price</button>
</div>
</td>
<td colspan="2">
<div style="text-align: right;">
<input type="number" name="grand_total" id="grand_total" value="0.00" readonly>
</div>
</td>
</tfoot>
</table>
</form>
</body>
</html>

can't display 0 in grand total input box when the amount is negative value

Question: If the calculated grand total is a negative value, set it to zero instead. If the calculated grand total is a negative value, set it to zero instead. Additionally, the
user should be alerted that an error has occurred. You may use the appropriate medium
(i.e., prompt box, paragraph text under the table, etc.) to carry out this function.
I'm trying to do this in my code but seems like it is not working right. When grand total is lesser than 0 it should display zero on the grand total input box.
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Book Ordering System</title>
<link rel="stylesheet" href="book-order.css">
</head>
<h1>Book Ordering System</h1>
<body class="background">
<script src="book-order.js"></script>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type="text"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book1_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book1_quan" placeholder="0"></td>
<td><input type="number" name="theProduct" id="book1_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book2_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book2_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book2_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="numnber" name="unit price" id="book3_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book3_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book3_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book4_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book4_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book4_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book5_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book5_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book5_total" class="total" value="0.00" disabled></td>
</tr>
<tr id="footer">
<td colspan="5">
<input
type="Submit"
id="click"
onclick="calculateTotal()"
value="Calculated Grand Total Price"
style="font-size: 18px;"
>
</td>
<td colspan="2">
<input
type="number"
name="total"
class="total"
id="grandtotal"
value="0.00"
style="width: 300px; height: 40px; font-weight: bolder; font-size: larger;"
disabled
/>
</tr>
</table>
<br/>
<input style="display:none" type="button" id="button" class="btn" value="Discount 10%" onclick="newGrandTotal()">
<br/>
<br/>
Go back to home
<br/>
</body>
</html>
This is my javascript:
function calculateTotal() {
const NumberOfBooks = 5;
for (let i = 1; i <= NumberOfBooks; ++i) {
document.getElementById("book" + i + "_price").value =
(document.getElementById("book" + i + "_price").value / 1).toFixed(2);
}
// row 1
var price1 = document.getElementById("book1_price").value;
var quan1 = document.getElementById("book1_quan").value;
var total1 = document.getElementById("book1_total");
total1.value = (price1 * quan1).toFixed(2);
// row 2
var price2 = document.getElementById("book2_price").value;
var quan2 = document.getElementById("book2_quan").value;
var total2 = document.getElementById("book2_total");
total2.value = (price2 * quan2).toFixed(2);
// row 3
var price3 = document.getElementById("book3_price").value;
var quan3 = document.getElementById("book3_quan").value;
var total3 = document.getElementById("book3_total");
total3.value = (price3 * quan3).toFixed(2);
// row 4
var price4 = document.getElementById("book4_price").value;
var quan4 = document.getElementById("book4_quan").value;
var total4 = document.getElementById("book4_total");
total4.value = (price4 * quan4).toFixed(2);
// row 5
var price5 = document.getElementById("book5_price").value;
var quan5 = document.getElementById("book5_quan").value;
var total5 = document.getElementById("book5_total");
total5.value = (price5 * quan5).toFixed(2);
// grandtotal
var grandtotal = document.getElementById("grandtotal");
fulltotal = parseFloat(total1.value) + parseFloat(total2.value) + parseFloat(total3.value) +
parseFloat(total4.value) + parseFloat(total5.value);
grandtotal.value = fulltotal.toFixed(2);
//error
if (fulltotal < 0) {
alert("An error has occurred : Please enter positive values only.");
document.getElementById("grandtotal")[0].value = 0;
}
checkGrandTotal();
}
function checkGrandTotal() {
var value = document.getElementById("grandtotal").value;
if (value > 250) {
document.getElementById("button").style.display = "block";
}
}
function newGrandTotal() {
var total = document.getElementById("grandtotal").value;
var newtotal = total - (total / 10);
alert("new grand total is :" + newtotal.toFixed(2));
}

if I am getting this right, you don't need Unit Price to be less than 0 ever.
Which is pretty easy to handle using HTML.
add the min=0 attribute on the input tags
<input type = "number" name = "unit price" id="book5_price" placeholder = "0.00" min=0>

Use the Math.max function - it will return the largest of the two (either the total if it is bigger than 0, or 0 - if the total is negative)
total = Math.max(0, total);

There were numerous little errors, like anytime you get a value from an input element it will always be text, so to add it you need to convert to a number. In the code below you'll see + right before element.value items - that little + is actually a shorthand notation to tell JS to treat that as a number. I also saw you wanted to do a loop, which was a good idea, so I show how to do that.
function calculateTotal() {
const NumberOfBooks = 5;
let sum_total = 0;
let grandtotal = document.getElementById("grandtotal");
for (let i = 1; i <= NumberOfBooks; ++i) {
let bprice = "book" + i + "_price",
bquan = "book" + i + "_quan",
btotal = "book" + i + "_total";
let item_price = +document.getElementById(bprice).value
let item_quantity = +document.getElementById(bquan).value
let total = (item_price * item_quantity).toFixed(2);
document.getElementById(btotal).value = total
sum_total += +total;
}
if (sum_total < 0) {
alert("An error has occurred : Please enter positive values only.");
}
sum_total = Math.max(0, sum_total);
grandtotal.value = sum_total.toFixed(2);
checkGrandTotal();
}
function checkGrandTotal() {
var value = +document.getElementById("grandtotal").value;
if (value > 250) {
document.getElementById("button").style.display = "block";
}
}
// not sure what this function is for
function newGrandTotal() {
var total = document.getElementById("grandtotal").value;
var newtotal = total - (total / 10);
alert("new grand total is :" + newtotal.toFixed(2));
}
<h1>Book Ordering System</h1>
<table id="head">
<tr>
<th>No.</th>
<th>Book Title</th>
<th>Author</th>
<th>Category</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr class="hover middle">
<td>1</td>
<td><input type="text"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book1_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book1_quan" placeholder="0"></td>
<td><input type="number" name="theProduct" id="book1_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>2</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book2_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book2_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book2_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>3</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="numnber" name="unit price" id="book3_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book3_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book3_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>4</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book4_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book4_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book4_total" class="total" value="0.00" disabled></td>
</tr>
<tr class="hover middle">
<td>5</td>
<td><input type="text" class="center"></td>
<td><input type="text" class="center"></td>
<td>
<select name="type">
<option value="Choose" disabled>Choose a Category...</option>
<option value="Business">Business</option>
<option value="Fiction">Fiction</option>
<option value="Mathematics">Mathematics</option>
<option value="Technology">Technology</option>
</select>
</td>
<td><input type="number" name="unit price" id="book5_price" placeholder="0.00"></td>
<td><input type="number" name="Quantity" id="book5_quan" placeholder="0"></td>
<td><input type="number" name="total" id="book5_total" class="total" value="0.00" disabled></td>
</tr>
<tr id="footer">
<td colspan="5"><input type="Submit" id="click" onclick="calculateTotal()" value="Calculated Grand Total Price" style="font-size: 18px;"></td>
<td colspan="2"><input type="number" name="total" class="total" id="grandtotal" value="0.00" style="width: 300px; height: 40px; font-weight: bolder; font-size: larger;" disabled/>
</tr>
</table>
<br/>
<input style="display:none" type="button" id="button" class="btn" value="Discount 10%" onclick="newGrandTotal()">
<br/>
<br/>
Go back to home
<br/>

How to assign a drop down selected value to an input field which is present in next td?

In a table, I have two columns and many rows. One column have drop down and other have input field of type number. When I change the value of drop down I want to assign that selected value to the input field which is present in next td. I hope I explained my problem okay.
Here is what I have tried,
$(document).ready(function() {
$('select.nameSelect').change(function() {
var id = $(this).children("option:selected").val();
$(this).closest('.tr').find('.StudentId').val(id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
</table>

Firstly, your HTML is invalid due to having multiple elements with the same id (id="StudentName").
But the reason your code isn't working is because you're doing closest('.tr') when it should be closest('tr') because it's an element, not a class.
Also, there is no need to find the selected value... just use this.value
$(document).ready(function() {
$('select.nameSelect').change(function() {
$(this).closest('tr').find('.StudentId').val(this.value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
<tr>
<td>
<select name="StudentName" id="StudentName" class="nameSelect">
<option value="1">Student1</option>
<option value="2">Student2</option>
<option value="3">Student3</option>
<option value="4">Student4</option>
</select>
</td>
<td>
<input type="number" class="StudentId" />
</td>
</tr>
</table>

How to Hide (or Show) child drop-down (dynamic html) in jquery?

Here create a dynamic table row when clicking on + button add a new row and click on - button remove row design like this,
Here subject drop-down display and also instructor drop-down display but the problem is when select subject maths instructor drop-down show and when select a science instructor drop-down hide but it's changing in all drop-down.
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
if (jQuery.inArray(topic_name, names) != '-1') {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent().find('td').hide();
} else {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent('td').find('td').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr id="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" id="CourseScheduleScheduleInstructor" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr id="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" id="CourseScheduleScheduleInstructor" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>

That happens because of duplicate identifiers, the id attribute must be unique in the same document.
That will be fixed by replacing the duplicate ones with common classes.
Then your selector could be simply :
$(this).closest('tr').find('.instructor_name');
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
var instructor_name = $(this).closest('tr').find('.instructor_name');
if ($.inArray(topic_name, names) != -1) {
instructor_name.hide();
} else {
instructor_name.show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr class="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr class="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>

Binding duplicate events by using clone()

i already duplicate my html elements by this javascript code but i cannot copy the events of the code.Will you gyups please prove me the possible solution.
<script type = "text/javascript" language = "javascript">
function func_addmore(){
$(document).ready(function() {
$("div").click(function () {
$(this).clone().insertAfter(this);
});
});
}
</script>
<body id="show" onload="func_load()">
<form method="POST" action="get_value.php" >
<table class="table table-condensed">
<tr>
<td width="1%"><span> Level of Education:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">Masters</option>
<option id="2">Bachelors</option>
<option id="3">HSC</option>
<option id="4">SSC</option>
</select>
</td>
</tr>
<tr>
<td ><span>Exam/Degee Title:</span></td>
<td ><input name="degreetitle" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<tr>
<td><span>Concentration/Major:</span></td>
<td><input name="major" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td><span>Institutions:</span></td>
<td>
<select id="institutions" name="institutions" onchange="func_ins()">
<option value="none" selected >----Select ----</option>
<option id="1">A</option>
<option id="2">Others</option>
</select>
</td>
</tr>
<tr id ="trins">
<td><span>Others</span></td>
<td><input type="text" id="others_ins" /></td>
</tr>
<tr>
<td><span>Result:</span></td>
<td>
<select id="result" name="result" onchange="func_res()">
<option value="none" selected >----Select ----</option>
<option id="1">Grade</option>
<option id="2" >Division</option>
</select>
</td>
</tr>
<tr id ="trgrade">
<td><span>Grade</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id ="trscale">
<td><span>Scale:</span>
<td><input type="text" id="others_grade" size="5" /></td>
</tr>
<tr id="trdiv" onload="func_hid()" >
<td><span>Division:</span></td>
<td>
<select id="division" name="division">
<option value="none" selected >----Select ----</option>
<option id="1">1st Division</option>
<option id="2">2nd Division</option>
</select>
</td>
</tr>
<tr>
<td width="1%"><span> Year of Passing:</span></td>
<td >
<select id="title" name="title" >
<option value="none" selected >----Select ----</option>
<option id="1">2016</option>
<option id="2">2015</option>
<option id="3">2014</option>
<option id="4">2013</option>
<option id="5">2012</option>
<option id="6">2011</option>
<option id="7">2010</option>
<option id="1">2009</option>
<option id="2">2008</option>
<option id="3">2007</option>
<option id="4">2006</option>
<option id="5">2005</option>
<option id="6">2004</option>
<option id="7">2003</option>
<option id="1">2002</option>
<option id="2">2001</option>
<option id="3">2000</option>
<option id="4">1999</option>
<option id="5">1998</option>
<option id="6">1997</option>
<option id="7">1996</option>
<option id="1">1995</option>
<option id="2">1994</option>
<option id="3">1993</option>
<option id="4">1992</option>
<option id="5">1991</option>
<option id="6">1990</option>
<option id="7">1989</option>
<option id="2">1988</option>
<option id="3">1987</option>
<option id="4">1986</option>
<option id="5">1985</option>
<option id="6">1984</option>
<option id="7">1983</option>
<option id="5">1982</option>
<option id="6">1981</option>
<option id="7">1980</option>
</select>
</td>
</tr>
<tr>
<td ><span>Duration:</span></td>
<td ><input name="duration" type="text" id="name" size="19" class=""/></td>
</tr>
<tr>
<td ><span>Achievement:</span></td>
<td ><input name="achievement" type="text" id="name" size="19" class=""/></td>
</tr>
<tr><td> <input type="submit" name="submit" value="submit" />
</td></tr>
<tr><td> <input type="button" name="addmore" value="Add more" onclick="func_addmore()" />
</td></tr>
</table>
</div>
</form>
</body>
Is there any way to do that? Thanks in advance.I hope i will find out my answer through you guys.Thank you.

The jQuery .clone() method offers the option to also clone events. Please note that by default this option is not used. In order to clone events you need to use:
$(this).clone(true).insertAfter(this);
More detail at jQuery.clone()

I want to note that the .clone() method in jQuery only clones DOM elements. In order to clone JavaScript objects, you would do:
// Shallow copy
var newObject = jQuery.extend({}, oldObject);
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);
More information can be found in the jQuery documentation.
I also want to note that the deep copy is actually much smarter than what is shown above – it's able to avoid many traps (trying to deep extend a DOM element, for example). It's used frequently in jQuery core and in plugins to great effect.

Categories