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 9 of 9
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to add row accordingly?

    Dear All,
    I have my link http://183.78.169.53/tm/layout.php. Basically I have two buttons one Add Single and one Add Double. When I press Add Single I want to have a new row with the single drop down list. On the other hand when I press the Add Double I want to have a new row with the two drop drop down list. How to achieve this any help please?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Place single dropdown in a div with ID. (I use ID=one for example)
    Place double dropdown in a div with ID. (I use ID=two for example)
    In your CSS make both display:none;

    Add this to the buttons

    <th><button class="add" onclick="document.getElementById('one').style.display = 'block';">Single</button></th>
    <th><button class="add" onclick="document.getElementById('two').style.display = 'block';">Double</button></th>

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Sunfigther,
    You mean to say create both the div maybe just out the table right? So must I put a tr and td in it? Thank you. Below is my full codes.
    Here is my latest link http://183.78.169.53/tm/layout1.php. I tried the display none but is still showing.

    Code:
    <html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="my1.css" media="all"> 
    <script type="text/javascript">
    function addSingle()
    {
    	alert("Single");
    }
    function addDouble()
    {
    	alert("Double");
    }
    </script>
    <style> 
                .dynatable {
                    border: solid 1px #000; 
                    border-collapse: collapse;
                }
                .dynatable th,
                .dynatable td {
                    background-color:#ccc; 
                    font-size:14px;
                    font-color:#ffffff;
                    font-family:Calibri;
                }
                .dynatable .prototype {
                    
                }
                label.error 
                { 
                	display: block; 
                	color:red;
                }
                
                td { vertical-align: top; }
                
            </style>  
    </head> 
    <body> 
    
    <div >
    	<h2 class="form_desicription"><?=$formType?> Tyre Code <?=$status?></h2>
    </div>
    
    <table> 
    <tr>
    <form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" id=form1 onSubmit="return validateForm();">
    <td width=700 valign="top">
    	<div id="one" style="display:none">
    	<?php
    							  $selectQuery1 ="Select tblTyreCode.tyreCodeID,tblTyreCode.tyreCode From tblTyreCode Where ioID=''"; 
    								$result1 = mysqli_query($link,$selectQuery1);
    	              //$row1 = mysqli_fetch_array($result1, MYSQL_ASSOC);
    	              $n1 = mysqli_num_rows($result1);  	
    								
    								echo "<td><select id='layoutSingle[1]' name='layoutSingle[1]' >";
    								echo "<option value=''>-Select Code-</option>";
    								if($n1>0)
    								{
    									while($row1 = mysqli_fetch_array($result1, MYSQL_ASSOC))
    									{
    									  	echo "<option value=".$row1['tyreCodeID'].">".$row1['tyreCode']."</option>";
    									}
    							  }
    								echo "</select>";
    
    	?>	
     </div>
     <div id="two">
     <?php
    							  $selectQuery1 ="Select tblTyreCode.tyreCodeID,tblTyreCode.tyreCode From tblTyreCode Where ioID!=''"; 
    								$result1 = mysqli_query($link,$selectQuery1);
    	              //$row1 = mysqli_fetch_array($result1, MYSQL_ASSOC);
    	              $n1 = mysqli_num_rows($result1);  	
    								
    								echo "<select id='layoutSingle[1]' name='layoutSingle[1]' >";
    								echo "<option value=''>-Select Code-</option>";
    								if($n1>0)
    								{
    									while($row1 = mysqli_fetch_array($result1, MYSQL_ASSOC))
    									{
    									  	echo "<option value=".$row1['tyreCodeID'].">".$row1['tyreCode']."</option>";
    									}
    							  }
    								echo "</select>";
    
    							?>	
     	<?php
    							  $selectQuery1 ="Select tblTyreCode.tyreCodeID,tblTyreCode.tyreCode From tblTyreCode Where ioID!=''"; 
    								$result1 = mysqli_query($link,$selectQuery1);
    	              //$row1 = mysqli_fetch_array($result1, MYSQL_ASSOC);
    	              $n1 = mysqli_num_rows($result1);  	
    								
    								echo "<select id='layoutSingle[1]' name='layoutSingle[1]' >";
    								echo "<option value=''>-Select Code-</option>";
    								if($n1>0)
    								{
    									while($row1 = mysqli_fetch_array($result1, MYSQL_ASSOC))
    									{
    									  	echo "<option value=".$row1['tyreCodeID'].">".$row1['tyreCode']."</option>";
    									}
    							  }
    								echo "</select>";
    
    							?>
     </div>
    	<table class="dynatable" id="layout"> 
    		<thead> 
          <tr> 
              <th>In</th> 
              <th>Out</th> 
              <th><button class="add" onclick="document.getElementById('one').style.display = 'block';">Single</button></th> 
              <th><button class="add" onclick="document.getElementById('two').style.display = 'block';">Double</button></th>
          </tr> 
        </thead> 
        <tbody> 
             <tr>
    	         	
    	         		
    	         	
    	         	<td>         		
    	         	</td>
    	         	<td>         		
    	         	</td>
    	         	<td>         		
    	         	</td>
             </tr>
             <tr>
    	         	<td>
    	         		
    	         	</td>
    	         	<td>
    	         		
    	         	</td>
    	         	<td>         		
    	         	</td>
    	         	<td>         		
    	         	</td>
             </tr>
        </tbody>
      </table>
    </td>
    </form>
    </tr>
    </table>
    
    
    
    </body> 
    </html>

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Your new site code is missing a </td> some place.
    You can put a div in a table But it has to be inside of a <td>.

    This works for the single:
    Code:
    <td width=700 valign="top">
    	
    	<td><div id="one" style="display:none"><select id='layoutSingle[1]' name='layoutSingle[1]' ><option value=''>-Select Code-</option><option value=1>F1L</option><option value=2>F1R</option><option value=7>R1L</option><option value=8>R1R</option><option value=9>R2L</option><option value=10>R2R</option><option value=11>R3L</option><option value=12>R3R</option></select>	
     </div>
    I moved the <div ... inside of the <td>

    I cant do the double because of your missing </td>

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Sunfighter,
    Please visit my link here http://183.78.169.53/tm/layout1.php.
    You will notice it can only add one single row I would like it to add rows as I press the button. Secondly I also would like to know how to update the index on id for e.g. echo "<select id='layoutDoubleIn[1]' name='layoutDoubleIn[1]' >"; update it when I add a new rows. The reason I need this is for two things first to make sure none of the dropdownlist have the same value. Secondly to capture the value when I post to my .php pages.




    Quote Originally Posted by sunfighter View Post
    Your new site code is missing a </td> some place.
    You can put a div in a table But it has to be inside of a <td>.

    This works for the single:
    Code:
    <td width=700 valign="top">
    	
    	<td><div id="one" style="display:none"><select id='layoutSingle[1]' name='layoutSingle[1]' ><option value=''>-Select Code-</option><option value=1>F1L</option><option value=2>F1R</option><option value=7>R1L</option><option value=8>R1R</option><option value=9>R2L</option><option value=10>R2R</option><option value=11>R3L</option><option value=12>R3R</option></select>	
     </div>
    I moved the <div ... inside of the <td>

    I cant do the double because of your missing </td>

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Made two corrections. Change the body code with this:
    Code:
    <body> 
    <div >
    	<h2 class="form_desicription"> Tyre Code </h2>
    </div>
    <table> 
    	<tr>
    		<form action="/tm/layout1.php" method="post" name="form1" id=form1 onSubmit="return validateForm();">
    			<td valign=top style=width: 700px;>
    				<table class="dynatable" id="layout"> 
    					<thead> 
    					<tr> 
    						<th>In</th> 
    						<th>Out</th> 
    						<th><button class="add" onclick="document.getElementById('one').style.display = 'block';">Single</button></th> 
    						<th><button class="add" onclick="document.getElementById('doubleIn').style.display = 'block';document.getElementById('doubleOut').style.display = 'block';">Double</button></th>
    					</tr> 
    					</thead> 
    
    					<tbody> 
    					<tr> 	
    						<td>
    						<div id="one" style="display:none">
    						<select id='layoutSingle[1]' name='layoutSingle[1]' ><option value=''>-Select Code-</option><option value=1>F1L</option><option value=2>F1R</option><option value=7>R1L</option><option value=8>R1R</option><option value=9>R2L</option><option value=10>R2R</option><option value=11>R3L</option><option value=12>R3R</option></select>	
    						</div>         		
    						</td>
    						<td></td>
    						<td></td>
    						<td></td>
    					</tr>
    					<tr>
    						<td>
    							<div id="doubleIn" style="display:none">
    								<select id='layoutDoubleIn[1]' name='layoutDoubleIn[1]' ><option value=''>-Select Code-</option><option value=3>FI1L</option><option value=4>FI1R</option><option value=5>FO1L</option><option value=6>FO1R</option><option value=13>RI1L</option><option value=14>RI1R</option><option value=15>RO1L</option><option value=16>RO1R</option><option value=17>RI2L</option><option value=18>RI2R</option><option value=19>RO2L</option><option value=20>RO2R</option></select>                     
    							</div>		
    						</td>
    						<td>
    							<div id="doubleOut" style="display:none">
    								<select id='layoutDoubleOut[1]' name='layoutDoubleOut[1]' ><option value=''>-Select Code-</option><option value=3>FI1L</option><option value=4>FI1R</option><option value=5>FO1L</option><option value=6>FO1R</option><option value=13>RI1L</option><option value=14>RI1R</option><option value=15>RO1L</option><option value=16>RO1R</option><option value=17>RI2L</option><option value=18>RI2R</option><option value=19>RO2L</option><option value=20>RO2R</option></select>                     
    							</div>		
    						</td>
    						<td></td>
    						<td></td>
    					</tr>
    					</tbody>
    				</table>
    			</td>
    		</form>
    	</tr>
    </table>
    </body>
    I added a <td></td> to the row with the single drop down and added code to display the second DD in the double.

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Sunfighter,
    Yes it works fine but again only can add only one row of single DD and one of of double DD.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,692
    Thanks
    25
    Thanked 657 Times in 656 Posts
    I believe we should rethink what we are doing. Why do we need to add unlimited rows? What will be in our DDs? Will each DD contain the same or different options? What happens when an option is chosen?

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Sunfigther,
    Why I need to build a dynamic layour of vehicle tyres. So this DD is actually telling us each row either got 2 tyre or 4 tyres and I am giving them codes using the DD. So I hope I am clearer now? So that is why I want to make sure that each DD have different option value and each must be selected too.


  •  

    Posting Permissions

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