I have taken several programming classes over the past couple of years, and recently started to try to learn javascript. I get the "big picture" logic of javascript, but am having trouble. Anyway, I am working on a form for internal company use. Basically it is an order form.
We will have a row in a form for the product being ordered. This row will look kind of like this:
Quantity Description 1st Color 2nd Color Unit Price Amount

The problem is this...for each order, we will have an undetermined number of products. Therefore, we will need a way to add a "row" to this form. I think the best way to do this would be with Ajax???

I have tried to search for ways to do this, but I feel like a big dummy. Can someone dumb down the process for doing this for me?
Thanks!

Not sure about what you want. If you want to create html elements dynamically you can use DOM. check if this is of any help

<script>
function addElement() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('val');
  var num = (document.getElementById('val').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = 'Text box'+num+': <input name="txt'+val+'">';
  ni.appendChild(newdiv);
}
</script>
<input type="hidden" value="0" id="val" />
<p><a href="#" onclick="addElement();">Add Some Elements</a></p>
<div id="myDiv"> </div>

Thanks for your help jito. I found this code example earlier, but am not really sure how to put it into my project.
This script does what I want, except I need to add form elements.
For example, if someone clicks the "Add some Elements", I need it to add a row of text boxes.

Here is my form so far:
http://motorxtremes.com/salesform.html
(I know there is a lot of work left to do)
When you scroll down to the unit information, I have 10 rows where a salesperson can enter a unit's information. Since I dont know how many items a person will order, I would like to let the salesperson add a "row" as they need them.
Does this make any sense??

you can add row of text boxes using the same method. As you have php script in back end just use the name attribute as an array like name='txtQty[]' to fetch the values.

<script>
function addElement() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('val');
  var num = (document.getElementById('val').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML='<label for="wf_Quantity" class="inlineLabel">Qty</label>';
  newdiv.innerHTML = '<span class="oneField"><label for="wf_Quantity" class="inlineLabel">Qty</label><input type="text" id="wf_Quantity" name="wf_Quantity[]" value="" size="2" class=""></span><span class="oneField"><label for="wf_Description" class="inlineLabel">Description</label><input type="text" id="wf_Description" name="wf_Description[]" value="" size="" class=""></span><span class="oneField"><label for="wf_1stColor" class="inlineLabel">1st Color</label><input type="text" id="wf_1stColor" name="wf_1stColor[]" value="" size="10" class=""></span><span class="oneField"><label for="wf_2ndColor" class="inlineLabel">2nd Color</label><input type="text" id="wf_2ndColor" name="wf_2ndColor[]" value="" size="10" class=""></span><span class="oneField"><label for="wf_UnitPrice" class="inlineLabel">Unit Price</label><input type="text" id="wf_UnitPrice" name="wf_UnitPrice[]" value="" size="10" class="validate-float"></span><span class="oneField"><label for="wf_Amount" class="inlineLabel">Amount</label><input type="text" id="wf_Amount" name="wf_Amount[]" value="" size="10" class="validate-float"></span>';
  ni.appendChild(newdiv);
}
</script>
<form name='myForm' action='#' method='POST'>
<input type="hidden" value="0" id="val" />
<p><a href="#" onclick="addElement();">+ Add products</a></p>
<div id="myDiv" class="inlineSection"></div>
</form>

That works! Thank you so much!!!




-talkupation added!