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 to the CF scene
    Join Date
    Aug 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Add pre-coded table row when link is clicked

    Okay I want to add content to my page with the simple click of a link. I don't know if java can do this, but I thought that someone here might be able to help me do it.

    Okay so the code looks like this;

    Code:
    <table align="center" cellpadding="4" border="1">
      <tr>
          <td colspan="4" bgcolor="#3399FF" align="center"><b>UNION LEAGUE</b></td>
      </tr>
       <tr>
          <td bgcolor="#FFFFCC" align="center"><b>POS</b></td>
          <td bgcolor="#FFFFCC" align="center"><b>PLAYER</b></td>
          <td bgcolor="#FFFFCC" align="center"><b>STAT LINE</b></td>
      </tr>
          <form method="post" action="allstar.php?ADD=Y">
      <tr>
          <td bgcolor="#FFFFCC" align="center"><select name="pos[]">
                                               <option>P
                                               <option>C
                                               <option>1B
                                               <option>2B
                                               <option>3B
                                               <option>SS
                                               <option>LF
                                               <option>CF
                                               <option>RF</select>
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="text" name="stat[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <a href="addnext">Add</a>
          </td>
      </tr>
      <tr>
          <td colspan="4" align="center" valign="middle" bgcolor="#FFFFFF">
                <input type="submit" value="SUBMIT"></form>
          </td>
      </tr>
    When people click on the <a href="addnext">Add[/url] I would like it to add another table row containg the same information as the previous one, and so forth so that users can add as many rosws as they want.

    Not quite sure how to do this, anyone got any ideas?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function AddRow(zxcid,zxcc){
     var tbdy=document.getElementById(zxcid);
     var clone=tbdy.rows[zxcc].cloneNode(true);
     tbdy.appendChild(clone);
    }
    //-->
    </script>
    </head>
    
    <body>
    <table align="center" cellpadding="4" border="1">
    <tbody id="T1" >
      <tr>
          <td colspan="4" bgcolor="#3399FF" align="center"><b>UNION LEAGUE</b></td>
      </tr>
       <tr>
          <td bgcolor="#FFFFCC" align="center"><b>POS</b></td>
          <td bgcolor="#FFFFCC" align="center"><b>PLAYER</b></td>
          <td bgcolor="#FFFFCC" align="center"><b>STAT LINE</b></td>
      </tr>
          <form method="post" action="allstar.php?ADD=Y">
      <tr>
          <td bgcolor="#FFFFCC" align="center"><select name="pos[]">
                                               <option>P
                                               <option>C
                                               <option>1B
                                               <option>2B
                                               <option>3B
                                               <option>SS
                                               <option>LF
                                               <option>CF
                                               <option>RF</select>
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="text" name="stat[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <span onclick="AddRow('T1',2); return false;" >Add</span>
          </td>
      </tr>
    </tbody>
      <tr>
          <td colspan="4" align="center" valign="middle" bgcolor="#FFFFFF">
                <input type="submit" value="SUBMIT"></form>
          </td>
      </tr>
    </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That works for adding the rows visually, but is there any way for it actually "add" the rows so that the form will send the variables? As of right now it only sends the first row that shows up on the page, the rest are just there, they don't actually send any information when you hit submit.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    please and thank you are good
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function AddRow(){
     var zxcevt=window.event||arguments.callee.caller.arguments[0];
     var zxcobj=zxcEventObj(zxcevt);
     zxcobj.style.visibility='hidden';
     var zxctbdy,zxcrow;
     while (zxcobj.parentNode){
      if (zxcobj.tagName=='TR'){ zxcrow=zxcobj; }
      if (zxcobj.tagName=='TBODY'){ zxctbdy=zxcobj; break; }
      zxcobj=zxcobj.parentNode;
     }
     var zxcrows=zxctbdy.rows;
     for (var zxc0=0;zxc0<zxcrows.length-1;zxc0++){
      if (zxcrows[zxc0]==zxcrow&&zxcrows[zxc0+1].style.display=='none'){   //
       zxcrows[zxc0+1].style.display='';
      }
     }
    
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    
    //-->
    </script>
    </head>
    
    <body>
    <table align="center" cellpadding="4" border="1">
    <tbody id="T1" >
      <tr>
          <td colspan="4" bgcolor="#3399FF" align="center"><b>UNION LEAGUE</b></td>
      </tr>
       <tr>
          <td bgcolor="#FFFFCC" align="center"><b>POS</b></td>
          <td bgcolor="#FFFFCC" align="center"><b>PLAYER</b></td>
          <td bgcolor="#FFFFCC" align="center"><b>STAT LINE</b></td>
      </tr>
          <form method="post" action="allstar.php?ADD=Y">
      <tr>
          <td bgcolor="#FFFFCC" align="center"><select name="pos[]">
                                               <option>P
                                               <option>C
                                               <option>1B
                                               <option>2B
                                               <option>3B
                                               <option>SS
                                               <option>LF
                                               <option>CF
                                               <option>RF</select>
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="text" name="stat[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <span onclick="AddRow(); return false;" >Add</span>
          </td>
      </tr>
      <tr style="display:none;" >
          <td bgcolor="#FFFFCC" align="center"><select name="pos[]">
                                               <option>P
                                               <option>C
                                               <option>1B
                                               <option>2B
                                               <option>3B
                                               <option>SS
                                               <option>LF
                                               <option>CF
                                               <option>RF</select>
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="text" name="stat[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <span onclick="AddRow(); return false;" >Add</span>
          </td>
      </tr>
      <tr style="display:none;" >
          <td bgcolor="#FFFFCC" align="center"><select name="pos[]">
                                               <option>P
                                               <option>C
                                               <option>1B
                                               <option>2B
                                               <option>3B
                                               <option>SS
                                               <option>LF
                                               <option>CF
                                               <option>RF</select>
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="text" name="stat[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <span onclick="AddRow(); return false;" >Add</span>
          </td>
      </tr>
      <tr style="display:none;" >
          <td bgcolor="#FFFFCC" align="center"><select name="pos[]">
                                               <option>P
                                               <option>C
                                               <option>1B
                                               <option>2B
                                               <option>3B
                                               <option>SS
                                               <option>LF
                                               <option>CF
                                               <option>RF</select>
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="text" name="stat[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <span onclick="AddRow(); return false;" >Add</span>
          </td>
      </tr>
      <tr style="display:none;" >
          <td bgcolor="#FFFFCC" align="center"><select name="pos[]">
                                               <option>P
                                               <option>C
                                               <option>1B
                                               <option>2B
                                               <option>3B
                                               <option>SS
                                               <option>LF
                                               <option>CF
                                               <option>RF</select>
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <input type="text" name="stat[]">
          </td>
          <td bgcolor="#FFFFCC" align="center">
                <span  >&nbsp;</span>
          </td>
      </tr>
      <tr>
          <td colspan="4" align="center" valign="middle" bgcolor="#FFFFFF">
                <input type="submit" value="SUBMIT"></form>
          </td>
      </tr>
    </tbody>
    </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sorry about that.

    Thanks a ton for helping me out. This is a great help. I had no clue how to go about this myself.

    This code works wonderfully, I was wondering if there is any way to do this without actually coding all the table rows into the page?

    If not I understand and everything you have showed me so far is great.

    Thanks for all your help.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    if there is any way to do this without actually coding all the table rows into
    would have thougth first code would work, so wanted to make sure without having to fully test submission
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The first code works, but the form elements don't actually send anything. I am sending the form elements to a php script. The first example you gave only actually submits the data from the first row. The second one works, but still won't fix the problem of having to code all the table rows in and then hide them with the script.

    Anyone else have any ideas on how to do this?

    Thanks Vic for all your help so far.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    and then hide them with the script.
    they are hidden with <tr style="display:none;" > in the html

    also php echo can generate the required rows
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips
    they are hidden with <tr style="display:none;" > in the html

    also php echo can generate the required rows
    I understand that. I know that php echo can generate the required rows, but the problem is this. I don't want to have to code them all in to the page, and I don't want to have to code all the echo statements. I was looking for a script that could actually add the code the page when the link is clicked.

    Hope that clears it up a bit.

    Thanks.

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    ode all the echo statements
    these would be in a simple loop.

    The use of [] in the field names is not valid/meet W3C recomendations

    so not sure that I can offer any further assistance.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #11
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, you did help though. The use of the [] in the form field names is so that I can grab them all in an array and then use a loop to perfrom actions with them.

    Thanks for everything. It has served its purpose for now.


  •  

    Posting Permissions

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