View Single Post
Old 02-28-2013, 07:49 PM   PM User | #16
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,238
Thanks: 59
Thanked 3,998 Times in 3,967 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
Since you say you handed it in already...

Okay...this code should work in all except older MSIE. (Older MSIE doesn't allow you to add a type to an <input> created via document.createElement in the manner done here.) It works in MSIE 9 and I believe it works in MSIE 8, but not sure.

Code:
<!DOCTYPE html>
<html>
<body>
<div>
    <!-- named forms are OBSOLETE! you must use ID in modern HTML -->
    <form id="OrderForm" action="mailto:RD136723@ghs.truropenwith.ac.uk" method="post">
        <table id="theTable">
        <tr>
            <th>#</th><th>Flavour</th><th>Qty</th><th>Price</th><th>More?</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <select name="Flavour1">
                    <option value="None">Please choose a flavour</option>
                    <option value="RC&O">Red Cherry & Orange</option>
                    <option value="BR&GO">Blue Raspberry & Green Apple</option>
                    <option value="P&RC">Pineapple & Red Cherry</option>
                    <option value="GA&RC">Green Apple & Red Cherry</option>
                    <option value="O&BR">Orange & Blue Raspberry</option>
                    <option value="P&O">Pineapple & Orange</option>
                    <option value="BR&RC">Blue Raspberry & Red Cherry</option>
                </select>
            </td>
            <td>
                <input type="text" name="Quantity1" value="1" size="1"></input>
            </td>
            <td>
                <input type="text" name="Price1" size="6" readonly></input>
            </td>
            <td>
                <input type="button" name="AddOne1" value="Add a row" />
            </td>
        </tr>
    </table>        
    </form>
</div>

<script type="text/javascript">
(
  function( ) /* anonymous master function */
  {
      var form = document.getElementById("OrderForm");
      var tbl  = document.getElementById("theTable");
      var rows = 1;
      
      form.AddOne1.onclick = addRow;
      var flavours = form.Flavour1;

      function addRow( )
      {
          ++rows; 
          var row = tbl.insertRow(-1);
 
          var cell0 = row.insertCell(-1);
          cell0.appendChild( document.createTextNode(rows) );
          
          var cell1 = row.insertCell(-1);
          var sel = document.createElement("select");
          sel.name = "Flavour" + rows;          
          for ( var s = 0; s < flavours.options.length; ++ s )
          {
              var opt = flavours.options[s];
              sel.options[s] = new Option( opt.text, opt.value );
          }
          cell1.appendChild( sel );

          var cell2 = row.insertCell(-1);
          var txt = document.createElement("input");
          txt.name = "Quantity" + rows;
          txt.value = "1";
          txt.size = 1;
          cell2.appendChild(txt);

          var cell3 = row.insertCell(-1);
          var txt2 = document.createElement("input");
          txt2.name = "Price" + rows;
          txt2.readOnly = true;
          txt2.size = 6;
          cell3.appendChild(txt2);

          var cell4 = row.insertCell(-1);
          var btn = document.createElement("input");
          btn.type = "button";
          btn.name = "AddOne" + rows;
          btn.value = "Add a row";
          btn.onclick = addRow;
          cell4.appendChild(btn);                 

      }

  } /* end master function */

)(); // self invoke master function */  
</script>

</body>
</html>
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is online now   Reply With Quote