...

View Full Version : How to add row accordingly?



newbie14
07-02-2011, 08:24 PM
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?

sunfighter
07-03-2011, 06:46 PM
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>

newbie14
07-04-2011, 12:20 AM
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.


<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>

sunfighter
07-04-2011, 06:02 AM
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:

<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>

newbie14
07-04-2011, 06:36 AM
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.





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:

<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>

sunfighter
07-04-2011, 04:45 PM
Made two corrections. Change the body code with this:

<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.

newbie14
07-04-2011, 06:42 PM
Dear Sunfighter,
Yes it works fine but again only can add only one row of single DD and one of of double DD.

sunfighter
07-05-2011, 06:10 PM
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?

newbie14
07-05-2011, 07:47 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum