Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 19 of 19
  1. #16
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    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.

  2. #17
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by Old Pedant View Post
    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?

  3. #18
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    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
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  4. Users who have thanked felgall for this post:

    Old Pedant (02-28-2013)

  5. #19
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,198
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    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.
    Last edited by Old Pedant; 02-28-2013 at 09:42 PM.
    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.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •