Keep values pushed into array using javascript - javascript

I have created some code in JavaScript that allows the user to add values to a dropdown menu and three arrays which the dropdown menu pulls and displays values from. I was wondering if there is a way to create a cookie or something that will keep the values that a user adds. Below is my code an here is the link to the working JSfiddle.
<html>
<head>
<title>Selected Index Design</title>
<script >
var arr1 = ["",0,6,0,15,4,0,1,0,0,17];
var arr2 = ["",0,5,19,3,26,3,25,0,0,24];
var arr3= ["",0,15,0,9,0,5,0,0,0,7];
function fill() {
var si = document.getElementById('dd').selectedIndex;
if (si !==0)
{
var a = arr1[si];
var b= arr2[si];
var c= arr3[si];
var x = document.getElementById("factor").value;
var d= a*x;
var e= b*x;
var f=c*x;
var g = d*4 + e*4 + f*9;
document.getElementById("val1").innerHTML=d;
document.getElementById('val2').innerHTML=e;
document.getElementById('val3').innerHTML=f;
document.getElementById('val4').innerHTML=g;
}
}
function addoption(){
var mySelect = document.getElementById('dd'),
newOption = document.createElement('option');
newOption.value = document.getElementById('addopt').value;
if (typeof newOption.innerText === 'undefined')
{
newOption.textContent = document.getElementById('addopt').value;
}
else
{
newOption.innerText = document.getElementById('addopt').value;
}
mySelect.appendChild(newOption);
var newone= document.getElementById('addone').value;
var newtwo= document.getElementById('addtwo').value;
var newthree= document.getElementById('addthree').value;
arr1.push(newone);
arr2.push(newtwo);
arr3.push(newthree);
}
</script>
</head>
<body>
<table id="table1">
<tr>
<th>dd</th>
<th>factor</th>
<th>v1</th>
<th>v2</th>
<th>v3</th>
<th>v4</th>
</tr>
<tr class="odd">
<td>
<form name = "dd">
<select name = "dd" id="dd" onchange = "fill()">
<option > a </option>
<option > b </option>
<option > c </option>
<option > d </option>
<option > e </option>
<option > f </option>
<option > g </option>
<option > h </option>
<option > i </option>
<option > j </option>
<option > k </option>
</select>
</form>
</td>
<td id="fac">
<form name="factor">
<select id="factor" onChange="fill();">
<option value=""></option>
<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>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
</select>
</form>
</td>
<td id="val1"></td>
<td id="val2"></td>
<td id="val3"></td>
<td id="val4"></td>
</tr>
<tr class="even">
<td></td>
<td></td>
<td ></td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
<br><br>
<h3>Insert New data</h3>
<b>option<b>
<input type='text' value='' id='addopt'><br><br>
<b>array one</b>
<input type='text' value='' id='addone'><br><br>
<b>array 2</b>
<input type='text' value="" id='addtwo'><br><br>
<b>array 3</b>
<input type='text' value='' id='addthree'><br><br>
<button id="button" onclick="addoption()">add</button>
<div id='result'></div>
</body>
</html>


You might be interested by something like HTML5 Offline Storage: http://www.html5rocks.com/en/tutorials/offline/storage/

Related

How do I use javascript functions in html?

I have been trying to use a function in a javascript file inside another html file. Essentially, it's not working and I think it has to do with my trying to make the javascript accessible on the html file. The function is supposed to add the values taken from the form and then output that sum. The first bit of code is my .js file and the second is my html.
function reset()
{
var q = new Array(5);
for(var i = 0; i < 5; i++)
{
q[i] = 100;
}
}
function calculate(form)
{
var q = new Array(5);
for(var i = 0; i < 5; i++) {
q[i] = 100;
}
q[1] = document.worksheet1.Q1.options[document.worksheet1.Q1.selectedIndex].value;
q[2] = document.worksheet1.Q2.options[document.worksheet1.Q2.selectedIndex].value;
q[3] = document.worksheet1.Q3.options[document.worksheet1.Q3.selectedIndex].value;
q[4] = document.worksheet1.Q4.options[document.worksheet1.Q4.selectedIndex].value;
q[5] = document.worksheet1.Q5.options[document.worksheet1.Q5.selectedIndex].value;
var total = (q[1]*1.0)+(q[2]*1.0)+(q[3]*1.0)+(q[4]*1.0)+(q[5]*1.0);
document.worksheet1.totals.value = total;
}
<html>
<header>
<script language="Javascript" src="tmdcalculation.js" type="text/javascript"></script>
</header>
<body>
<form name="worksheet1" id="worksheet1" onsubmit="calculate">
<table border="1" align="center">
<tr>
<td><table>
<tr>
<td>Feeling</td>
<td>How I have felt</td>
</tr>
<tr>
<td>Question 1?</td>
<td><select name="Q1" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 2?</td>
<td><select name="Q2" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 3?</td>
<td><select name="Q3" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 4?</td>
<td><select name="Q4" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 5?</td>
<td><select name="Q5" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
</table></td>
</tr>
</table>
<table border="1" align="center">
<tr>
<td><table>
<tr>
<td align="right"><input name="button" type="button" onclick="calculate(this.form)" value="Analyse" /></td>
<td>Total Mood Calc:
<input name="totals" type="text" size="3" /></td>
<td><input name="reset" type="reset" onclick="initial()" value="Reset" /></td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
P.s Some extra questions. I had borrowed some of the code from a website because I am still quite new to both javascript and html. Why does the reset function have the array values all turned to 100? And, why doesn't the calculate function just call the reset function instead of doing the same thing?

I'm only a newbie to jscript and this may not work but can give this a go
function reset()
{
var q = new Array(5);
for(var i = 0; i < 5; i++)
{
q[i] = 100;
}
}
function calculate() {
var q = new Array(5);
for(var i = 0; i < 5; i++) {
q[i] = 100;
}
q[1] = document.worksheet1.Q1.options[document.worksheet1.Q1.selectedIndex].value;
q[2] = document.worksheet1.Q2.options[document.worksheet1.Q2.selectedIndex].value;
q[3] = document.worksheet1.Q3.options[document.worksheet1.Q3.selectedIndex].value;
q[4] = document.worksheet1.Q4.options[document.worksheet1.Q4.selectedIndex].value;
q[5] = document.worksheet1.Q5.options[document.worksheet1.Q5.selectedIndex].value;
var total = (q[1]*1.0)+(q[2]*1.0)+(q[3]*1.0)+(q[4]*1.0)+(q[5]*1.0);
document.worksheet1.totals.value = total;
}
<form name="worksheet1" id="worksheet1" onsubmit="return calculate()">

Get the value of combined TDs of dynamically generated TRs

I am trying to get the values of inputs in a dynamically generated tr in to an array. How can I get the combined td values in an array?
<input type="button" id="button" value="Click Me" />
<table style="width:100%" id="sub1">
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
</td>
</tr>
</table>
var onClick = function() {
var inputs = $("#sub1").find('.myInpCls');
for (var i = 0; i < inputs.length; i++) {
var el = inputs[i];
alert($(el).val());
}
};
$('#button').click(onClick);
I can pull input values using .find('.myInpCls'). How can I get the combined values here? Something like the array of input1##value 1, input2##value 2 etc.
UPDATE:
I have a select box in the next td. I have to combine these 2 items. ie,the input value+corresponding select item.
Fiddle

To create an array of the input values you can use map():
var onClick = function() {
var values = $('#sub1 .myInpCls').map(function() {
return this.value;
}).get();
//use the values array here...
console.log(values);
};
$('#button').click(onClick);
Working example

I would loop the tr and search for the input and select. Than you can do whatever you want to.
Your updated example.
$('#button').click(function() {
$("#sub1 tr").each(function() {
var input = $(this).find(".myInpCls").val() || 0,
select = $(this).find(".mySelCls").val() || 0,
value = parseInt(input) + parseInt(select);
alert(value);
});
});

I cleaned up your code a bit. Note that my answer takes into account the case where a user doesn't fill up all fields.
$("#button").click(function(){
var append_array = [];
$("tr").each(function(){
var input = $(this).find("input").val();
var select = $(this).find("select").val();
(input != '' ? append_array.push(input) : '');
append_array.push(select);
});
console.log(append_array);
return append_array;
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" id="button" value="Click Me" />
<table style="width: 100%" id="sub1">
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select></td>
</tr>
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select></td>
</tr>
</table>
</body>
</html>

var onClick = function() {
var result= [];
var inputs = $("#sub1").find('.myInpCls');
for(var i=0; i < inputs.length;i++){
var el = inputs[i];
result.push($(el).val());
}
alert(result.join(","));
};
$('#button').click(onClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<table style="width: 100%" id="sub1">
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select></td>
</tr>
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select></td>
</tr>
</table>
This will give you comma separated values for the text boxes , I hope this is what you are looking for.
Please mark the answer if it works for you

Try this snippet.
var onClick = function() {
var inputs = $("#sub1").find('.myInpCls');
var arr = [];
for (var i = 0; i < inputs.length; i++) {
var el = inputs[i];
arr.push("input #" + i + ' : ' + $(el).val());
}
var selects = $("#sub1").find('.mySelCls');
for (var j = 0; j < selects.length; j++) {
var sel = selects[j];
arr.push("select #" + j + ' : ' + $(sel).val());
}
alert(arr);
};
$('#button').click(onClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<table style="width:100%" id="sub1">
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
</td>
</tr>
</table>

Javascript GPA calculator, Calculate button not working

I am new to JavaScript and html. I was trying to make a GPA calculator using Javascript and add it to my blog : http://comptechniqz.blogspot.in/2016/04/gpa-both-sems.html
The layout using html is working exactly fine but the Calculate button does nothing when it is clicked. Can you please help me in finding what am I doing wrong here?
Thanks
My codes :
<form name="sem1">
<table border=5 bgcolor=#BADA55 cellpadding="5" cellspacing="2">
<th>Subject</th>
<th>Grade</th>
<tr>
<td>
<select name="subCRsem1_1" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr1" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_2" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr2" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_3" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr3" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_4" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr4" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_5" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr5" align=top maxlength=5></td>
</tr>
<tr>
<td>
<select name="subCRsem1_6" >
<option value="3.5">UMA003</option>
<option value="4.5">UCB008</option>
<option value="4.5">UEC001</option>
<option value="2.5">UES009</option>
<option value="4.0">UTA007</option>
<option value="3.0">UEN002</option>
<option value="4.5">UPH004</option>
<option value="4.5">UEE001</option>
<option value="3.0">UHU004</option>
<option value="4.0">UTA008</option>
</select>
</td>
<td><input type=text size=5 name="gr6" align=top maxlength=5></td>
</tr>
<tr align=center>
<td colspan=3><input type="button" value="Calculate" name="CalcButton" onclick="gpaCalc()"></td>
</tr>
</table>
</form>
<br>
</center>
<br>
<script language="JavaScript">
<!--
function gpaCalc()
{
//define valid grades and their values
var grade = new array(11);
var credit = new array(11);
var gradeReceived = new array(6);
var creditHour = new array(6);
// define valid grades and their values
grade = ['A+', 'A', 'A-', 'B', 'B-', 'C', 'C-', 'E', 'F', 'I', 'X'];
credit = [10, 10, 9, 8, 7, 6, 5, 2, 0, 0, 0];
// retrieve user input
gradeReceived[0] = document.sem1.gr1.value;
gradeReceived[1] = document.sem1.gr2.value;
gradeReceived[2] = document.sem1.gr3.value;
gradeReceived[3] = document.sem1.gr4.value;
gradeReceived[4] = document.sem1.gr5.value;
gradeReceived[5] = document.sem1.gr6.value;
// Allocate credits per subject
creditHour[0] = document.sem1.subCRsem1_1[document.sem1.subCRsem1_1.selectedIndex].value;
creditHour[1] = document.sem1.subCRsem1_2[document.sem1.subCRsem1_2.selectedIndex].value;
creditHour[2] = document.sem1.subCRsem1_3[document.sem1.subCRsem1_3.selectedIndex].value;
creditHour[3] = document.sem1.subCRsem1_4[document.sem1.subCRsem1_4.selectedIndex].value;
creditHour[4] = document.sem1.subCRsem1_5[document.sem1.subCRsem1_5.selectedIndex].value;
creditHour[5] = document.sem1.subCRsem1_6[document.sem1.subCRsem1_6.selectedIndex].value;
// calculate gpa
var totalGP = 0, GPA, totalHour=0;
var i, j, validGrade=0;
for(i=0; i<6; i++)
{
for(j=0; j<11;j++)
{
if(gradeReceived[i]==grade[j])
{
validGrade=1;
break;
}
}
if(validGrade==1)
{
totalGP+=credit[j]*creditHour[i];
totalHour+=creditHour[i];
}
else
{
alert("Error- Please use A+, A, A-, B, B-, C, C-, E, F, I or X in grades " );
return 0;
}
}
GPA=totalGP/totalHour;
alert("gpa = " + eval(GPA));
return 0;
}
//-->
</script>

caps your Array.
function gpaCalc()
{
//define valid grades and their values
var grade = new array(11); <-------- array has Caps in the A. should be Array(11) for all;
var credit = new array(11);
var gradeReceived = new array(6);
var creditHour = new array(6);
[UPDATE]
Change this part of your javascript
if(validGrade==1)
{
totalGP+=credit[j]*creditHour[i];
totalHour+=creditHour[i];
}
to this:
if(validGrade==1)
{
totalGP+=credit[j]*creditHour[i];
totalHour+=parseFloat(creditHour[i]);
}

Filling 2 inputs based on dropdown selection

I am looking to fill 2 fields based on the selection of a dropdown. This is the code I am using now (which works but not work in my case):
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("event");
var catSelected = e.options[e.selectedIndex].value;
document.getElementById("minLvl").value=catSelected;
}
</script>
and the relevant HTML:
<table>
<tr>
<td>Event:</td>
<td>
<select name="Event" id="event" onChange="updateinput();">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
<option value="option6">option6</option>
<option value="option7">option7</option>
</select>
</td>
</tr>
<tr>
<td>Starting Time:</td>
<td><input type="text" name="dateTime"/></td>
</tr>
<tr>
<td>Level Range:</td>
<td><input type="text" size="3" maxlength="3" id="minLvl"> - <input type="text" size="3" maxlength="3" id="maxLvl"></td>
</tr>
<tr>
<td>Notes:</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>Create Event:</td>
<td><input type="button" value="Create event!"></td>
</tr>
</table>
I know I can use e.options[e.selectedIndex].text to get the text and place it in the input, but is there a way I could add attributes to each option so its like <option value="option1" minLvl="1" maxLvl="10">Option1</option> and then pull the data from minLvl and maxLvl and then populate the values into the inputs?

function updateinput(){
var e = document.getElementById("event");
var catSelected = this.value;
document.getElementById("minLvl").value=catSelected;
}
<select name="Event" id="event" onChange="updateinput(this);">

I was able to get it to work with this code:
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("event");
var minLvl = e.options[e.selectedIndex].getAttribute("minLvl");
var maxLvl = e.options[e.selectedIndex].getAttribute("maxLvl");
document.getElementById("minLvl").value=minLvl;
document.getElementById("maxLvl").value=maxLvl;
}
</script>
<option value="option" minLvl="1" maxLvl="3">option</option>

How to pass table-row index to a javascript function

I have some php code that is creating an html table. Within it I have a form where I have different dropdown menus that have onChange events. I need to pass into the javascript function the table-row index. Is there any way to do this? If so could you please provide an example. Thank you!
My php code is listed below:
<?php
echo"
<table id='inputTable'>
<form id='trade' name='trade' method='post' action=''>
<tr id = 'labelRow0' name = 'labelRow0' style='display:table-row'>
<td>Spread Type</td>
<td>Option/Future</td>
<td>Year</td>
<td>Month</td>
<td>Strike</td>
<td>Call/Put</td>
<td>Buy/Sell</td>
<td>Price</td>
<td>Quantity</td>
<td>Delta</td>
<td>House</td>
</tr>
<tr id = 'inputRow0' name = 'inputRow0' style='display:table-row'>
<td>
<select onchange='testChanges(0)' name='spreadType[]' id='spreadType0'>
<option value=''>
<option value='Spread'>Spread
<option value='Fly'>Fly
<option value='Straddle'>Straddle
<option value='Strangle'>Strangle
<option value='Tree'>Tree
<option value='Condor'>Condor
<option value='Ladder'>Ladder
</select>
</td>
<td>
<select name='optionFuture[]' id='optionFuture0'>
<option value=''>
<option value='Option'>Option
<option value='Future'>Future
</select>
</td>
<td>
<select name='year[]' id='year0'>
<option value=''>
<option value='Front'>Front
<option value='Short'>Short
<option value='Red'>Red
<option value='Green'>Green
<option value='Blue'>Blue
<option value='Gold'>Gold
</select>
</td>
<td>
<select name='month[]' id='month0'>
<option value=''>
<option value='January'>January
<option value='February'>February
<option value='March'>March
<option value='April'>April
<option value='May'>May
<option value='June'>June
<option value='July'>July
<option value='August'>August
<option value='September'>September
<option value='October'>October
<option value='November'>November
<option value='December'>December
</select>
</td>
<td>
<select name='strike[]' id='strike0'>
<option value=''>
<option value='100'>100
<option value='99'>99
<option value='98'>98
<option value='97'>97
<option value='96'>96
</select>
</td>
<td>
<select onchange='testChanges()' name='callPut[]' id='callPut0'>
<option value=''>
<option value='Call'>Call
<option value='Put'>Put
</select>
</td>
<td>
<select name='buySell[]' id='buySell0'>
<option value=''>
<option value='Buy'>Buy
<option value='Sell'>Sell
</select>
</td>
<td>
<input type='text' name='price[]' id='price0' size='9'/>
</td>
<td>
<input type='text' name='quantity[]' id='quantity0' size='9'/>
</td>
<td>
<input type='text' name='delta[]' id='delta0' size='9'/>
</td>
<td>
<select onchange='testChanges()' name='house[]' id='house0'>
<option value=''>
<option value='001 - First Options'>001 - First Options
<option value='020 - Bache'>020 - Bache
<option value='033 - FC Stone'>033 - FC Stone
<option value='Other'>Other
</select>
</td>
</tr>
<tr id = 'otherRow0' name = 'otherRow' style='display:none'>
<td><input type='text' name='spreadFormation[]' id='spreadFormation0' size='9'/></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type='text' name='otherHouse[]' id='otherHouse0' size='22'/></td>
</tr>";
$baseLabel = 'labelRow';
$baseInput = 'inputRow';
$baseStr = 'otherRow';
$baseOptionFuture = 'optionFuture';
$baseYear = 'year';
$baseMonth = 'month';
$baseStrike = 'strike';
$baseCallPut = 'callPut';
$baseBuySell = 'buySell';
$baseSpreadType = 'spreadType';
$basePrice = 'price';
$baseQuantity = 'quantity';
$baseDelta = 'delta';
$baseHouse = 'house';
$baseSpreadFormation = 'spreadFormation';
$baseOtherHouse = 'otherHouse';
for ( $i = 1; $i < 20; $i++ )
{
$labelId = $baseLabel.$i;
$inputRow = $baseInput.$i;
$otherId = $baseStr.$i;
$optionFutureId = $baseOptionFuture.$i;
$yearId = $baseYear.$i;
$monthId = $baseMonth.$i;
$strikeId = $baseStrike.$i;
$callPutId = $baseCallPut.$i;
$buySellId = $baseBuySell.$i;
$spreadTypeId = $baseSpreadType.$i;
$priceId = $basePrice.$i;
$quantityId = $baseQuantity.$i;
$deltaId = $baseDelta.$i;
$houseId = $baseHouse.$i;
$spreadFormationId = $baseSpreadFormation.$i;
$otherHouseId = $baseOtherHouse.$i;
echo"
<tr id = $labelId name = $labelId style='display:none'>
<td>Spread Type</td>
<td>Option/Future</td>
<td>Year</td>
<td>Month</td>
<td>Strike</td>
<td>Call/Put</td>
<td>Buy/Sell</td>
<td>Price</td>
<td>Quantity</td>
<td>Delta</td>
<td>House</td>
</tr>
<tr id = $inputRow name = $inputRow style='display:none'>
<td>
<select onchange='testChanges()' name='spreadType[]' id='spreadType0'>
<option value=''>
<option value='Spread'>Spread
<option value='Fly'>Fly
<option value='Straddle'>Straddle
<option value='Strangle'>Strangle
<option value='Tree'>Tree
<option value='Condor'>Condor
<option value='Ladder'>Ladder
</select>
</td>
<td>
<select name='optionFuture[]' id=$optionFutureId>
<option value=''>
<option value='Option'>Option
<option value='Future'>Future
</select>
</td>
<td>
<select name='year[]' id=$yearId>
<option value=''>
<option value='Front'>Front
<option value='Short'>Short
<option value='Red'>Red
<option value='Green'>Green
<option value='Blue'>Blue
<option value='Gold'>Gold
</select>
</td>
<td>
<select name='month[]' id=$monthId>
<option value=''>
<option value='January'>January
<option value='February'>February
<option value='March'>March
<option value='April'>April
<option value='May'>May
<option value='June'>June
<option value='July'>July
<option value='August'>August
<option value='September'>September
<option value='October'>October
<option value='November'>November
<option value='December'>December
</select>
</td>
<td>
<select name='strike[]' id=$strikeId>
<option value=''>
<option value='100'>100
<option value='99'>99
<option value='98'>98
<option value='97'>97
<option value='96'>96
</select>
</td>
<td>
<select onchange='testChanges()' name='callPut[]' id=$callPutId>
<option value=''>
<option value='Call'>Call
<option value='Put'>Put
</select>
</td>
<td>
<select name='buySell[]' id=$buySellId>
<option value=''>
<option value='Buy'>Buy
<option value='Sell'>Sell
</select>
</td>
<td>
<input type='text' name='price[]' id=$priceId size='9'/>
</td>
<td>
<input type='text' name='quantity[]' id=$quantityId size='9'/>
</td>
<td>
<input type='text' name='delta[]' id=$deltaId size='9'/>
</td>
<td>
<select onchange='testChanges()' name='house[]' id = $houseId>
<option value=''>
<option value='001 - First Options'>001 - First Options
<option value='020 - Bache'>020 - Bache
<option value='033 - FC Stone'>033 - FC Stone
<option value='Other'>Other
</select>
</td>
</tr>
<tr id = $otherId name = $otherId style='display:none'>
<td><input type='text' name='spreadFormation[]' id=$spreadFormationId size='9'/></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type='text' name='otherHouse[]' id=$otherHouseId size='22'/></td>
</tr>
";
}
echo "</table>
<input id='submitButton' type='submit' name='submit' type='submit' value='submit' />
</form>";
?>

Im use to Zend, so this is how I usually do it, isntead of echoing html, just type out the html, and then use <?for:?> syntax. Like the following.
<table id='inputTable'>
<form id='trade' name='trade' method='post' action=''>
<tr id = 'labelRow0' name = 'labelRow0' style='display:table-row'>
<td>Spread Type</td>
<td>Option/Future</td>
<td>Year</td>
<td>Month</td>
<td>Strike</td>
<td>Call/Put</td>
<td>Buy/Sell</td>
<td>Price</td>
<td>Quantity</td>
<td>Delta</td>
<td>House</td>
</tr>
<tr id = 'inputRow0' name = 'inputRow0' style='display:table-row'>
<td>
<select onchange='testChanges()' name='spreadType[]' id='spreadType0'>
<option value=''>
<option value='Spread'>Spread
<option value='Fly'>Fly
<option value='Straddle'>Straddle
<option value='Strangle'>Strangle
<option value='Tree'>Tree
<option value='Condor'>Condor
<option value='Ladder'>Ladder
</select>
</td>
<td>
<select name='optionFuture[]' id='optionFuture0'>
<option value=''>
<option value='Option'>Option
<option value='Future'>Future
</select>
</td>
<td>
<select name='year[]' id='year0'>
<option value=''>
<option value='Front'>Front
<option value='Short'>Short
<option value='Red'>Red
<option value='Green'>Green
<option value='Blue'>Blue
<option value='Gold'>Gold
</select>
</td>
<td>
<select name='month[]' id='month0'>
<option value=''>
<option value='January'>January
<option value='February'>February
<option value='March'>March
<option value='April'>April
<option value='May'>May
<option value='June'>June
<option value='July'>July
<option value='August'>August
<option value='September'>September
<option value='October'>October
<option value='November'>November
<option value='December'>December
</select>
</td>
<td>
<select name='strike[]' id='strike0'>
<option value=''>
<option value='100'>100
<option value='99'>99
<option value='98'>98
<option value='97'>97
<option value='96'>96
</select>
</td>
<td>
<select onchange='testChanges()' name='callPut[]' id='callPut0'>
<option value=''>
<option value='Call'>Call
<option value='Put'>Put
</select>
</td>
<td>
<select name='buySell[]' id='buySell0'>
<option value=''>
<option value='Buy'>Buy
<option value='Sell'>Sell
</select>
</td>
<td>
<input type='text' name='price[]' id='price0' size='9'/>
</td>
<td>
<input type='text' name='quantity[]' id='quantity0' size='9'/>
</td>
<td>
<input type='text' name='delta[]' id='delta0' size='9'/>
</td>
<td>
<select onchange='testChanges()' name='house[]' id='house0'>
<option value=''>
<option value='001 - First Options'>001 - First Options
<option value='020 - Bache'>020 - Bache
<option value='033 - FC Stone'>033 - FC Stone
<option value='Other'>Other
</select>
</td>
</tr>
<tr id = 'otherRow0' name = 'otherRow' style='display:none'>
<td><input type='text' name='spreadFormation[]' id='spreadFormation0' size='9'/></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type='text' name='otherHouse[]' id='otherHouse0' size='22'/></td>
</tr>";
<?php
$baseLabel = 'labelRow';
$baseInput = 'inputRow';
$baseStr = 'otherRow';
$baseOptionFuture = 'optionFuture';
$baseYear = 'year';
$baseMonth = 'month';
$baseStrike = 'strike';
$baseCallPut = 'callPut';
$baseBuySell = 'buySell';
$baseSpreadType = 'spreadType';
$basePrice = 'price';
$baseQuantity = 'quantity';
$baseDelta = 'delta';
$baseHouse = 'house';
$baseSpreadFormation = 'spreadFormation';
$baseOtherHouse = 'otherHouse';
?>
<?php for ( $i = 1; $i < 20; $i++ ) :?>
<?php
$labelId = $baseLabel.$i;
$inputRow = $baseInput.$i;
$otherId = $baseStr.$i;
$optionFutureId = $baseOptionFuture.$i;
$yearId = $baseYear.$i;
$monthId = $baseMonth.$i;
$strikeId = $baseStrike.$i;
$callPutId = $baseCallPut.$i;
$buySellId = $baseBuySell.$i;
$spreadTypeId = $baseSpreadType.$i;
$priceId = $basePrice.$i;
$quantityId = $baseQuantity.$i;
$deltaId = $baseDelta.$i;
$houseId = $baseHouse.$i;
$spreadFormationId = $baseSpreadFormation.$i;
$otherHouseId = $baseOtherHouse.$i;
?>
<tr id = <?= $labelId ?> name = <?= $labelId ?>style='display:none'>
<td>Spread Type</td>
<td>Option/Future</td>
<td>Year</td>
<td>Month</td>
<td>Strike</td>
<td>Call/Put</td>
<td>Buy/Sell</td>
<td>Price</td>
<td>Quantity</td>
<td>Delta</td>
<td>House</td>
</tr>
<tr id = <?= $inputRow ?> name = <?= $inputRow ?>style='display:none'>
<td>
<select onchange='testChanges()' name='spreadType[]' id='spreadType0'>
<option value=''>
<option value='Spread'>Spread
<option value='Fly'>Fly
<option value='Straddle'>Straddle
<option value='Strangle'>Strangle
<option value='Tree'>Tree
<option value='Condor'>Condor
<option value='Ladder'>Ladder
</select>
</td>
<td>
<select name='optionFuture[]' id=<?= $optionFutureId ?>>
<option value=''>
<option value='Option'>Option
<option value='Future'>Future
</select>
</td>
<td>
<select name='year[]' id=<?= $yearId ?>>
<option value=''>
<option value='Front'>Front
<option value='Short'>Short
<option value='Red'>Red
<option value='Green'>Green
<option value='Blue'>Blue
<option value='Gold'>Gold
</select>
</td>
<td>
<select name='month[]' id=<?= $monthId ?>>
<option value=''>
<option value='January'>January
<option value='February'>February
<option value='March'>March
<option value='April'>April
<option value='May'>May
<option value='June'>June
<option value='July'>July
<option value='August'>August
<option value='September'>September
<option value='October'>October
<option value='November'>November
<option value='December'>December
</select>
</td>
<td>
<select name='strike[]' id=<?= $strikeId ?>>
<option value=''>
<option value='100'>100
<option value='99'>99
<option value='98'>98
<option value='97'>97
<option value='96'>96
</select>
</td>
<td>
<select onchange='testChanges(<?= $i ?>)' name='callPut[]' id= <?= $callPutId ?>>
<option value=''>
<option value='Call'>Call
<option value='Put'>Put
</select>
</td>
<td>
<select name='buySell[]' id=<?= $buySellId ?>>
<option value=''>
<option value='Buy'>Buy
<option value='Sell'>Sell
</select>
</td>
<td>
<input type='text' name='price[]' id=<?= $priceId ?> size='9'/>
</td>
<td>
<input type='text' name='quantity[]' id= <?= $quantityId ?> size='9'/>
</td>
<td>
<input type='text' name='delta[]' id= <?= $deltaId ?> size='9'/>
</td>
<td>
<select onchange='testChanges(<?= $i ?>)' name='house[]' id = <?= $houseId ?>>
<option value=''>
<option value='001 - First Options'>001 - First Options
<option value='020 - Bache'>020 - Bache
<option value='033 - FC Stone'>033 - FC Stone
<option value='Other'>Other
</select>
</td>
</tr>
<tr id = $otherId name = $otherId style='display:none'>
<td><input type='text' name='spreadFormation[]' id= <?= $spreadFormationId ?> size='9'/></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type='text' name='otherHouse[]' id= <?= $otherHouseId ?> size='22'/></td>
</tr>
<? endfor; ?>
</table>
<input id='submitButton' type='submit' name='submit' type='submit' value='submit' />
</form>

Continuation of other answer:
Clear up your code by using shorthands.
Then inject the loop number <?= $i ?> indication row number
Remember <?= is the same as echo
Bunch of different shorthands
IF/ELSE
<? if(true): ?>
<? else: ?>
<? endif; ?>
WHILE
<?php while (expr):?>
statement
...
<?php endwhile;?>
<?php for($i = 5; $i < 20; $i++):?>
<b> Number : <?= $i ?> ?>
<?php endfor; ?>
</body>

Categories