Calculate a table column - javascript

I am looking to calculate a column within a table that is being created. I need the sum field to add up the values created from the form, which is created new rows for the table upon submit. Any way I can get the to add up the column sum? Each time a function updatetable() is run is creates another table row, and these are the rows I need calculated...currently the column holds a "184" as a holding place for where the calculation would take place.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The real test</title>
<link rel="stylesheet" href="html_testing.css">
<script type="text/javascript"> <!--
var tabBody, row, cell;
function updateTable(){
tabBody=document.getElementById("joe$");
row=document.createElement("tr");
row.setAttribute("id","js");
cell = document.createElement("td");
cell.innerHTML=document.forms['leds'].elements[2].value;
row.appendChild(cell);
if(tabBody.childNodes.length==17)
tabBody.removeChild(tabBody.childNodes[0])
tabBody.appendChild(row);
}
function updateTable1(){
tabBody=document.getElementById("joe");
row=document.createElement("tr");
cell = document.createElement("td");
cell.innerHTML=document.forms['leds'].elements[3].value;
row.appendChild(cell);
if(tabBody.childNodes.length==17)
tabBody.removeChild(tabBody.childNodes[0])
tabBody.appendChild(row);
}
function myFunctionJoe(){
updateTable();
updateTable1();
}
function moneymoney(){
('#joe$ tr:first td').each(function(){
var $td = $(this);
var colTotal = 0;
$('#joe$ tr:not(:first,.totalColumn)').each(function(){
colTotal += parseInt($(this).children().eq($td.index()).html(),10);
});
$('#joe$ tr.totalColumn').children().eq($td.index()).html('Total: ' + colTotal);
});
}
</script>
<body>
<h2>Legion of Roar:</h2>
<form name="leds" id="ledSend" action="" onsubmit="return false;">
Lamp Control: <input type="radio" name="led" value="0" checked />Off
<input type="radio" name="led" value="1" />On<br>
Winning Bid: <input type="text" name="timer" placeholder="Bid..." /><br>
Player Drafted: <input id="name" type="text" name="user" placeholder="Player Name..." /><br>
Player Position: <input id="name" type="text" name="user" placeholder="Position..." /><br>
<br>
<input type="submit" value="Joe" onclick="myFunctionJoe();"/>
<h1>Testing some skills</h1>
<fieldset>
<table border ='1' class="inlineTable">
<thead><tr><th>Joe</th></tr></thead>
<thead><tr><th>200</th></tr></thead>
<tr class="totalColumn">
<td class="totalCol">Spent:</td>
</tr>
<tbody id="joe"><tbody>
</table>
<table border ='1' class="inlineTable">
<thead><tr><th>$</th></tr></thead>
<thead><tr><th>184</th></tr></thead>
<tr class="totalColumn">
<td class="totalCol">Spent:</td>
</tr>
<tbody id="joe$"><tbody>
</table>
</body>
</html>

Related

Enabling and Disabling buttons in html alternatively

When user open the page, the Update button must be disable and Edit button should be enable and there should be no chance to edit the text fields.
When user clicks on Edit button, the Update button must be enable and Edit button should be disable and the user able to edit only FirstName and LastName but he should not able to do edit the EmpId field.
Please help me in this.
This is some part of my code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function func1(){
document.getElementById("update").disabled=true;
}
function btnUpdate(){
if(document.getElementById("edit").clicked=true;){
document.getElementById("update").disabled=false;
}
}
</script>
</head>
<body onload="func1()">
<table rules="all" border="" style="position: absolute;left: 337px;top: 125px;">
<tr><td id="EmpID">EmpID:</td><td><input type="text" value="MGIS107"></td></tr>
<tr><td id="FirstName">FirstName:</td><td><input type="text" value="Vikas"></td></tr>
<tr><td id="LastName">LastName:</td><td><input type="text" value="Dubbaka"></td></tr>
<input type="button" value="Update" id="update">
<input type="button" value="Edit" id="edit" onclick="btnUpdate()">
</body>
</html>
Try the following way:
var empId = document.getElementById("EmpID");
var fName = document.getElementById("FirstName");
var lName = document.getElementById("LastName");
empId.disabled = true;
function func1(){
document.getElementById("update").disabled = true;
fName.disabled = true;
lName.disabled = true;
}
function btnUpdate(el){
document.getElementById("update").disabled = false;
el.disabled = true;
fName.disabled = false;
lName.disabled = false;
}
<body onload="func1()">
<table rules="all" border="" style="position: absolute;left: 337px;top: 125px;">
<tr><td>EmpID:</td><td><input type="text" id="EmpID" value="MGIS107"></td></tr>
<tr><td>FirstName:</td><td><input type="text" id="FirstName" value="Vikas"></td></tr>
<tr><td>LastName:</td><td><input type="text" id="LastName" value="Dubbaka"></td></tr>
<input type="button" value="Update" id="update">
<input type="button" value="Edit" id="edit" onclick="btnUpdate(this)">
</table>
</body>

Splitting a Javascript Variable into an html table

I am unable to split a variable that holds 5 fields from a form into a table in 5 different sections of the same row. I would appreciate any assistance.
// The section below this line is where the variable from the form input
// is inserted, but the role is not split into 5 different cells.
function getInfo() {
var info = document.getElementById("form1");
var text = "";
var i;
for (i=0; i < info.length; i++) {
text += info.elements[i].value;
}
document.getElementById("data").innerHTML = text;
// Log the form input into the console
console.log(text);
}
div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }
<!-- JQuery styling and CDN files -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Form HTML -->
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br>
Last name: <input type="text" name="lname" id="lname1" required><br>
Address: <input type="text" name="address" id="address1" required><br>
City: <input type="text" name="city" id="city1" required><br>
State: <input type="text" name="state" id="state1" required><br>
</form>
<p>Click the button below to display your entry.</p>
<!-- Javascript button to capture and display the input -->
<button onclick="getInfo()">Try it</button>
<table style="width:100%">
<tr>
<th>First Name</th>
</tr>
<tr id ="data">
</tr>
</table>
If you want the data into different columns, you have to create the columns and append them to a row.
You do not want to concatenate the data into a single var, because you want to keep the data split up into columns.
You could do this:
function getInfo() {
const info = document.getElementById("form1");
const row = document.getElementById("data");
for (let i =0; i < info.length; i++) {
// Make a new column
const col = document.createElement('td');
// Make a new text node
const colText = document.createTextNode(info.elements[i].value);
// Append text to column
col.appendChild(colText);
// Append column to the row (id of data)
row.appendChild(col);
}
}
You need to add the table cell markup to your string, given your current approach.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- JQuery styling and CDN files -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Custom css -->
<style>
div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }
</style>
<title>My Web Page</title>
</head>
<body>
<!-- Form HTML -->
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br>
Last name: <input type="text" name="lname" id="lname1" required><br>
Address: <input type="text" name="address" id="address1" required><br>
City: <input type="text" name="city" id="city1" required><br>
State: <input type="text" name="state" id="state1" required><br>
</form>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
</tr>
<tr id ="data">
</tr>
</table>
<!-- Javascript function for the user input -->
<script type="text/javascript">
function getInfo() {
var info = document.getElementById("form1");
var text = "";
var i;
for (i=0; i < info.length; i++) {
text += "<td>"+info.elements[i].value+"</td>";
}
document.getElementById("data").innerHTML = text;
// Log the form input into the console
console.log(text);
}
</script>
<p>Click the button below to display your entry.</p>
<!-- Javascript button to capture and display the input -->
<button onclick="getInfo()">Try it</button>
</body>
</html>
Used the following methods, properties, and API:
HTMLFormControlsCollection
Array.from()
forEach()
.insertCell()
.textContent
Demo
Details are commented in Demo
function distData(e) {
//HTMLFormControlsCollection
var F = document.forms.form1;
var x = F.elements;
//Convert Collection into an array
var fieldArray = Array.from(x);
console.log(fieldArray);
//Reference tr#data
var R = document.getElementById('data');
//Each input in array will...
fieldArray.forEach(function(field, index) {
//Check if input has a value
if (field.value.length > 0) {
//Create a <td> snd insert it into R
var cell = R.insertCell(index);
//Copy the input value into cell
cell.textContent = field.value;
} else {
//if form control has no value ignore it
console.log('field has no value');
}
});
return false;
}
table {
margin: 0 auto 20px
}
table,
td {
border: 3px inset grey
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<style>
div.ui-input-text {
width: 200px
}
button {
width: 200px
}
</style>
</head>
<body>
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br> Last name: <input type="text" name="lname" id="lname1" required><br> Address: <input type="text" name="th>" id="address1" required><br> City: <input type="text" name="city" id="city1"
required><br> State: <input type="text" name="state" id="state1" required><br>
<button onclick='distData()' type='button'>DATA</button>
</form>
<p>Click the button below to display your entry.</p>
<table style="width:100%">
<tr>
<th colspan='2'>Name</th>
<th colspan='3'>Location</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
<th>Address</th>
<th>City</th>
<th>State</th>
</tr>
The section below this line is where the variable from the form input is inserted, but the role is not split into 5 different cells.
<tr id="data">
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>
The problem is that you are concatenating each field into a string; there is no delimiter in the string so there is no logical way to break it up. What you want to do instead is store each field in an array, then you can iterate over that to build up a HTML string, or better yet just use Array.prototype.join() to create the HTML for the cells you are creating.
function getInfo() {
var info = document.getElementById("form1");
var fields = []; // create an empty array
var i;
for (i=0; i < info.length; i++) {
fields.push(info.elements[i].value);
}
document.getElementById("data").innerHTML = '<td>' + fields.join('</td><td>') + '<td>';
}
document.getElementById('try-it').addEventListener('click', getInfo, false);
div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br>
Last name: <input type="text" name="lname" id="lname1" required><br>
Address: <input type="text" name="address" id="address1" required><br>
City: <input type="text" name="city" id="city1" required><br>
State: <input type="text" name="state" id="state1" required><br>
</form>
<p>Click the button below to display your entry.</p>
<button id="try-it">Try it</button>
<table style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
</tr>
<tr id ="data">
</tr>
</table>
This will work, but it produces a table that can only have one row of data in it; every time you hit "Try It" the existing data will be replaced. To add more than one row, instead of targeting a particular row and inserting cells into it, create an entire row and append it to the table. Since you are already using jQuery, I'm using it in the below example.
function getInfo() {
// Create an array containing the values of all of the fields.
// First, select all of the input elements inside of the form,
// Then, use .map() to extract their values, finally use .get() to
// turn the jQuery object into an array.
var fields = $('#form1 input').map(function () {
return this.value;
}).get();
// create a new row and append it to the table.
$('#display-table').append('<tr><td>' + fields.join('</td><td>') + '<td></tr>');
}
// instead of using in-line event handlers, attach it in your code.
$('#try-it').on('click', getInfo);
div.ui-input-text { width: 200px !important;}
button { width: 200px !important; }
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<form id="form1">
First name: <input type="text" name="fname" id="fname1" required><br>
Last name: <input type="text" name="lname" id="lname1" required><br>
Address: <input type="text" name="address" id="address1" required><br>
City: <input type="text" name="city" id="city1" required><br>
State: <input type="text" name="state" id="state1" required><br>
</form>
<p>Click the button below to display your entry.</p>
<button id="try-it">Try it</button>
<table id="display-table" style="width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
</tr>
</table>
More resources
jQuery API reference main page
jQuery learning center
.map()
.append()
.get()
Array.prototype.push

input-field not refresh after receiving value

The entire process of collecting data from the first input-field and shipping to second input-field2 is working perfectly but so that the value actually goes to the second input-field i must delete some letter from first input-field and re-enter some number so that the value actually goes to second-input.
Gif of doubt.
$(document).ready(function () {
$(function () {
var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');
function onChange() {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
};
$('#postal_code')
.change(onChange)
.keyup(onChange);
});
});
First input represents this field postal_code & Second input represents this field cepAddressRouteTransporter.
<form action="transporter/route" method="post" role="form">
<table id="address">
<tr>
<td class="label">Zip code</td>
<td class="wideField">
<input class="field" id="postal_code" name="postal_code">
</td>
</tr>
</table>
<div class="input-field col s6">
<i class="material-icons prefix">directions</i>
<input placeholder="Ex: 18214-780" id="cepAddressRouteTransporter" name="cepAddressRouteTransporter" type="text" class="validate">
<label for="cepAddressRouteTransporter">CEP:</label>
</div>
</form>
Thanks for help!
you have to call your function onChange when the DOM is ready
onChange();
when you update the value, trigger the DOM event.
$('#postal_code').trigger('change');
$(function() {
var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');
function onChange() {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
};
$('#postal_code').change(onChange).keyup(onChange);
// fire as soon as DOM is ready
onChange();
var t = window.setInterval(function(){
var n = Math.floor(Math.random() * 100000);
$('#postal_code').val(n);
// when you update the value, trigger the DOM event
$('#postal_code').trigger('change');
},1000);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<form action="transporter/route" method="post" role="form">
<table id="address">
<tr>
<td class="label">Zip code</td>
<td class="wideField">
<input class="field" id="postal_code" name="postal_code" value="90210">
</td>
</tr>
</table>
<div class="input-field col s6">
<i class="material-icons prefix">directions</i>
<input placeholder="Ex: 18214-780" id="cepAddressRouteTransporter" name="cepAddressRouteTransporter" type="text" class="validate">
<label for="cepAddressRouteTransporter">CEP:</label>
</div>
</form>
</body>
</html>
#code_monk Thanks for your help, i've reshaped your recommendation and add a few new things.
$(function () {
var $cepAddressRouteTransporterGoogleMaps = $('#postal_code');
var $cepAddressRouteTransporter = $('#cepAddressRouteTransporter');
function onChange() {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
};
$cepAddressRouteTransporterGoogleMaps.change(onChange).keyup(onChange);
$cepAddressRouteTransporter.change(onChange).keyup(onChange);
onChange();
var refresh = window.setInterval(function () {
$cepAddressRouteTransporter.val($cepAddressRouteTransporterGoogleMaps.val());
}, 3000);
});

Replacing onClick() with addEventListener()

Converting oclick() with addEventListener(), i have tried multiple times, But no Success. Can anyone help please. i have read in the book, that onlick() is not w3 standard, Any help will highly be aprreciated
Before with onclick() working Perfectly:
html code
<!DOCTYPE html>
<html>
<head>
<title>Splitting number</title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
<form id="myForm" action="" name="myForm">
<table border="1">
<tr>
<td>Enter a phone number<br> [in the form (555) 555-5555]</td>
<td><input name="input" type="text" size="40"></td>
</tr>
<tr>
<td><input type="button" value="Split" onclick="parseNumber()"></td>
</tr>
<tr>
<td>Area code:</td>
<td><input name="areaCode" type="text" size="5"></td>
</tr>
<tr>
<td>Number:</td>
<td><input name="number" type="text" size="8"></td>
</tr>
</table>
</form>
</body>
</html>
javascript code:
function parseNumber() {
var myForm = document.getElementById( "myForm" );
myForm.areaCode.value = "";
myForm.number.value = "";
var completeNumber = myForm.input.value.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
myForm.areaCode.value = areaCode;
myForm.number.value = tokens2[0] + "-" + tokens2[1];
}
after, Not working:
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Splitting number</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
Enter a phone number: in the form (555) 555-5555]
<input name="input" type="text" size="40" id="number" ><br>
<input type="button" value="Split" id="myBtn"><br><br>
Area code: <input name="areaCode" type="text" size="5" id="areaCode"><br>
Number: <input name="number" type="text" size="8" id="anotherNumber">
</body>
</html>
javascript code
var completeNumber = document.getElementById("number");
x = document.getElementById( "myBtn" );
function parseNumber() {
x.addEventListener("click", parseNumber);
completeNumber.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
document.getElementById("areaCode").innerHTML = areaCode.toString();
document.getElementById("anotherNumber").innerHTML = tokens2[0].toString() + "-" + tokens2[1].toString();
}
You need to add the event listener outside the function.
The listener is listening (clues in the name) for a mouse 'click' event on that element. When the event happens i.e you click on the element, it calls the function that it is assigned, in your case: parseNumber.
So since you are adding the event listener inside the function, it never gets added (as the function never gets called).
It should all work if you move the lines:
var x = document.getElementById( "myBtn" );
x.addEventListener("click", parseNumber);
outside the function. :)
I thnik no one actually read the question, if you already had a working example then changing onclick to eventListener is no problem:
var parseNum = document.getElementById('parse-number');
function parseNumber() {
var myForm = document.getElementById( "myForm" );
myForm.areaCode.value = "";
myForm.number.value = "";
var completeNumber = myForm.input.value.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
myForm.areaCode.value = areaCode;
myForm.number.value = tokens2[0] + "-" + tokens2[1];
}
parseNum.addEventListener("click", parseNumber);
<form id="myForm" action="" name="myForm">
<table border="1">
<tr>
<td>Enter a phone number<br> [in the form (555) 555-5555]</td>
<td><input name="input" type="text" size="40"></td>
</tr>
<tr>
<td><input type="button" value="Split" id="parse-number"></td>
</tr>
<tr>
<td>Area code:</td>
<td><input name="areaCode" type="text" size="5"></td>
</tr>
<tr>
<td>Number:</td>
<td><input name="number" type="text" size="8"></td>
</tr>
</table>
</form>
Change your code to this where eventListener is added outside the bounded function. Otherwise it will repeatedly bind an eventListener to the button.
Also place your script.js on the bottom of the HTML page. Because when the script executed the DOM element is not found since the DOM is not rendered at the script execution time.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Splitting number</title>
</head>
<body>
Enter a phone number: in the form (555) 555-5555]
<input name="input" type="text" size="40" id="number" ><br>
<input type="button" value="Split" id="myBtn"><br><br>
Area code: <input name="areaCode" type="text" size="5" id="areaCode"><br>
Number: <input name="number" type="text" size="8" id="anotherNumber">
<script type="text/javascript" src="script.js"></script>
</body>
</html>
JavaScript
var completeNumber = document.getElementById("number");
var x = document.getElementById( "myBtn" );
function parseNumber() {
completeNumber.replace(/\s/g, '');
var areaCode = completeNumber.substr(1,3);
var tokens2 = completeNumber.substr(5).split( "-" );
document.getElementById("areaCode").innerHTML = areaCode.toString();
document.getElementById("anotherNumber").innerHTML = tokens2[0].toString() + "-" + tokens2[1].toString();
}
x.addEventListener("click", parseNumber);

Cloning with javascript - renaming ID of form elements within a table

I have some code I am using that works well cloning the contents of a div as many times as needed.
The original code would rename the name/id of each form field. so the first clone the name would be "name1" second clone "name2" etc...
The problem is when I put the form fields within a div or a table for design purposes.
The code doesn't rename the form fields anymore as it seems to refer to the top elment which is the table or div (depending which I used)
Here is a cut down version of the code that contains everything needed for this example (can be copied into an editor and will work as is. You will see the field id's are not being renamed):
www.jsbin.com/oyavez/1/edit
<script type="text/javascript">
var formCounter = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
}
function moreFields() {
formCounter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + formCounter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields;
</script>
<title>Add Orders IO TOC</title>
</head>
<body>
<!-- Template -->
<div id="readroot" style="display: none">
<table>
<tr><td colspan="2"><h3>Order <script>document.write(formCounter);</script></h2></td></tr>
<tr><td>Order ID: </td><td><input type="text" id="OrderID name="OrderID[]" ></input></td>
<td>Order Name: </td><td><input type="text" id="OrderName" name="OrderName[]" ></input></td>
</table>
<br /><br /><input type="button" value="Remove Above Order" style="width:200px;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
<!-- ROW -->
</div>
<!-- END Template -->
<!-- Start of form -->
<form method="get" action="form.php">
<table>
<tr><td align="center" colspan="2"><h2>Contract</h2></td></tr>
<!-- Static part of the form not to be cloned -->
<tr><td>Contract: </td><td><input type="text" id="Contract" name="Contract" ></input></td>
<td>Signed Date: </td><td><input type="text" id="datepicker0" name="SignedDate" ></input></td>
<tr><td align="center" colspan="2"><h2>Orders</h2></td></tr>
</table>
<!-- ROW -->
<!-- Cloned parts of the form appear here -->
<span id="writeroot"></span>
<table>
<tr><td align="center" > <input type="button" style="width:200px;" value="Add another order below" onclick="moreFields()" /></td>
<td align="center" ><input type="submit" value="Submit IO and all Orders" style="width:200px;" ></td></tr>
</table>
</form>
Anyone know how to get to the child of the table it would seem?
Thanks!

Categories

Resources