Show rows based on dropdown menu - javascript

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!

Related

Validating a users input and adding a value to it

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>

HTML table format with javascript style-change

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 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>

javascript won't execute properly; unsure why. validating form

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>

Keeping a click button underneath a dev element after it is cereated

I have set an add button to add another div element onto the page when it is clicked. I am having a problem get the button to drop underneath the new div element after the div is created. The button stays in place and the new div is add underneath it when it is clicked, and if it is clicked again the button still stays in the same place and adds an additional div. Any help is greatly appreciated.
<fieldset id="college">
<legend id="namefields"><h2>College, University or Professional School</h2></legend>
<table width="834">
<tr>
<td width="439" height="61">
Name of School <input type="text"size="40" maxlength="50" name="college" id="college"/>
</td>
<td width="383">
Location <input type="text" name="location" size="40">
</td>
</tr>
</table>
<table width="834">
<tr>
<td width="272" height="54">
Start Date <input type="date" name="date" size="10"></td>
<td width="273" height="54">
End Date <input type="date" name="date" size="10"></td>
<td width="273" height="54">
Credit Hours <input type="text" name="creditHrs" size="10"></td>
</tr>
</table>
<table width="869">
<tr>
<td width="439" height="61">
Course of Study <input type="text"size="40" maxlength="50" name="college" id="college"/>
</td>
<td width="418">
<label for="degreeType" id="degreeType">Degree Earned (transcripts may be required)</label>
<select style="width: 310px;" id="degreeType" name="degreeType" tabindex="0">
<option value="select one">Select One</option>
<option value="associates">Associates</option>
<option value="bachelors">Bachelors</option>
<option value="certification">Certification</option>
<option value="masters">Masters</option>
<option value="doctorate">Doctorate</option>
<option value="inprogress"> In Progress</option>
<option value="0">Not Applicable</option>
</select>
</td>
</tr>
</table>
</fieldset>
<button id= "addSchool" onclick="addSchool()">Add another school</button>
<script>
var original = document.getElementById('college');
function addSchool()
{
var clone = original.cloneNode(true);
original.parentNode.appendChild(clone);
}
</script>
</fieldset>
</div>

without jQuery you can use insertBefore like this
var original = document.getElementById('college');
var button = document.getElementById('addSchool');
function addSchool(){
var clone = original.cloneNode(true);
original.parentNode.insertBefore(clone,button);
}
http://jsfiddle.net/Zg2cE/

Categories