My javascript won't properly load. I am not sure why. I am new to programming/scripting.. i appreciate the help.
The idea behind this is to validate a form without using alerts, however it does not seem to execute at all.
Here's my code:
validateForm()
{
var province = document.getElementByID("province");
var postalcode = document.getElementByID("postalcode");
if(province.value == "Select a province")
{
document.write('Select your province from the list');
province.focus();
return false;
}
else
{
return true;
}
if(postalcode.length<6)
{
document.write("You must enter a valid postal code .");
}
var widget1qty=document.getElementById("widget1qty").innerHTML;
var widget2qty=document.getElementById("widget2qty").innerHTML;
var widget3qty=document.getElementById("widget3qty").innerHTML;
if(widget1qty ==0)
{
document.write("You must select some widgets.");
}
if(widget2qty < 0 )
{
document.write("You must select some widgets.");
}
if(widget3qty < 0 )
{
document.write("You must select some widgets.");
}
}
HTML:
<h2>Order Form</h2>
<form name="myForm" method="post" action="processForm.html" onsubmit="validateForm()">
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstName" id="firstName" size="30" required></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastName" id="lastName" size="30" required></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" id="address" size="30" required></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" name="city" id="city" size="30" required></td>
</tr>
<tr>
<td>Province:</td>
<td><select name="province" id="province" size="1" required>
<option disabled>Select a province</option>
<option value="BC">British Columbia</option>
<option value="AB">Alberta</option>
<option value="SK">Saskatchewan</option>
<option value="MB">Manitoba</option>
<option value="ON">Ontario</option>
<option value="QC">Québec</option>
<option value="NB">New Brunswick</option>
<option value="NS">Nova Scotia</option>
<option value="PE">Prince Edward Island</option>
<option value="NF">Newfoundland</option>
<option value="YK">Yukon</option>
<option value="NWT">Northwest Territories</option>
<option value="NU">Nunavut</option>
</select>
</td>
</tr>
<tr>
<td>Postal Code:</td>
<td><input type="text" name="postalCode" id="postalCode" maxlength="6" minlength="6" required></td>
</tr>
<tr>
<th colspan="2">Order Information</th>
</tr>
<tr>
<td rowspan="3">Select your products:<br>
<span id="productError" class="errorMessage" hidden></span></td>
<td>Widget #1
<input type="text" name="widget1qty" id="widget1qty" size="1" value="0">Qty # <strong>$5.00/ea</strong></td>
</tr>
<tr>
<td>Widget #2
<input type="text" name="widget2qty" id="widget2qty" size="1" value="0">Qty # <strong>$15.00/ea</strong></td>
</tr>
<tr>
<td>Widget #3
<input type="text" name="widget3qty" id="widget3qty" size="1" value="0">Qty # <strong>$25.00/ea</strong></td>
</tr>
<tr>
<td rowspan="3">Shipping Type:</td>
<td>Standard ($5.00)<input type="radio" name="shippingType" id="shippingTypeStandard" value="Standard" checked></td>
</tr>
<tr>
<td>Express ($10.00)<input type="radio" name="shippingType" id="shippingTypeExpress" value="Express"></td>
</tr>
<tr>
<td>Overnight ($20.00)<input type="radio" name="shippingType" id="shippingTypeOvernight" value="Overnight"></td>
</tr>
<tr>
<th colspan="2">Submit Order</th>
</tr>
<tr>
<td><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Order" onSubmit="validateForm()"></td>
<td><input type="reset" name="btnReset" id="btnReset" value="Reset Form" ></td>
</tr>
</table>
</form>
</body>
`
Is that your full javascript? It is going to be pulling an unexpected end since you haven't finished your closures. If you are using Google Chrome to view the HTML, hit F12 to get the developer tools and view the console.
Also it is getElementById or getElementsByName
document.getElementById(string);
That call can only return one element since Ids are unique.
document.getElementsByName(string);
That call can return multiple elements as names are not unique. Meaning you are going to get an array even if there is one.
You don't need the excess 'else's. If you don't have logic in it, no need to include it.
You are getting the same widget value and handing it into widgetqty1, widgetqty2, and widgetqty3.
You never close the function definition. You need the last ending curly brace (}) to make sure it is a valid function.
You should end up with the following code:
<html>
<head>
<script>
function validateForm(ev){
var province, postalcode, widget1qty, widget2qty, widget3qty;
province = document.getElementById("province");
postalcode = document.getElementById("postalcode");
widget1qty = document.getElementById("widget1qty").innerHTML;
widget2qty = document.getElementById("widget2qty").innerHTML;
widget3qty = document.getElementById("widget3qty").innerHTML;
if(province.value == "Select a province")
{
document.write('Select your province from the list');
// You realize this overwrites your entire document?
province.focus();
return false;
}
if(postalcode.length<6)
{
document.write("You must enter a valid postal code .");
// You realize this overwrites your entire document?
postcalcode.focus();
return false;
}
if(widget1qty == 0 || widget2qty < 0 || widget3qty < 0)
{
document.write("You must select some widgets.");
// You realize this overwrites your entire document?
return false;
}
}
</script>
</head>
<body>
<h2>Order Form</h2>
<form onsubmit="return validateForm()"name="myForm" method="post" action="processForm.html">
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstName" id="firstName" size="30" required></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastName" id="lastName" size="30" required></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" id="address" size="30" required></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" name="city" id="city" size="30" required></td>
</tr>
<tr>
<td>Province:</td>
<td><select name="province" id="province" size="1" required>
<option disabled>Select a province</option>
<option value="BC">British Columbia</option>
<option value="AB">Alberta</option>
<option value="SK">Saskatchewan</option>
<option value="MB">Manitoba</option>
<option value="ON">Ontario</option>
<option value="QC">Québec</option>
<option value="NB">New Brunswick</option>
<option value="NS">Nova Scotia</option>
<option value="PE">Prince Edward Island</option>
<option value="NF">Newfoundland</option>
<option value="YK">Yukon</option>
<option value="NWT">Northwest Territories</option>
<option value="NU">Nunavut</option>
</select>
</td>
</tr>
<tr>
<td>Postal Code:</td>
<td><input type="text" name="postalCode" id="postalCode" maxlength="6" minlength="6" required></td>
</tr>
<tr>
<th colspan="2">Order Information</th>
</tr>
<tr>
<td rowspan="3">Select your products:<br>
<span id="productError" class="errorMessage" hidden></span></td>
<td>Widget #1
<input type="text" name="widget1qty" id="widget1qty" size="1" value="0">Qty # <strong>$5.00/ea</strong></td>
</tr>
<tr>
<td>Widget #2
<input type="text" name="widget2qty" id="widget2qty" size="1" value="0">Qty # <strong>$15.00/ea</strong></td>
</tr>
<tr>
<td>Widget #3
<input type="text" name="widget3qty" id="widget3qty" size="1" value="0">Qty # <strong>$25.00/ea</strong></td>
</tr>
<tr>
<td rowspan="3">Shipping Type:</td>
<td>Standard ($5.00)<input type="radio" name="shippingType" id="shippingTypeStandard" value="Standard" checked></td>
</tr>
<tr>
<td>Express ($10.00)<input type="radio" name="shippingType" id="shippingTypeExpress" value="Express"></td>
</tr>
<tr>
<td>Overnight ($20.00)<input type="radio" name="shippingType" id="shippingTypeOvernight" value="Overnight"></td>
</tr>
<tr>
<th colspan="2">Submit Order</th>
</tr>
<tr>
<td><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Order" ></td>
<td><input type="reset" name="btnReset" id="btnReset" value="Reset Form" ></td>
</tr>
</table>
</form>
</body>
Related
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/>
In my HTML table I would like to hide a question and show this if a specific option is chosen in the dropdown. This works fine with the code below, but the table isn't formatted right (two <td> in the space of one)?
Demo (pick "Other type" at "Type")
How to fix this?
function setForm(value) {
if (value == '99') {
document.getElementById('form1').style = 'display:block;';
} else {
document.getElementById('form1').style = 'display:none;';
}
}
<form action="index.php" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td>First question:</td>
<td><input type="text" name="firstone" /></td>
</tr>
<tr>
<td>Type: </td>
<td>
<select id="type" name="type" onchange="setForm(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="99">Other type</option>
</select>
</td>
</tr>
<tr id="form1" style="display:none;">
<td>Specify type:</td>
<td><input type="text" name="othertype" /></td>
</tr>
<tr>
<td>Description:</td>
<td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
</tr>
</table>
<input type="submit" name="submit" value="Verstuur" />
</form>
Dont use block to display tr table element, just set style display to empty:
.style.display = '';
function setForm(value) {
if (value == '99') {
document.getElementById('form1').style.display = '';
} else {
document.getElementById('form1').style.display = 'none';
}
}
<form action="index.php" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td>First question:</td>
<td><input type="text" name="firstone" /></td>
</tr>
<tr>
<td>Type: </td>
<td>
<select id="type" name="type" onchange="setForm(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="99">Other type</option>
</select>
</td>
</tr>
<tr id="form1" style="display:none;">
<td>Specify type:</td>
<td><input type="text" name="othertype" /></td>
</tr>
<tr>
<td>Description:</td>
<td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
</tr>
</table>
<input type="submit" name="submit" value="Verstuur" />
</form>
The problem is, display:block for a tr element. Try this:
function setForm(value) {
if (value == '99') {
document.getElementById('form1').style = 'display:table-row;';
} else {
document.getElementById('form1').style = 'display:none;';
}
}
<form action="index.php" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td>First question:</td>
<td><input type="text" name="firstone" /></td>
</tr>
<tr>
<td>Type: </td>
<td>
<select id="type" name="type" onchange="setForm(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="99">Other type</option>
</select>
</td>
</tr>
<tr id="form1" style="display:none;">
<td>Specify type:</td>
<td><input type="text" name="othertype" /></td>
</tr>
<tr>
<td>Description:</td>
<td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
</tr>
</table>
<input type="submit" name="submit" value="Verstuur" />
</form>
How to if the teacher select Items (4) using JavaScript,
as you can see, the table row adjust, it depends on what Items that the user selected,
please help me guys
here's the example:
if the user select Items (3)
here is my html
<table class="tableattrib" id="myTables">
<tr>
<td colspan="1" class="tdhead1">Class</td>
<td colspan="20" class="tdcell">
<select>
<option>Grading Categories</option>
</select>
<select onchange="myFunction()">
<option>Items</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select>
<option>Section</option>
</select>
</td>
</tr>
<tr>
<td class="tdnb" colspan="21"><input id="myInput" type="text" placeholder="Search Student" class="search"></td>
</tr>
<tr>
<td colspan="1" class="tdhead">Student Name</td>
<td class="tdcell1"><input type="text" name="" id="datepicker" placeholder="mm/dd/yyyy" title="Quiz Date"/></td>
<td class="tdcell1"><input type="text" name="" id="datepicker1" placeholder="mm/dd/yyyy" title="Quiz Date"/></td>
<td class="tdcell1"><input type="text" name="" id="datepicker2" placeholder="mm/dd/yyyy" title="Quiz Date"/></td>
<td class="tdcell2">Average</td>
</tr>
<tbody id="myTable">
<tr id="myRow">
<td colspan="1" class="tdcell">Marvin Makalintal</td>
<td class="tdcell1"><input type="text" name=""/></td>
<td class="tdcell1"><input type="text" name=""/></td>
<td class="tdcell1"><input type="text" name=""/></td>
<td class="tdcell1"><input type="text" name=""/></td>
</tr>
<tr>
<td class="tdbtn" colspan="21"><button type="button" class="save">+ Save</button>
<button type="button" class="save">✓ Finalize</button></td>
</tr>
</tbody>
</table>
</body>
<script>
function myFunction() {
var row = document.getElementById("myRow");
var x = row.insertCell(1);
x.innerHTML = "New cell";
}
</script>
First, we pass this.value into myFunction.
- <select onchange="myFunction()">
+ <select onchange="myFunction(this.value)">
Next, we add id="headerRow" to the header row.
- <tr>
+ <tr id="headerRow">
<td colspan="1" class="tdhead">Student Name</td>
Then, we implement configureRow(row, numItems, innerHTMLFunc) to insert and delete cells.
Finally, we call configureRow in myFunction.
function configureRow(row, numItems, innerHTMLFunc) {
var numCells = numItems + 2;
while (row.childElementCount < numCells) {
var x = row.insertCell(row.childElementCount - 1);
x.innerHTML = innerHTMLFunc(row.childElementCount - 2);
}
while (row.childElementCount > numCells) {
row.deleteCell(row.childElementCount - 2);
}
}
function myFunction(numItems) {
numItems = Number(numItems);
var row = document.getElementById("headerRow");
configureRow(row, numItems, (itemNum) => `<td class="tdcell1"><input type="text" name="" id="datepicker${itemNum - 1 || ''}" placeholder="mm/dd/yyyy" title="Quiz Date" /></td>`);
var row = document.getElementById("myRow");
configureRow(row, numItems, (itemNum) => '<td class="tdcell1"><input type="text" name=""></td>');
}
<table class="tableattrib" id="myTables">
<tr>
<td colspan="1" class="tdhead1">Class</td>
<td colspan="20" class="tdcell">
<select>
<option>Grading Categories</option>
</select>
<select onchange="myFunction(this.value)">
<option>Items</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select>
<option>Section</option>
</select>
</td>
</tr>
<tr>
<td class="tdnb" colspan="21"><input id="myInput" type="text" placeholder="Search Student" class="search"></td>
</tr>
<tr id="headerRow">
<td colspan="1" class="tdhead">Student Name</td>
<td class="tdcell1"><input type="text" name="" id="datepicker" placeholder="mm/dd/yyyy" title="Quiz Date" /></td>
<td class="tdcell1"><input type="text" name="" id="datepicker1" placeholder="mm/dd/yyyy" title="Quiz Date" /></td>
<td class="tdcell1"><input type="text" name="" id="datepicker2" placeholder="mm/dd/yyyy" title="Quiz Date" /></td>
<td class="tdcell2">Average</td>
</tr>
<tbody id="myTable">
<tr id="myRow">
<td colspan="1" class="tdcell">Marvin Makalintal</td>
<td class="tdcell1"><input type="text" name="" /></td>
<td class="tdcell1"><input type="text" name="" /></td>
<td class="tdcell1"><input type="text" name="" /></td>
<td class="tdcell1"><input type="text" name="" /></td>
</tr>
<tr>
<td class="tdbtn" colspan="21"><button type="button" class="save">+ Save</button>
<button type="button" class="save">✓ Finalize</button></td>
</tr>
</tbody>
</table>
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
function myFunction() {
alert(selectionnumber);
var intselectionnumber = 0;
intselectionnumber =document.getElementById("selectionnumber").value;
alert(intselectionnumber);
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i] ; i++) {
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
if (j == 1) {
for ( k = 1; k <= intselectionnumber; k++)
{
var x = row.insertCell(j);
x.innerHTML = "<input type='text' name='' id='datepicker2' placeholder='mm/dd/yyyy' title='Quiz Date'/>";
}
}
}
}
}
</script>
<h1>The onclick Event</h1>
<table class="tableattrib" id="myTables">
<tr>
<td colspan="1" class="tdhead1">Class</td>
<td colspan="20" class="tdcell">
<select>
<option>Grading Categories</option>
</select>
<select id='selectionnumber' onchange="myFunction();">
<option value="0">Items</option>
<option value="1" selected='selected'>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select>
<option>Section</option>
</select>
</td>
</tr>
</table>
<table id='mytab1'>
<tr>
<td class="tdnb" colspan="21"><input id="myInput" type="text" placeholder="Search Student" class="search"></td>
</tr>
<tr>
<td colspan="1" class="tdhead">Student Name</td>
<td class="tdcell2">Average</td>
</tr>
<tr id="myRow">
<td colspan="1" class="tdcell">Marvin Makalintal</td>
<td class="tdcell1"><input type="text" name="" /></td>
</tr>
<tr>
<td class="tdbtn" colspan="21">
<button type="button" class="save">+ Save</button>
<button type="button" class="save">✓ Finalize</button>
</td>
</tr>
</table>
</body>
</html>
I have an HTML FORM with the following dropdown menu.
How many are Attending?
<select id="NoAttending">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>
The rows below will depend on user's option. So if the user selects "3" three rows will be generated on the fly and shown each column with 2 input fields for FName and LName.
<tr>
<td>First Name:
<input id="fname1" name="fname" type="text">
</td>
<td>Last Name:
<input id="lname1" name="lname" type="text">
</td>
</tr>
<tr>
<td>First Name:
<input id="fname2" name="fname" type="text">
</td>
<td>Last Name:
<input id="lname2" name="lname" type="text">
</td>
</tr>
<tr>
<td>First Name:
<input id="fname3" name="fname" type="text">
</td>
<td>Last Name:
<input id="lname3" name="lname" type="text">
</td>
</tr>
How can I do this? Thank you!
I am trying to create the jquery select field which includes images. (http://designwithpc.com/Plugins/ddSlick)
It seems that there is something wrong with my code, as the console is showing an error:
Uncaught TypeError: Object [object Object] has no method 'ddslick'
HTML
<form id="quote" action="" method="get"><script type="text/javascript">// <![CDATA[
$('#quote').keyup(function (){ doTotal(this); calcMenu(this); ddslick(this); });
// ]]></script>
<table id="table1" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>Enquiry Date</td>
<td>
<div align="center"><input type="text" name="dateToday" size="25" /></div></td>
</tr>
<tr>
<td>Conference Name</td>
<td>
<div align="center"><input type="text" name="conferenceName" size="25" /></div></td>
</tr>
<tr>
<td>Company Name</td>
<td>
<div align="center"><input type="text" name="companyName" size="25" /></div></td>
</tr>
<tr>
<td>Special Requests</td>
<td><textarea name="comment" rows="5" cols="26"></textarea></td>
</tr>
</tbody>
</table>
<table id="table2" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>First Name</td>
<td>
<div align="center"><input type="text" name="firstName" size="25" /></div></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<div align="center"><input type="text" name="lastName" size="25" /></div></td>
</tr>
<tr>
<td>Tel No</td>
<td>
<div align="center"><input type="text" name="telNo" size="25" /></div></td>
</tr>
<tr>
<td>Cell</td>
<td>
<div align="center"><input type="text" name="cellNo" size="25" /></div></td>
</tr>
<tr>
<td>Email</td>
<td>
<div align="center"><input type="text" name="email" size="25" /></div></td>
</tr>
<tr>
<td><input onclick="formReset()" type="button" value="Reset form" /></td>
</tr>
</tbody>
</table>
<table id="tablex" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<th scope="col" width="30">
<div align="center">Date</div></th>
<th scope="col" width="128">
<div align="center">Amount of Delegates ½ Day Conference # R 240 pp</div></th>
<th width="112">
<div align="center">Amount of Delegates Full Day Conference # R 260 pp</div></th>
<th width="112">
<div align="center">Menu No</div></th>
<th width="112">
<div align="center">Price pp for Menu (1-7: R70, 8-10 R85, 11: R105, 12: R85)</div></th>
<th width="112">
<div align="center">Total Persons for meals</div></th>
<th width="112">
<div align="center">Amount of Single Rooms # R 480 pp</div></th>
<th width="112">
<div align="center">Amount of Double Rooms # R 720 pp</div></th>
<th width="134">
<div align="center">Total for the day</div></th>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date1" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday1" size="5" maxlength="10" /></div></td>
<td>
<div align="center"><input type="text" name="fullday1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total1" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date2" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total2" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date3" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total3" size="5" /></div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div id="myDropdown">
<select id="myDropdown">
<option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
data-description="Description with Facebook">Facebook</option>
<option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
data-description="Description with Twitter">Twitter</option>
<option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
data-description="Description with LinkedIn">LinkedIn</option>
<option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
data-description="Description with Foursquare">Foursquare</option>
</select>
</div>
</form>
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
If you are using wordpress, try following this steps:
1 - Copy the jquery.ddslick.js file in the /js folder of your theme.
2 - Be sure you have write the correct path to the file in your header.php. Inside the <head> tag you should have something like this:
<script src='<?php echo get_template_directory_uri(); ?>/js/jquery.ddslick.js'></script>
3 - As #Arnelle Balane has point out, you probably should write this piece of code:
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
Inside some script tags:
<script type="text/javascript">
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
</script>
Or, you can put that code inside your custom .js file. That way you don't have to put all the code in the html:
a - Inside your /js folder, make another .js file, something like this: script.js
b - Inside the script.js file, copy the above code without script tags inside a jQuery on ready function, like this:
jQuery(document).ready(function($) {
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
});
4 - Check you have jquery activate on your theme, if not, you can download jquery from here and repeat step 2 for the jQuery file or you can use jQuery from wordpress.
5 - Double check for typos and test if works; if not, is probably something else; keep us informed.
Update: I add more info in the step three, in case of using a external .js file.