PDA

Click to See Complete Forum and Search --> : Grid like input display

Melannie
September 21st, 2005, 03:56 PM
Hi!

I got this script: http://javascript.internet.com/forms/adding-html-controls.html

And i want to do a multiple input with this value (name, lastname, town)
I have a problem i don't know how to kept the display of my value.

someone can help me ?

Thanks!

Mel.


My code:

<html>
<head>
<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Husay :: http://www.communitxt.net */

var arrInput = new Array(0);
var arrInputValue = new Array(0);

function addInput() {
//arrInput.push(createInput(arrInput.length));
arrInput.push(arrInput.length);
//arrInputValue.push(arrInputValue.length);
arrInputValue.push("");
display();
}

function display() {
document.getElementById('parah').innerHTML="";
for (intI=0;intI<arrInput.length;intI++) {
document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
}
}

function saveValue(intId,strValue) {
arrInputValue[intId]=strValue;
}

function createInput(id,value) {
return "<tr><td><input type='text' name='name"+intI+"' onChange='javascript:saveValue1("+intI+",this.value)' value='"+ value +"'></td><td><input type='text' name='lastname"+intI+"' onChange='javascript:saveValue2("+intI+",this.value)' value='"+ value +"'></td><td><input type='text' name='town"+intI+"' onChange='javascript:saveValue3("+intI+",this.value)' value='"+ value +"'></td></tr>";
}

function deleteInput() {
if (arrInput.length > 0) {
arrInput.pop();
arrInputValue.pop();
}
display();
}

// End -->
</script>

</head>

<body>
<form method="post" action="##" enctype="multipart/form-data">
<table border="1">
<tr>
<td>name</td><td>lastname</td><td>town</td>
</tr>
<tbody id="parah"></tbody>

</table>
<input type="submit" value="GO"><br>
</form>
<a href="javascript:addInput()">Add row</a><br>
</body>
</html>
PeejAvery
September 21st, 2005, 05:56 PM
It is because there is only one array to save one textbox in the original code. You have still one array but now three textboxes. Create two more arrays so that the data is stored.
Melannie
September 21st, 2005, 06:30 PM
Thanks for the answer...
I'm not pretty good with array...
Can you give me an example. ?
Vanny
September 21st, 2005, 07:11 PM
You could use an array inside an array, or 2D array.

// Declares Array
var aItem = new Array();

// Array Items
aItem[0] = new Array('name', 'lastname','town')
aItem[1] = new Array('bill', 'smith','sydney')
aItem[2] = new Array('john', 'brown','melbourne')


to retrieve information you would need "aItem[0][2]", which would return town.

I dont know if that helps at all.
Melannie
September 22nd, 2005, 02:10 PM
Hi!

I got this script... and modify it... It's woking fine now...
Can someone tell me how to add ARRAY in this script...
I try... But i fail...

thanks!

Mel.

<script language="javascript">
var gRowId = 1;


function delRow(button)
{
var row = button.parentNode.parentNode;
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
tbody.removeChild(row);
}

function addRow()
{
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];

var row = document.createElement('TR');

var cell1 = document.createElement('TD');
var cell2 = document.createElement('TD');
var cell3 = document.createElement('TD');
var cell4 = document.createElement('TD');
var cell5 = document.createElement('TD');

var inp1 = document.createElement('INPUT');
var inp2 = document.createElement('INPUT');
var inp3 = document.createElement('INPUT');
var inp4 = document.createElement('INPUT');
var inp5 = document.createElement('INPUT');


inp1.setAttribute('type','text');
inp1.setAttribute('name','name');
inp1.setAttribute('value','');
inp2.setAttribute('type','text');
inp2.setAttribute('name','lastname');
inp2.setAttribute('value','');
inp3.setAttribute('type','text');
inp3.setAttribute('name','town');
inp3.setAttribute('value','');
inp4.setAttribute('type','button');
inp4.setAttribute('value','erase');
inp4.onclick=function(){delRow(this);}
inp5.setAttribute('type','hidden');
inp5.setAttribute('name','total');
inp5.setAttribute('value', gRowId);

cell1.appendChild(inp5);
cell2.appendChild(inp1);
cell3.appendChild(inp2);
cell4.appendChild(inp3);
cell5.appendChild(inp4);

row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);

tbody.appendChild(row);

gRowId++;
}
</script>


<form name="myform" method="post" action="x.cfm">
<table id="table1">
<tbody>
<tr>
<th></th><th>name</th><th>lastname</th><th>town</th><th></th>
</tr>
<tr>
<th></th><th><input type="text" name="name"></th><th><input type="text" name="lastname"></th><th><input type="text" name="town"></th><th></th>
</tr>
</tbody>
</table>
<input type="button" value="Add row" onClick="addRow();">
<input type="submit" name="submit" value="go">
</form>