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.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to add Html code dynamically to a web form

    Hi!

    I am trying to add Html code dynamically to my web form with a js function, but I can’t. I want to add a new row with columns and form objects, and I am trying to do it thus:

    The js function:
    Code:
    function check_Prod() {  
      
      var prod = document.form_newProd.product.value
    
        switch(prod) {
    	
    	  case "22": 
    	    var otherProd = document.getElementById('others');
            otherProd.innerHTML = "<tr><td height='30' colspan='2' align='center'></td><td colspan='4'><span id='otherP' class='letter4'><span id='ast' class='RedAst'>*</span>&nbsp;Specify the Product:</span>&nbsp; <input type='text' name='writeProd' class='letter1'></td></tr>";
            break; 
    		
    	  case "27": 
    	    var otherProd = document.getElementById('others');
            otherProd.innerHTML = "<tr><td height='30' colspan='2' align='center'></td><td colspan='4'><span id='otherP' class='letter4'><span id='ast' class='RedAst'>*</span>&nbsp;Specify the Product:</span>&nbsp; <input type='text' name='writeProd' class='letter1'></td></tr>";
            break; 
    
     ...
    
          default:  
            var otherProd = document.getElementById('others');
            otherProd.innerHTML = "";   
    	
    	}
        	 
     }

    The ‘product’ select object:
    Code:
    <select name="product" onChange="return check_Prod()"></select>
    And inside the page body:
    Code:
                ...
                <td><input type=”text” name="type"></td>
              </tr>
    	
    	   <span id="others"></span>
     
              <tr> 
                <td height="30" align="left" valign="middle" class="letter4"><span class="redAst">*</span>&nbsp;Offer Title:&nbsp;</td>
    
    ...
    None error appears, but the Html code is not added, simply nothing happens..
    What is wrong?

    Thank you

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    check if options' values exist (I presume you have only text in options)

    If not, you may use

    var prod = document.form_newProd.product.options[document.form_newProd.product.selectedIndex].text

    instead of

    document.form_newProd.product.value
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, I have text and values in 'product' select.

    I have seen that if I put in the body:
    Code:
    ...
                <td><input type=”text” name="type"></td>
              </tr>
    
    	<tr>
                      <td><span id="others"></span></td>
                 </tr>
    
              <tr> 
                <td height="30" align="left" valign="middle" class="letter4"><span class="redAst">*</span>&nbsp;Offer Title:&nbsp;</td>
    
    ...
    Instead of:
    Code:
    ...
                <td><input type=”text” name="type"></td>
              </tr>
    
    	<span id="others"></span>
    
              <tr> 
                <td height="30" align="left" valign="middle" class="letter4"><span class="redAst">*</span>&nbsp;Offer Title:&nbsp;</td>
    
    ...
    Then the Html appears in the form, but I don' t want to add previously a row with columns to my web form...

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You can only add table rows dynamically in the "invisible" <tbody> tag.

    This is the actual structure of a table.

    <table>
    <tbody>
    <tr><td></td></tr>
    <tr><td></td></tr>
    </tbody>
    </table>

    If you don't put <tbody> tag, the browser adds it internally.

    But to add row in between existing rows, you need to use DOM, you won't be able to do it via innerHTML unless you append it at the end of the rows.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Then, to expand an existing table with a new row (with form elements) dynamically, I need to use DOM?
    If so, if I use DOM, almost all the web browsers will be able to support this functionality?

    For example:
    Code:
    ...
    case "22": 
     var otherProd = document.getElementById('others');
     otherProd.createElement("<tr><td height='30' colspan='2' align='center'></td><td colspan='4'><span id='otherP' class='letter4'><span id='ast' class='RedAst'>*</span>&nbsp;Specify the Product:</span>&nbsp; <input type='text' name='writeProd' class='letter1'></td></tr>");  
            break; 
    ...
    But this code doesn' t work..

  • #6
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The document.createElement() method only creates one element at a time; you've also got the wrong syntax for browsers other than IE. As far as I know, all modern browsers (Mozilla 1+, IE 6+, Opera) support the three methods you'll need: document.createElement(), document.createTextNode(), and {element}.appendChild().

    Use the document.createElement({tagName}) method to create any element you need, in the order they should appear in the document; when each element is configured completely (including all of its children), add it to its containing element. You can append text nodes at the same time you create them, like this: {element}.appendChild(document.createTextNode('text to use')). Note: DOM operations are faster on elements which exist outside the page structure at least temporarily. Here's a good order of execution for you:
    - Create the row
    - Create the first cell
    - Configure the first cell
    - Create then configure its children, outermost to innermost
    - Append the children to their parents, innermost to outermost
    - Append the first cell to the row
    - Create the second cell
    - Create then configure its children, outermost to innermost
    - Append the children to their parents, innermost to outermost
    - Append the second cell to the row
    (Repeat for more cells)
    - Append the row to its tbody

    I'd recommend that you begin using the tbody tag; it can be used more than once in any table, giving a good way to group rows for reference and scripting. Where you need to insert a row between other rows, you can separate the two by placing them in separate tbody tags, then appendChild() onto the first of the two tbody elements.

    Now you'll find in IE that certain attributes of certain elements cannot be configured after creation. This includes input type, name, and ID; table-cell colspan and rowspan; and certain others. In those cases where you need an input or a td with a colspan, you should write a wrapper that sniffs (shudder)for IE and uses its proprietary method, which resembles what you've got below: document.createElement('<tag attribute="value"></tag>') -- but remember, only one element at a time can be created.


    Does it show that I've been working with this myself recently?

  • #7
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's interesting.. but it is very complex..

    Try to help me, please, in my case I have put:
    Code:
    ...
    	  case "22": 
            var tr = document.createElement("<tr>")
            tr = document.createElement("<td height='30' colspan='2' align='center'></td>")
            tr =
    ' What else..?

  • #8
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by cesark
    That's interesting.. but it is very complex..
    Yes, of course it is. Can you imagine a web form doing this in 1997?


    Code:
    case "22": 
       var tr = document.createElement('tr')
       var td;
       if (typeof document.all == 'undefined') { // NOT IE
          td = document.createElement(td);
          td.colspan = 2;
          td.style.textAlign = 'center';
          td.style.height = '30px';
       } else { // IE
          td = document.createElement('<td height="30" colspan="2" align="center"></td>');
       }
       var span = document.createElement(span);
       span.id = 'spanID';
       td.appendChild(span);
       // finish the cell here
       tr.appendChild(td);
       // repeat for new cells
       // at end use this line - someTBody is ...some tbody element
       someTBody.appendChild(tr);
    You were using the same variable for both the row and the cell; thus you were overwriting the row with the cell. Each element must have a unique variable, unless it's already been added to the document and need not be referenced again; in that case, feel free to reuse the variable.

    Does that help?

  • #9
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Choopernickel !, yes it helps a lot.

    I have tried to write the complete added row.. I am sure that there are a lot of mistakes, but here is the first attempt:
    Code:
      
     function check_Prod() {    
      
      var prod = document.form_newProd.product.value
    
        switch(prod) {
    	
    	  case "22": 
    	
         var tbody = document.createElement('tbody');
             var tr = document.createElement('tr')
          var td1;
         if (typeof document.all == 'undefined') { // NOT IE
            td1 = document.createElement('td');
            td1.colspan = 2;
            td1.style.textAlign = 'center';
            td1.style.height = '30px';
       } else { // IE
          td1 = document.createElement('<td height="30" colspan="2" align="center"></td>');
       }
       var span = document.getElementById('others');
       td1.appendChild(span);
       // finish the cell here
       tr.appendChild(td1);
       tbody.appendChild(span);
       
       
    
           // The second td
           var td2;
          if (typeof document.all == 'undefined') { // NOT IE
            td2 = document.createElement('td');
            td2.colspan = 4;
    		
             } else { // IE
          td2 = document.createElement('<td colspan="4"></td>');
       }
    
       td2.appendChild(span);
       // finish the second cell here
       tr.appendChild(td2);
    
    
    
    
           // The first span element into the second td created above
           var span1;
          if (typeof document.all == 'undefined') { // NOT IE
            span1 = document.createElement('span');
            span1.id = 'otherP';
            span1.setAttribute('class','letter4'); 
             } else { // IE
          span1 = document.createElement('<span id="otherP" class="letter4"></span>');
       }
    
       span1.appendChild(span);
       // finish the first span here
       span1.appendChild(td2);
    
      
      
      
      
      
             // The second span element into the span1 created above
           var span2;
          if (typeof document.all == 'undefined') { // NOT IE
            span2 = document.createElement('span');
            span2.id = 'ast';
            span2.setAttribute('class','RedAst'); 
            span2.appendChild(document.createTextNode('*')) 
             } else { // IE
          span2 = document.createElement('<span id="ast" class="RedAst">*</span>');
       }
    
       span2.appendChild(span);
       // finish the second span here
       span2.appendChild(span1);
       span1.appendChild(document.createTextNode('&nbsp;Specify the Product:'))
    
     
      
    
    
    
             // The input text element into the second td
           var inputText;
          if (typeof document.all == 'undefined') { // NOT IE
            td2.appendChild(document.createTextNode('&nbsp;')) 
            inputText = document.createElement('input');
            inputText.setAttribute('type','text');
            inputText.name = 'writeProd';
            inputText.setAttribute('class','letter1');  
             } else { // IE
          inputText = document.createElement('&nbsp; <input type="text" name="writeProd" class="letter1">');
       }
    
       inputText.appendChild(span);
       // finish the input text here
       inputText.appendChild(td2);
       
    
       
       tbody.appendChild(tr);
       break;      
     
    ...
    The row added should be: "<tr><td height='30' colspan='2' align='center'></td><td colspan='4'><span id='otherP' class='letter4'><span id='ast' class='RedAst'>*</span>&nbsp;Specify the Product:</span>&nbsp; <input type='text' name='writeProd' class='letter1'></td></tr>"
    Last edited by cesark; 07-15-2004 at 11:57 PM.

  • #10
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If so, if I use DOM, almost all the web browsers will be able to support this functionality?

    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #11
    New Coder
    Join Date
    Nov 2003
    Location
    Barcelona
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    I am very interested in almost all the web browsers be able to support this functionality, but how can I do it? I was told that with 'innerHTML' it is impossible..

    My target is to be able to generate html code dynamically. With 'innerHTML' I only can add Html code inside an existing cell or column, Isn' t it? But how can I expand an existing table with new elements, or creating a new table on the page?

    Do you know al least what extended and used resources exists for these intentions?


  •  

    Posting Permissions

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