form row creation

[dillausky]

In the process of creating a form where people will input products they want appraised, only problem is that I dont know how many products they may have.  Each row contains 5-6 text fields for them to input info about the product. 

 

What I would like to do is make it so that the page starts with just one or two rows.  As soon as they enter information into the first row, it creates another row, and so on until they dont have any more info to enter.  No clue how to go about writing something like that though  ???

 

Any help would be appreciated

[Dragen]

try something like this.. it's a code I found and have edited it slightly for my own needs:

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

function addInput() {
  if (arrInput.length < 1) {
  arrInput.push(arrInput.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 "<input type='text' name='input"+ id +"' id='input"+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br />";
}

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

 

then have two buttons like this:

<a href="javascript:addInput()">add row</a><br />
<a href="javascript:deleteInput()">remove row</a>

 

Give it a try and see what you get