I am working on Joomla.I have created a table displaying a single row at first time. After clicking on button "add new row" a row is appended to the table. In that row there are text boxes and dropdowns.
I want to store the values of dynamically created textboxes and dropdowns in variables. I have stored the values in javascript variables, but unable to fetch those values in php variable.
Somewhere I read that this can be done using AJAX. But as am very new to php and don't know how to use AJAX.
Please help me out to solve this problem. thanks in advance. Here is my javascripts and html code..
<?php
$db=JFactory::getDBO();
$ses_id = session_id();
$flagquery="select * from flag";
$db->setQuery($flagquery);
$resultflag=$db->loadObjectList();
foreach($resultflag as $dataflag)
{
if($dataflag->userid == $ses_id)
{
$flag=$dataflag->flag;
}
}
if($flag=='0')
{
$mat="select mat_name from mat_den";
$db->setQuery($mat);
$matname=$db->loadObjectList();
$rowsize="select DISTINCT nps_si from std_pipe_data";
$db->setQuery($rowsize);
$rowsize_si=$db->loadObjectList();
}
else if($flag=='1')
{
$mat="select mat_name from mat_den";
$db->setQuery($mat);
$matname=$db->loadObjectList();
$rowsize="select DISTINCT nps from std_pipe_data";
$db->setQuery($rowsize);
$rowsize_fps=$db->loadObjectList();
}
$rowrating="select DISTINCT rating from flang_schedule";
$db->setQuery($rowrating);
$fillrating=$db->loadObjectList();
?>
<html>
<head>
<script type="text/javascript" language="javascript">
var i=0;
function addNewRow()
{
i++;
document.getElementById("varValue").value=i;
var table = document.getElementById("table1");
var tr = table.insertRow(-1);
var cell0 = tr.insertCell(0);
cell0.innerHTML= '<input class="tab" type="text" name="des'+i+'" id="des'+i+'" value="" size="10"/>';
var cell1 = tr.insertCell(1);
cell1.innerHTML= '<select class="drop" name="size'+i+'" id="size'+i+'"> <?php foreach($rowsize_si as $size_si) { ?><option value="<?php echo $size_si->nps_si; ?>"> <?php echo $size_si->nps_si;?> </option> <?php } ?> </select>';
var cell2 = tr.insertCell(2);
cell2.innerHTML= '<select class="drop" name="schedule'+i+'" id="schedule'+i+'"> <option value="10">10</option><option value="30">30</option><option value="40">40</option><option value="STD">STD</option><option value="80">80</option><option value="XS">XS</option> </select>';
var cell3 = tr.insertCell(3);
cell3.innerHTML= '<select class="drop" name="fl_type'+i+'" id="fl_type'+i+'"><option value="WNRF">WNRF</option><option value="SORF">SORF</option><option value="SOFF">SOFF</option><optionvalue="WNFF">WNFF</option><option value="LJ">LJ</option></select>';
var cell4 = tr.insertCell(4);
cell4.innerHTML= '<select class="drop" name="rating'+i+'" id="rating'+i+'"> <?php foreach($fillrating as $rating) { ?> <option value="<?php echo $rating->rating; ?>"> <?php echo $rating->rating; ?></option><?php } ?></select>';
var cell5 = tr.insertCell(5);
cell5.innerHTML= '<input type="checkbox" name="chkbox'+i+'" id="chkbox'+i+'"/>';
}
</script>
<script type="text/javascript">
function show1()
{
var table = document.getElementById("table1");
var i;
var tr = table.getElementsByTagName('tr');
for (i = 2; i < tr.length; i++)
{
var td = tr[i].getElementsByTagName('td');
var td1 = td[0].childNodes[0].value;
var td2 = td[1].childNodes[0].value;
var td3 = td[2].childNodes[0].value;
var td4 = td[3].childNodes[0].value;
var td5 = td[4].childNodes[0].value;
var td6 = td[5].childNodes[0].value;
var val = td1+td2+td3+td4+td5+td6;
alert(val);
}
}
</script>
</head>
<body>
<div class="tableHolder3">
<table border="1" cellspacing="0" cellpadding="0" id="table1">
<tr style="background-color:#C0504E;">
<td align="center"><label class="label">Nozzle Mark </label></td>
<td align="center"><label class="label">Size </label></td>
<td align="center"><label class="label">Schedule</label></td>
<td align="center"><label class="label"> Flange Type</label></td>
<td align="center"><label class="label">Rating </label></td>
<td align="center"><label class="label">With Blind</label></td>
</tr>
<tr>
<td align="center"><input class="tab" type="text" value="" size="10"/></td>
<td align="center">
<select class="drop" width="100%">
<?php
if($flag=='0')
{
foreach($rowsize_si as $size_si)
{
?>
<option value="<?php echo $size_si->nps_si;?>"><?php echo $size_si->nps_si;?></option>
<?php
}
}
else
{
foreach($rowsize_fps as $size_fps)
{
?>
<option value="<?php echo $size_fps->nps;?>"><?php echo $size_fps->nps;?></option>
<?php
}
}
?>
</select>
</td>
<td align="center">
<select class="drop">
<option value="10">10</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="STD">STD</option>
<option value="80">80</option>
<option value="XS">XS</option>
</select>
</td>
<td align="center">
<select class="drop">
<option value="WNRF">WNRF</option>
<option value="SORF">SORF</option>
<option value="SOFF">SOFF</option>
<option value="WNFF">WNFF</option>
<option value="LJ">LJ</option>
</select>
</td>
<td align="center">
<select class="drop">
<?php
foreach($fillrating as $rating)
{
?>
<option value="<?php echo $rating->rating;?>"><?php echo $rating->rating;?></option>
<?php
}
?>
</select>
</td>
<td align="center"><input type="checkbox" /></td>
</tr>
</table>
<input type="submit" onclick="addNewRow();" name="Add New Nozzel" value="Add New Nozzel" />
<input type="submit" onclick="show1();" name="submit" value="submit" />
<input type="text" value="" name="varValue" id="varValue" />
</div>
</body>
</html>
