www.webdeveloper.com
Page 4 of 7 FirstFirst ... 23456 ... LastLast
Results 46 to 60 of 93

Thread: Using javascript to create table rows containing form elements

  1. #46
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Post the new aspect of your code, please.

  2. #47
    Join Date
    Jan 2008
    Posts
    40
    Quote Originally Posted by Kor
    Post the new aspect of your code, please.
    Hi Kor, not much has changed code wise. Here is what I have.

    Code:
    <script type="text/javascript">
    var clone;
    function cloneDiv(){
    var divs=document.getElementById('myDiv').getElementsByTagName('div');
    clone=divs[divs.length-1].cloneNode(true);
    }
    function addDiv(){
    <?php $count+=1; ?>
    var root=document.getElementById('myDiv');
    var divs=root.getElementsByTagName('div');
    root.appendChild(clone);
    clone=divs[divs.length-1].cloneNode(true);
    }
    onload=cloneDiv
    
    function madeSelection(){
    var names=['team[]','profile[]'], n, sel, s, i, j=0;
    while(n=names[j++]){
    	sel=document.getElementsByName(n); i=0;
    	while(s=sel[i++]){
    		if(s.selectedIndex==0){alert('Please Choose Something');s.focus();return false;}
    	}
    }
    }
    </script>
    
    </head> 
    <body>
    <form id="form-expense" action="<?php $_SERVER['PHP_SELF']?>" method="post" onsubmit="return madeSelection(this)"> 
      <div id="myDiv">
      <div>
      <br>
      <table border="1" cellpadding="0" cellspacing="0">
          <tr align="center">
            <td>Pick #</td>
            <td>Team</td>
            <td>Player</td>
            <td>Pick info (Optional, how team acquired pick, etc...)</td>
          </tr>
          <tr aligin="center">
          <td><?php echo $count; ?></td>
          <input type="hidden" name="id[]" />
          <td align="center"><select name="team[]"> 
          <?php
          echo '<option selected value="Team">Team Name</option>';
          echo $optionteams;
          ?>
          </select></td>
          <td align="center">
          <select name="player[]"> 
          <?php
          echo '<option selected value="Player">Player</option>';
          echo $optionprofiles;
          ?>
          </select></td>
    <p align="center"><input name="button" type="button" value="Insert another selection" onclick="addDiv()">
    <input name="submit" type="submit" value="Submit">
    Where I have Pick# I would like to somehow display the current rows number. So if it is the first row it would display 1, if a user inserts another selection through the addDiv() function it would be pick #2, and so on... I dont know of a way I can track how many rows have been added and at the same time output it via PHP?

  3. #48
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    The HTML is incomplete (tags are not close, etc...) Something is missing. It is important to see the complete HTML code.

  4. #49
    Join Date
    Jan 2008
    Posts
    40
    Quote Originally Posted by Kor
    The HTML is incomplete (tags are not close, etc...) Something is missing. It is important to see the complete HTML code.
    Well it is integrated with PHP. I will post the entire page, I thought only the above would be relevant, sorry. I am not sure what im looking for is possible, as the PHP is server side. I would just like a way to output the current row number and increment it when a users adds another row of elements. I have tried with PHP to no success.

    Code:
    <script type="text/javascript">
    var clone;
    function cloneDiv(){
    var divs=document.getElementById('myDiv').getElementsByTagName('div');
    clone=divs[divs.length-1].cloneNode(true);
    }
    function addDiv(){
    <?php $count+=1; ?>
    var root=document.getElementById('myDiv');
    var divs=root.getElementsByTagName('div');
    root.appendChild(clone);
    clone=divs[divs.length-1].cloneNode(true);
    }
    onload=cloneDiv
    
    function madeSelection(){
    var names=['team[]','profile[]'], n, sel, s, i, j=0;
    while(n=names[j++]){
    	sel=document.getElementsByName(n); i=0;
    	while(s=sel[i++]){
    		if(s.selectedIndex==0){alert('Please Choose Something');s.focus();return false;}
    	}
    }
    }
    </script>
    
    <?php
    include('connect.php'); 
    global $user;
    $userid = $user->uid;
    
    $getteams = @mysql_query("SELECT * FROM teams order by name ASC");
    if (!$getteams) { exit('<p>Error performing query: ' . mysql_error() . '</p>'); }
    
    while ($rowgetteams = mysql_fetch_array($getteams)) {
    $optionteams .= '<option value="' .$rowgetteams['id']. '">' .$rowgetteams['name']. '</option>'; }
    
    $getprofiles = @mysql_query("SELECT * FROM profiles order by name ASC");
    if (!$getprofiles) { exit('<p>Error performing query: ' . mysql_error() . '</p>'); }
    
    while ($rowgetprofiles = mysql_fetch_array($getprofiles)) {
    $optionprofiles .= '<option value="' .$rowgetprofiles['id']. '">' .$rowgetprofiles['name']. '</option>'; }
    ?>
    
    </head> 
    <body>
    <form id="form-expense" action="<?php $_SERVER['PHP_SELF']?>" method="post" onsubmit="return madeSelection(this)"> 
      <div id="myDiv">
      <div>
      <br>
      <table border="1" cellpadding="0" cellspacing="0">
          <tr align="center">
            <td>Pick #</td>
            <td>Team</td>
            <td>Player</td>
            <td>Pick info (Optional, how team acquired pick, etc...)</td>
          </tr>
          <tr aligin="center">
          <td><?php echo $count; ?></td>
          <input type="hidden" name="id[]" />
          <td align="center"><select name="team[]"> 
          <?php
          echo '<option selected value="Team">Team Name</option>';
          echo $optionteams;
          ?>
          </select></td>
          <td align="center">
          <select name="player[]"> 
          <?php
          echo '<option selected value="Player">Player</option>';
          echo $optionprofiles;
          ?>
          </select></td>
          
          <td><textarea cols="50" rows="5" name="pick_info[]" /></textarea></td>
          </tr>
          <tr><td colspan="4">Reasoning behind pick<br><textarea cols="90" rows="10" name="description[]" /></textarea></td></tr>
          </table>
       </div>
       </div>
       <br><br>
      <p align="center"><input name="button" type="button" value="Insert another selection" onclick="addDiv()">
      <input name="submit" type="submit" value="Submit">
    </form> 
    </body> 
    </html> 
    
    <?php 
    if (isset($_POST['submit'])) {
    
      //Import into database
      $sql = 'INSERT INTO table SET';
      $sql .= ' user = \'' . $userid. '\'';
       
      mysql_query("SET autocommit = 0") or die (mysql_error());
      mysql_query("START TRANSACTION") or die (mysql_error()); 
      mysql_query("BEGIN") or die (mysql_error());
      mysql_query($sql) or die (mysql_error());
      $getmockid = mysql_insert_id();
      
        foreach ($_POST['id'] as $key => $value) 
            { 
              $pick_number=$key+1;
              $id = $_POST['id'][$key];
              $player = $_POST['player'][$key];
    	        $team = $_POST['team'][$key];
    	        $description = nl2br($_POST['description'][$key]);
    	           if ($_POST['pick_info'][$key]) {
                  $pickinfo=nl2br($_POST['pick_info'][$key]); }
                  
       //Import into database
      $sql2 = 'INSERT INTO table_detail SET';
      $sql2 .= ' player_id = \'' . $player . '\'';
      $sql2 .= ', team_id = \'' . $team . '\'';
      $sql2 .= ', mock_id = \'' . $getmockid . '\'';
      $sql2 .= ', pick_number = \'' . $pick_number . '\'';
      $sql2 .= ', comments = \'' . $description . '\'';
      if ($pickinfo) { $sql2 .= ', pick_info = \'' . $pick_info . '\''; }
    
      // mysql_query($sql2) or die(mysql_error());
       if(!mysql_query($sql2)) { 
         echo '<p>Error performing query: ' . mysql_error() . '</p>';
         mysql_query("ROLLBACK"); die;  }
            else { mysql_query("COMMIT"); echo "RECORDS ADDED!!!"; }
            
            
            }    
    }

  5. #50
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Would be ok to send, on submit, the number of rows as a hidden input's value?

  6. #51
    Join Date
    Jan 2008
    Posts
    40
    Quote Originally Posted by Kor
    Would be ok to send, on submit, the number of rows as a hidden input's value?
    Yes any way to get it would be fine, I would also need to be able to output the value to page though.

  7. #52
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    javascript can not interfere with php, at least not the way you tried. Is this what you want?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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');
    var nr=root.getElementsByTagName('table').length+1;
    clone.getElementsByTagName('td')[4].firstChild.nodeValue=nr;
    root.appendChild(clone);
    clone=divs[divs.length-1].cloneNode(true);
    }
    onload=cloneDiv
    
    function madeSelection(){
    var names=['team[]','profile[]'], n, sel, s, i, j=0;
    while(n=names[j++]){
    	sel=document.getElementsByName(n); i=0;
    	while(s=sel[i++]){
    		if(s.selectedIndex==0){alert('Please Choose Something');s.focus();return false;}
    	}
    }
    }
    </script>
    </head>
    <body>
    <form id="form-expense" action="<?php $_SERVER['PHP_SELF']?>" method="post" onsubmit="return madeSelection(this)"> 
      <div id="myDiv">
      <div>
      <br>
      <table border="1" cellpadding="0" cellspacing="0">
          <tr align="center">
            <td>Pick #</td>
            <td>Team</td>
            <td>Player</td>
            <td>Pick info (Optional, how team acquired pick, etc...)</td>
          </tr>
          <tr aligin="center">
          <td>1</td>
          <input type="hidden" name="id[]" />
          <td align="center"><select name="team[]"> 
          <?php
          echo '<option selected value="Team">Team Name</option>';
          echo $optionteams;
          ?>
          </select></td>
          <td align="center">
          <select name="player[]"> 
          <?php
          echo '<option selected value="Player">Player</option>';
          echo $optionprofiles;
          ?>
          </select></td>
          
          <td><textarea cols="50" rows="5" name="pick_info[]" /></textarea></td>
          </tr>
          <tr><td colspan="4">Reasoning behind pick<br><textarea cols="90" rows="10" name="description[]" /></textarea></td></tr>
          </table>
       </div>
       </div>
       <br><br>
      <p align="center"><input name="button" type="button" value="Insert another selection" onclick="addDiv()">
      <input name="submit" type="submit" value="Submit">
    </form>
    </body>
    </html>

  8. #53
    Join Date
    Jan 2008
    Posts
    40
    Quote Originally Posted by Kor
    javascript can not interfere with php, at least not the way you tried. Is this what you want?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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');
    var nr=root.getElementsByTagName('table').length+1;
    clone.getElementsByTagName('td')[4].firstChild.nodeValue=nr;
    root.appendChild(clone);
    clone=divs[divs.length-1].cloneNode(true);
    }
    onload=cloneDiv
    
    function madeSelection(){
    var names=['team[]','profile[]'], n, sel, s, i, j=0;
    while(n=names[j++]){
    	sel=document.getElementsByName(n); i=0;
    	while(s=sel[i++]){
    		if(s.selectedIndex==0){alert('Please Choose Something');s.focus();return false;}
    	}
    }
    }
    </script>
    </head>
    <body>
    <form id="form-expense" action="<?php $_SERVER['PHP_SELF']?>" method="post" onsubmit="return madeSelection(this)"> 
      <div id="myDiv">
      <div>
      <br>
      <table border="1" cellpadding="0" cellspacing="0">
          <tr align="center">
            <td>Pick #</td>
            <td>Team</td>
            <td>Player</td>
            <td>Pick info (Optional, how team acquired pick, etc...)</td>
          </tr>
          <tr aligin="center">
          <td>1</td>
          <input type="hidden" name="id[]" />
          <td align="center"><select name="team[]"> 
          <?php
          echo '<option selected value="Team">Team Name</option>';
          echo $optionteams;
          ?>
          </select></td>
          <td align="center">
          <select name="player[]"> 
          <?php
          echo '<option selected value="Player">Player</option>';
          echo $optionprofiles;
          ?>
          </select></td>
          
          <td><textarea cols="50" rows="5" name="pick_info[]" /></textarea></td>
          </tr>
          <tr><td colspan="4">Reasoning behind pick<br><textarea cols="90" rows="10" name="description[]" /></textarea></td></tr>
          </table>
       </div>
       </div>
       <br><br>
      <p align="center"><input name="button" type="button" value="Insert another selection" onclick="addDiv()">
      <input name="submit" type="submit" value="Submit">
    </form>
    </body>
    </html>
    Wow, yes it is exactly what I want. I knew the PHP portion wasnt going to work, and messed around with some java but nothing close to what you did!

    It works great, but how exactly are you picking up the value in the javascript? I see your working with the Table, then somehow you get the proper <td>? What does the [4] represent? Sorry for the questions just fascinated..

  9. #54
    Join Date
    Jan 2008
    Posts
    40
    The 4 is the 4th <td> starting at 0. However, what in the code makes the value auto increment?

  10. #55
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tdob
    The 4 is the 4th <td> starting at 0. However, what in the code makes the value auto increment?
    Each time when you append the clone, you add a new TABLE element. I have simply counted the tables each time and have added 1:
    Code:
    var nr=root.getElementsByTagName('table').length+1;
    I could have also counted the DIV elements of the root

  11. #56
    Join Date
    Oct 2008
    Posts
    1
    Hi

    i have read that posts, and found your code really interesting, for adding rows.

    I have added it into my code, but i got one problem.
    What i am trying to do, is that i want a calculation, and a possibility to add more calculation.

    The HTML code looks like that:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    
    
    
    
    <html>
    <head><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
    <title>Izračun</title>
    <link rel="stylesheet" type="text/css" href="izracun.css" />
     <SCRIPT language="JavaScript" SRC="izracun2.js"></SCRIPT>
     <SCRIPT language="JavaScript" SRC="izracun.js"></SCRIPT>
    		
    		
    </head>
    <body>
    <div id="glava"><script type="text/javascript">myFunction ()</script>
    <!-- Meni- gumbi-->
    
    				<div id="sb_content"><br><br>
    					<h3>Informativni izračun</h3>
    						
    	
    
    
    	
    		<form name="foto" method="post"> 
    			<table> 
    				<tr class="table_row">  
    					<td width="50px" class="labelcell_prvi"><label for="state">Izdelki:</label></td> 
    					<td class="fieldcell">
    						<select name="vrsta[stevilka]" onchange="Kvadratura();">
    							<option  value="0">- - - - - - Izberi - - - - - - -</option>
    							<option  value="1">Fototapeta</option>
    							<option  value="2">Fototapeta Stucco</option>
    							<option  value="3">Grafika za steklo</option>
    							<option  value="4">Slikarsko platno</option>
    							<option  value="5">Samolepilna grafika</option>
    						</select>
    					</td> <td class="space"> </td>
    					<td class="labelcell_prvi"><label for="name">Količina:</label></td> 
    					<td class="labelcell"><input class="mere" value="1" type="text" name="kolicina[stevilka]" onblur="Kvadratura()"/> kom</td>
    					 <td class="space"> </td>
    					<td class="labelcell_prvi"><label for="name">Širina:</label></td> 
    					<td class="labelcell"><input class="mere" type="text" name="sirina[stevilka]" onblur="Kvadratura()"/> cm</td>
    					 <td class="space"> </td>
    					<td class="labelcell_prvi"><label for="address1">Višina:</label></td> 
    					<td class="labelcell"><input class="mere" type="text" name="visina[stevilka]" onBlur="Kvadratura();"/> cm</td>
    					 <td class="space"> </td>
    					<td class="labelcell_prvi"><label for="address1">Kvadratura:</label></td> 
    					<td class="labelcell"><input class="fieldcell2" type="text" name="kvadratura[stevilka]" size="8"/>  m2</td> 
    					 <td class="space"> </td>
    					<td class="labelcell_prvi"><label for="address1"></label></td>
    					<td class="labelcell" colspan="2"><label for="address1">+ 25,00 € Priprava za tisk</label></td>
    					 <td class="space"> </td>					
    					<td class="labelcell_prvi"><label for="address1">Izračun:</label></td> 
    					<td class="labelcell"><input class="fieldcell3" type="text" name="znesek[stevilka]" size="8"/> €</TD>
    					
    					<td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td>
    				</tr> 
    				
    				
    			</table> 
    	 	</form>
    		<p class="dogodki"><br><br><br>
    		<b>Legenda:</b>
    		<br><br>
    		<b>Fototapete</b>	<br>
    		Tiskane na poseben papir, ki se lepi na gladke stene(omet, knauf, iverica) na enak način in z lepilom kot navadne tapete. 
    		Papir dopušča čiščenje z mehko vlažno krpo brez agresivnih čistil. Fototapete niso primerne za neporozne površine: iveral. steklo ipd. in za zunanjo uporabo.<br>
    		Obstoj tapet v notranjih prostorih je preko 20 let.Odsvetujemo uporabo v vlažnih prostorih.<br><br><br>
    		
    		<b>Fototapete - Stucco</b>	<br>
    		Tiskane so na poseben strukturiran papir, ki daje bogatejši videz kot običajni papir.
    		Na zid se, prav tako kot običajno lepijo z lepilom za tepete. <br>
    		Priporočamo lepilo za težke tapete.
    		Posamezni trakovi se lepijo brez prekrivanj - na stik<br><br><br>
    		
    		<b>Grafika za steklo</b>	<br>
    		Najboljša rešitev za vlažne prostore in kjer je potrebno pogostejše čiščenje: kuhinje, kopalnice ipd..
    		Grafika je tiskana na posebno folijo, ki omogoča lepljenje na hrbtno stran stekla.<br>
    		Obstojnost je preko 25 let in v tem je največja prednost pred direktnim tiskom na steklo. 
    		Poleg tega omogoča popolnoma neprosojno izvedbo, kar je zelo pomembno pri lepljenju s silikoni.
    		Možne so tudi različno prosojne in obojestransko vidne izvedbe za vrata ali pregradne stene.<br><br><br>
    		
    		<b>Slikarsko platno</b>	<br>
    		Fotopovečave na slikarsko platno dajejo poseben, bogatejši vtis zaradi strukture materiala. Platno je naeto na podokvir tako, da potiskani del pokriva tudi vse zunanje robove.
    		Uporabne so za dekoracije prostorov kot samostojne slike na steni.<br>
    		So tudi zelo primerno in lepo darilo.<br><br><br>
    		
    		<b>Samolepilna grafika</b>	<br>
    		Tiskana na samolepilno folijo, ki se lepi na vse neporozne ravne površine (omare, PVC plošče ipd.) na katerih ni možna oz. priporočljiva uporaba fototapet.
    		Za površine, ki so bolj izpostavljene dotikom ipd.(omare, vrata, ...), priporočamo dodatno zaščitno plastifikacijo.<br>
    		Obstojnost: Zunaj cca 5 let, v prostorih preko 20 let.<br><br><br>
    		</p>
    		
    		
    		
    				
    </body><!--end of body-->
    </html>
    The javascript code for calculation i was using before adding rows.
    Code:
    function Kvadratura()
    			{
    
    			foto.kvadratura.value = foto.sirina.value * foto.visina.value / 10000;
    			if (foto.vrsta.value == 1)
    				{
    					if (foto.kvadratura.value < 3) 
    						{foto.znesek.value = (( 32 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
    						
    					if ((foto.kvadratura.value >= 3) && (foto.kvadratura.value < 12)) 
    						{foto.znesek.value = (( 28 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
    						
    					if ((foto.kvadratura.value >= 12) && (foto.kvadratura.value < 30)) 
    						{foto.znesek.value = (( 25 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
    						
    					if (foto.kvadratura.value >= 30) 
    						{foto.znesek.value = (( 22 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
    				}
    			else if (foto.vrsta.value == 2)
    				{
    					if (foto.kvadratura.value < 3) 
    						{foto.znesek.value = (( 39 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
    						
    					if ((foto.kvadratura.value >= 3) && (foto.kvadratura.value < 12)) 
    						{foto.znesek.value = (( 35 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
    						
    					if ((foto.kvadratura.value >= 12) && (foto.kvadratura.value < 30)) 
    						{foto.znesek.value = (( 32 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
    						
    					if (foto.kvadratura.value >= 30) 
    						{foto.znesek.value = (( 29 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
    				}
    			else if (foto.vrsta.value == 3) {foto.znesek.value = (( 96 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
    			else if (foto.vrsta.value == 4) {foto.znesek.value = (( 120 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
    			else if (foto.vrsta.value == 5) {foto.znesek.value = ((54.5 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
    
    
    			}

    And your code:

    Code:
    function addRow(r){
    var root = r.parentNode;//the root
    var allRows = root.getElementsByTagName('tr');//the rows' collection
    var cRow = allRows[0].cloneNode(true)//the clone of the 1st row
    var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row
    for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names)
    cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1))
    }
    var cSel = cRow.getElementsByTagName('select')[0];
    cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));//change the selecet's name
    root.appendChild(cRow);//appends the cloned row as a new row
    }
    function shownames(){
    var allInp=document.getElementsByTagName('input');
    for(var i=0;i<allInp.length;i++){
    alert(allInp[i].name)
    }
    }

    I am trying to connect that 2 codes, so if i add one line than the calculation will calculate second line appart too. I have tried but it just calculates first line, and stops at second line or any line that is next.

  12. #57
    Join Date
    May 2006
    Posts
    5
    I can't get this working in IE7 but it works fine in other browsers. Is this a bug with IE7??

  13. #58
    Join Date
    May 2006
    Posts
    5
    Here is my function..

    Code:
    function addRow(r){
    var root = document.getElementById('tblViewFeed');//the root 
    var allRows = root.getElementsByTagName('tr');//the rows' collection
    var cRow = allRows[1].cloneNode(true)//the clone of the 1st row
    var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row
    for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names)
    cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1))
    }
    var cSel = cRow.getElementsByTagName('select')[0];
    cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));//change the selecet's name
    root.appendChild(cRow);//appends the cloned row as a new row
    }

  14. #59
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    What is document.getElementById('tblViewFeed') ? A TABLE or a TBODY element?

  15. #60
    Join Date
    Dec 2008
    Posts
    4
    Hi,
    i have almost the some script but different problem.
    a friend of me has made a script for me (now he is on holiday for 3 weeks)
    i wonder if someone can help or assist me how to make it the way i want.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Request form</title>
    <link href="main.css" type="text/css" rel="stylesheet">
    </head>
    
    <script>
    function add_formrow(){
      if (!this.table_formcontainer)
        this.table_formcontainer = document.getElementById("table_formcontainer");
    
      if (!this.table_formcontainer)
        return;
    
      var new_row = table_formcontainer.insertRow(-1);
      var new_cell1 = new_row.insertCell(0);
      var new_cell2 = new_row.insertCell(1);
      var new_cell3 = new_row.insertCell(2);
    
      var new_input1 = document.createElement("input");
      new_input1.type = "text";
      new_cell1.appendChild(new_input1);
      
      var new_input2 = document.createElement("input");
      new_input2.type = "text";
      new_cell2.appendChild(new_input2);
    
       var new_input3 = document.createElement("select");
       new_input3.name="transport[]";
       var options = ["No", "Bike", "Car", "Motorcycle", "Public transport"];
       for (var i = 0; i < options.length; i++)
       {
        var option = document.createElement("option");
        option.value = options[i];
        option.text= options[i];
        try
        {
          new_input3.add(option, null);
        }
        catch(error)  
        {
          new_input3.add(option);
        }
      }
      new_cell3.appendChild(new_input3);  
      }
    </script>
    
    <body>
    <div id="credit"><b>T e s t</b></div>
    <br>
    <form method="post" action="" name="data">
    <fieldset> <legend>
    <font color="blue"><b>Request form</b></font></legend><br>
    <table id="table_formcontainer">     
    	 <tr>
    	      <td width="10">Name</td> <td>Age<td>Transport<td>&nbsp;</td> </td>		   
    	 </tr>
    	 
    </table>
    <table>	 
    	 <tr>
    	      	<td width="500" align="right">[ b<a href="#" onclick='add_formrow();'>+</a> ]</td>	  
    	 </tr>
         <tr>
                <td width="10"><br><input type="submit" name="submit" value=" S e n d "> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td></td>
        </tr>
    </table>
    </form></fieldset>
    
    
    <br>
    </body>
    </html>
    Question:
    1. how to make one extra button to deleterow()
    2. how to send it with php

    thanks in advance

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