www.webdeveloper.com
Page 2 of 7 FirstFirst 1234 ... LastLast
Results 16 to 30 of 93

Thread: Using javascript to create table rows containing form elements

  1. #16
    Join Date
    Oct 2007
    Posts
    231
    KOR, could you post the new code here please? I would appreciate that. Good work! By the way, I really liked java.

    Thanks.

  2. #17
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    A basic example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    var clone;
    function cloneRow(){
    var rows=document.getElementById('mytab').getElementsByTagName('tr');
    var index=rows.length;
    clone=rows[index-1].cloneNode(true);
    var inputs=clone.getElementsByTagName('input'), inp, i=0 ;
    while(inp=inputs[i++]){
    inp.name=inp.name.replace(/\d/g,'')+(index+1);
    }
    }
    function addRow(){
    var tbo=document.getElementById('mytab').getElementsByTagName('tbody')[0];
    tbo.appendChild(clone);
    cloneRow();
    }
    onload=cloneRow;
    </script>
    </head>
    <body>
    <form>
    <table id="mytab">
    <tr>
    <td>Foo <input type="text" name="foo_1"></td>
    <td>Fee <input type="text" name="fee_1"></td>
    </tr>
    </table>
    <br>
    <input type="button" value="Add a new row" onclick="addRow()">
    </form>
    </body>
    </html>
    Last edited by Kor; 01-16-2008 at 05:16 AM.

  3. #18
    Join Date
    Jan 2008
    Posts
    40
    Thank you, this seems to work.

    Would adding some javascript that automatically makes a new input appear if a user types in the "foo" field mess up this? Would it be hard to do?

  4. #19
    Join Date
    Jan 2008
    Posts
    40
    i have a question about this. does it have to be in a table? right now it is triggered on 'tr' I see. What if I dont want the form in a table, is there anyway to define it otherwise?

  5. #20
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    If not a table, than probably in a div... It would not be much difference...

  6. #21
    Join Date
    Jan 2008
    Posts
    40
    Quote Originally Posted by Kor
    If not a table, than probably in a div... It would not be much difference...
    I tried doing a div before but nothing seems to happens? I was replacing the 'tr' with 'div'?

  7. #22
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    may I see your HTML? (or a significant part of it)

  8. #23
    Join Date
    Jan 2008
    Posts
    40
    Here is what I have...

    HTML Code:
    <html> 
    <head> 
    <title>Submit An Expense Request</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <meta http-equiv="Content-Style-Type" content="text/css"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript"> 
    <script type="text/javascript">
    var clone;
    function cloneRow(){
    var rows=document.getElementById('mytab').getElementsByTagName('tr');
    var index=rows.length;
    clone=rows[index-1].cloneNode(true);
    var inputs=clone.getElementsByTagName('input'), inp, i=0 ;
    while(inp=inputs[i++]){
    inp.name=inp.name.replace(/\d/g,'')+(index+1); }
    }
    function addRow(){
    var tbo=document.getElementById('mytab').getElementsByTagName('tbody')[0];
    tbo.appendChild(clone);
    cloneRow();
    }
    onload=cloneRow;
    </script>
    
    
    </head> 
    <body>
    <form id="mytab" action="?link=summary.php" method="post"> 
      <table border="0" cellspacing="0" cellpadding="0" width="100%"> 
        <tr>
          <input type="hidden" name="id[]" />
          <select name="department[]"> 
          <option selected>Department</option><option>Administration</option><option>Customer Service</option><option>Executive</option><option>Finance</option><option>I.T.</option><option>Marketing</option><option>Materials Management</option><option>Product Development</option><option>Selling</option>      </select>
          
          <select name="account[]"> 
          <option selected>Account</option><option>ADMIN CHARGES FOR LATE DELIVERIES & SHORTAGES</option><option>AUDIT FEES</option><option>BAD DEBT EXPENSE</option><option>BANK CHARGES</option><option>BANK PENALTY & INTEREST</option><option>CELLUAR PHONE</option><option>CONSULTANT SERVICES</option><option>CONVENTIONS/TRADE SHOWS</option><option>COPIER CHARGES</option><option>COURIER</option><option>CREDIT BUREAU CHARGES</option><option>DONATIONS</option><option>EDP COMMUNICATION</option><option>EDUCATION</option><option>EMPLOYEE UNIFORMS</option><option>FAX</option><option>FAX CHARGES</option><option>FOREIGN X - REALIZED</option><option>FORWARDING & DOC'N CHRG</option><option>HARDWARE EXPENSES</option><option>INTEREST INCOME</option><option>LEGAL FEES</option><option>LUNCH ROOM</option><option>MAIL ROOM</option><option>MEALS & ENTER. SALES</option><option>MEALS & ENTERTAINMENT</option><option>MEETINGS</option><option>MEMBERSHIPS & DUES</option><option>NUTRITIONAL ANALYSIS - R&D</option><option>OUTSIDE CONTRACTS</option><option>PENSION CONSULTING</option><option>PRODUCT TEST TRIALS - R&D</option><option>R&M BUILDING</option><option>R&M BUILDING (GENERAL)</option><option>R&M EDP HARDWARE</option><option>R&M EDP SOFTWARE</option><option>RECRUITING</option><option>RENT</option><option>SANITATION/CLEANING</option><option>SOFTWARE EXPENSE</option><option>SPECIAL EVENTS</option><option>SUBSCRIPTIONS</option><option>SUPPLIES - OFFICE</option><option>SUPPLIES - QUALITY SERVICE</option><option>SUPPLIES - R&D</option><option>SUPPLIES - SHIPPING</option><option>TELEPHONE</option><option>TEMPORARY HELP</option><option>TRAVEL</option><option>VEHICLES/MILEAGE/RENTALS</option>      </select>
          
          <br><br>Description (if required)<input type="text" name="description[]" value=" " />
          Amount<input type="text" name="amount[]" size="4" />
          GST<input type="text" name="gst[]" value="0" size="4" />
          PST<input type="text" name="pst[]" value="0" size="4" />
          Other Tax<input type="text" name="other_tax[]" value="0" size="4" />
          <br><br>Total<input type="text" name="total[]" size="4" />
          Currency<select name="currency[]"><option>CDN</option><option>USD</option></select>
          Receipt<select name="receipt[]"><option>YES</option><option>NO</option></select>  
        </tr> 
      </table><br />
      <input name="button" type="button" value="Insert another expense" onclick="addRow(this.parentNode.parentNode)">
      <button type="submit" name="submit" value="submit" />Submit</button> 
    </form> 
    </body> 
    </html> 
    I tried adding a <div> instead of using <table> and <tr>, and replace 'tr' with 'div' in the javascript, but didnt seem to work. As you can see right now I just have everything inside one <tr>, if I added another <tr> it would break the clone.
    Last edited by tdob; 01-17-2008 at 02:06 PM.

  9. #24
    Join Date
    Jan 2008
    Posts
    40
    Also, something else I have been trying to figure is validation. I want to ensure my selection lists (account and description) are not set to the default value.

    I have found samples on the internet, however I need to give the java the field name, but as you see the name here is always dynamic, it could be description[0] or description[5] etc... How would i incorporate validation into this?

    Once again, im forever greatful for your help.

  10. #25
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Here you are the DIV variant:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    var clone;
    function cloneDiv(){
    var divs=document.getElementById('myDiv').getElementsByTagName('div');
    clone=divs[divs.length-1].cloneNode(true);
    }
    function addDiv(){
    var root=document.getElementById('myDiv');
    var divs=root.getElementsByTagName('div');
    root.appendChild(clone);
    clone=divs[divs.length-1].cloneNode(true);
    }
    onload=cloneDiv
    </script>
    </head>
    <body>
    <form id="myForm" action="?link=summary.php" method="post"> 
    <div id="myDiv">
    <div>
    <input type="hidden" name="id[]" />
          <select name="department[]"> 
          <option selected>Department</option><option>Administration</option><option>Customer Service</option><option>Executive</option><option>Finance</option><option>I.T.</option><option>Marketing</option><option>Materials Management</option><option>Product Development</option><option>Selling</option>      </select>
          
          <select name="account[]"> 
          <option selected>Account</option><option>ADMIN CHARGES FOR LATE DELIVERIES & SHORTAGES</option><option>AUDIT FEES</option><option>BAD DEBT EXPENSE</option><option>BANK CHARGES</option><option>BANK PENALTY & INTEREST</option><option>CELLUAR PHONE</option><option>CONSULTANT SERVICES</option><option>CONVENTIONS/TRADE SHOWS</option><option>COPIER CHARGES</option><option>COURIER</option><option>CREDIT BUREAU CHARGES</option><option>DONATIONS</option><option>EDP COMMUNICATION</option><option>EDUCATION</option><option>EMPLOYEE UNIFORMS</option><option>FAX</option><option>FAX CHARGES</option><option>FOREIGN X - REALIZED</option><option>FORWARDING & DOC'N CHRG</option><option>HARDWARE EXPENSES</option><option>INTEREST INCOME</option><option>LEGAL FEES</option><option>LUNCH ROOM</option><option>MAIL ROOM</option><option>MEALS & ENTER. SALES</option><option>MEALS & ENTERTAINMENT</option><option>MEETINGS</option><option>MEMBERSHIPS & DUES</option><option>NUTRITIONAL ANALYSIS - R&D</option><option>OUTSIDE CONTRACTS</option><option>PENSION CONSULTING</option><option>PRODUCT TEST TRIALS - R&D</option><option>R&M BUILDING</option><option>R&M BUILDING (GENERAL)</option><option>R&M EDP HARDWARE</option><option>R&M EDP SOFTWARE</option><option>RECRUITING</option><option>RENT</option><option>SANITATION/CLEANING</option><option>SOFTWARE EXPENSE</option><option>SPECIAL EVENTS</option><option>SUBSCRIPTIONS</option><option>SUPPLIES - OFFICE</option><option>SUPPLIES - QUALITY SERVICE</option><option>SUPPLIES - R&D</option><option>SUPPLIES - SHIPPING</option><option>TELEPHONE</option><option>TEMPORARY HELP</option><option>TRAVEL</option><option>VEHICLES/MILEAGE/RENTALS</option>      </select>
          
          <br><br>Description (if required)<input type="text" name="description[]" value=" " />
          Amount<input type="text" name="amount[]" size="4" />
          GST<input type="text" name="gst[]" value="0" size="4" />
          PST<input type="text" name="pst[]" value="0" size="4" />
          Other Tax<input type="text" name="other_tax[]" value="0" size="4" />
          <br><br>Total<input type="text" name="total[]" size="4" />
          Currency<select name="currency[]"><option>CDN</option><option>USD</option></select>
          Receipt<select name="receipt[]"><option>YES</option><option>NO</option></select>
    </div>
    </div>
    <input name="button" type="button" value="Insert another expense" onclick="addDiv()">
      <button type="submit" name="submit" value="submit" />Submit</button>
    </form>
    </body>
    </html>

  11. #26
    Join Date
    Jan 2008
    Posts
    40
    Thank you very much. Java is really useful, wish I knew more.. you want to sell your brain

    I also have the following code for trying to validate some fields:
    Code:
    <script type='text/javascript'>
    function madeSelection(elem, helperMsg){
    	if(elem.value == "Department"){
    		alert(helperMsg);
    		elem.focus();
    		return false;
    	}else{
    		return true;
    	}
    }
    </script>
    Then I would have to use a
    Code:
    <input type='button' 
    	onclick="madeSelection(document.getElementById('department'), 'Please Choose Something')"
    	value='Submit' />
    My problem is, using my example you helped me with above, my element is never going to be department. It would be department[0] or department[1], however I have no clue how to incorporate this into the Java?

  12. #27
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    id and name are different things. Don't mix or confound them.

    Your correspondent elements will have all the same name, say "department[]". It is up to your server-side code (the CGI where your form is subimtted) to treat them as an array. For instance php applications can do that.

    The validation is a separate thing. Usually it has to be done on using the onsubmit event, with a return call, placed within the form element.

    A basic example could be as:

    Code:
    function madeSelection(f){
    var sel=f['deparment[]'], i=0, s;
    while(s=sel[i++]){
    if(s.value == 'Department'){
    alert('Please Choose Something');
    s.focus();
    return false;
    }
    }
    }
    and the handler:
    Code:
    <form onsubmit="return madeSelection(this)">
    ....
    ....
    <input type="submit" name="Sub" value="Submit">
    </form>
    ====
    Quote Originally Posted by tdob
    Java is really useful
    Note: Javascript is NOT Java
    Last edited by Kor; 01-18-2008 at 10:05 AM.

  13. #28
    Join Date
    Jan 2008
    Posts
    40
    Thanks again, however this in combination with the form I have above, produces no result.

    I will try tinkering with it, but I am not getting a prompt when it is still on 'Department' and im not getting any javascript errors either.

  14. #29
    Join Date
    Jan 2008
    Posts
    40
    I hate to bug you, but the verification does not work for me, nothing seems to happen.

  15. #30
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You should give values to your options. Anyway, you need that by all means, in order to submit something to the CGI.
    Code:
    <select name="department[]"> 
    <option selected value="Department">Department</option>
    <option value="Administration">Administration</option>
    <option value="Customer Service">Customer Service</option>
    ...
    </select>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles