Add new combo box to new row in form table

[adrianjohnson]

Ok, I hope I explain this properly.

I have a form, with a table inside. The table has a header row, and 1 row where the user can insert data. If the user needs another row, they click a button and a row is added using javascript.

However, the row itself has a combo box, and I'd like the combo box to be populated with "Yes" and "No" when the new row is created.

Part of the javascript to add the row is ...

function addRowToTable()
{
  var tbl = document.getElementById('tblInvoice');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);

  // Loop through and add the stuff to the cells.
  var cellQTY = row.insertCell(0);
  var el = document.createElement('input');
  el.setAttribute('type', 'text');
  el.setAttribute('name', 'tQTY' + iteration);
  el.setAttribute('class', 'TinyTextBox');
  cellQTY.appendChild(el);

  var cellVAT = row.insertCell(1);
  var el = document.createElement('select');
  el.setAttribute('size', '1');
  el.setAttribute('name', 'cmbVAT' + iteration);
  el.setAttribute('class', 'ComboBox');
  el.setAttribute('option', 'Yes');
  el.setAttribute('option', 'No');
  cellVAT.appendChild(el);
}

... and the HTML code is ...

<table border="0" width="95%" id="tblInvoice">
          <tr>
            <td valign="top" width="100">Qty:</td>
            <td valign="top">Description:</td>
            <td valign="top">Unit Price:</td>
            <td valign="top" width="100">Apply VAT?:</td>
            <td align="center" width="100"><input type="button" value="+" name="btnAddRow" class="Button" onclick="addRowToTable();"></td>
          </tr>
          <tr>
            <td valign="top" width="100"><input type="text" name="tQTY1" class="TinyTextBox"></td>
            <td valign="top"><input type="text" name="tDesc1" class="TextBox"></td>
            <td valign="top"><input type="text" name="tPrice1" class="SmallTextBox"></td>
            <td valign="top" width="100">
              <select size="1" name="cmbVAT" class="ComboBox">
                <option>Yes</option>
                <option>No</option>
              </select>
            </td>
            <td valign="top" width="100">&nbsp;</td>
          </tr>
        </table>

The code I've removed from the addRowToTable function is simply the bits to add the other fields, but as they're all text boxes I thought I'd remove the duplicated code.

So, has anyone got any ideas. I'm nearly there, I think, so I just need this little bit.

Thanks,

Adrian Johnson

 

[BabyJeffy]

Check out these two urls:

http://www.w3schools.com/htmldom/dom_obj_select.asp

http://www.w3schools.com/htmldom/dom_obj_option.asp

One shows you how to create a <select> and the other how to create <option> elements (and select them etc). I think that's how you could solve this!

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[adrianjohnson]

I've looked at those examples, and tried getting stuff from them, but not having much success.

My code is now:

var cellVAT = row.insertCell(3);
//var el = document.createElement('option');
var el = document.createElement('select');
el.setAttribute('size', '1');
el.setAttribute('name', 'cmbVAT' + iteration);
el.setAttribute('Class', 'ComboBox');
//el.value = "Yes";
//document.frmInv.tblInvoice.cmbVAT+iteration=new Option("Yes");
//document.frmInv.tblInvoice.cmbname=new Option("Yes");
//document.frmInv
//el.setAttribute('Option', 'Yes');
el.add('Yes');
//el.setAttribute('option', 'No');
cellVAT.appendChild(el);

Any more ideas?

Thanks,

Adrian