Adding HTML using JS - Page 2

Old Pedant · 02-28-2013, 07:49 PM

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>

xelawho · 02-28-2013, 08:30 PM

Quote:

Originally Posted by Old Pedant

Older MSIE doesn't allow you to add a type to an <input> created via document.createElement in the manner done here.

just curious... wouldn't the way around that be

Code:

var btn = document.createElement("button");
//etc

or am I looking at the wrong bit of code?

felgall · 02-28-2013, 08:48 PM

Quote:

Originally Posted by Old Pedant

SOlder MSIE doesn't allow you to add a type to an <input> created via document.createElement in the manner done here.

Are you sure you're not getting the type and name attributes mixed up?

IE 8 and earlier will allow you to assign a type to an input field that was created using createElement but only allow you to set the value once. If you want to change the type in those browsers you have to swap out the input field and replace it with a new field that has the new type assigned to it - for example http://javascriptexample.net/domform08.php

IE 8 and earlier do not allow you to add a name attribute to an input field that has been created using createElement. You have to use a special proprietary version of createElement to add the name during the create - for example http://javascriptexample.net/domform06.php

Old Pedant · 02-28-2013, 09:38 PM

Name. I meant name. Been so long since I worried about it I forgot which it was. SORRY!

Thanks, Felgall!

And that also answers your question, Xelawho, if somewhat indirectly. button vs. input wouldn't matter: still couldn't give a name dynamically. Actually, the button doesn't need a name, so the problem applies to all the other elements.