Tengo un formulario con dos selects dependientes que llenan informacion desde PHP por medio de AJAX.
Este formulario permite agregar y eliminar renglones. Mi problema es que cuando el usuario intenta hacer la seleccion a partir del segundo renglon aparece la informacion en el select dependiente pero del primer renglon,,,
Gracias de antemano!!!
el formulario seria este:
El código es el siguiente:
<b>FORMULARIO</b>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Formularios Dinamicos</title>
<script type="text/javascript" src="ajax.js"></script>
<style type="text/css" media="all">
.hide {
visibility: hidden;
display: none;
}
div.row {
display: table-row;
clear: both;
padding: 2px;
vertical-align: top;
}
div.row div {
display: table-cell;
padding: 2px;
vertical-align: middle;
float:left;
display: inline;
}
div.row div.title {
display: table-cell;
padding: 2px;
margin: 2px;
background-color: #EFEBE7;
font: bold 12px Verdana, Arial, Helvetica, serif;
color: #153244;
vertical-align: middle;
}
div.row div img{
vertical-align: bottom;
border:0px solid;
padding-left: 1px;
}
input, textarea {
font: 12px Verdana, Arial, Helvetica, serif;
border: #153244 1px solid;
color: #000000;
background-color: #EFEBE7;
padding: 1px 3px 1px 3px;
}
select {
font: 12px Verdana, Arial, Helvetica, serif;
border: #153244 1px solid;
color: #000000;
background-color: #EFEBE7;
}
</style>
<script language="JavaScript" type="text/javascript">
var lineCount = new Array();
function addFormLine(div, line, f)
{
var f = (f == null) ? "" : f;
lineCount[div] = lineCount[div] == null ? 1 : lineCount[div] + 1;
var mySelf = div + "_line_" + lineCount[div];
var myNum = lineCount[div];
var divTarget = document.getElementById(div);
var divLine = document.getElementById(line).innerHTML;
var divTitle = document.getElementById(line).getAttribute('title' );
var newDiv = document.createElement('div');
newDiv.className = 'row';
newDiv.setAttribute('id', mySelf);
divLine = divLine.replace(/mySelf/g, mySelf);
newDiv.innerHTML = divLine;
newDiv.innerHTML += "<div class=\"cell\"><img style=\"cursor: pointer;\" src=\"less.png\" border=\"0\" onclick=\"removeFormLine(\'" + mySelf + "\'); " + f + "\"></div>";
if (divTitle != null && divTarget.hasChildNodes() == false){
var titles = divTitle.split(",");
var newTitle = document.createElement('div');
newTitle.className = 'row';
for (i = 0; i < titles.length; ++i){
var titleSize = titles[i].match(/\(\w+\)/,'');
titleSize = titleSize[0].replace(/[\(\)]/g,'');
var titleName = titles[i].replace(/\(\w+\)/,'');
newTitle.innerHTML += "<div class=\"title\" style=\"width: " + titleSize + "px;\">" + titleName + "</div>";
}
divTarget.appendChild(newTitle);
divTarget.setAttribute('cab', '1');
}
divTarget.appendChild(newDiv);
}
function removeFormLine(div)
{
var parentName = div.replace(/_line_\w+/g, '');
var divParent = document.getElementById(parentName);
var divTarget = document.getElementById(div);
var hasTitle = divParent.getAttribute('cab');
divParent.removeChild(divTarget);
if (hasTitle != null && divParent.childNodes.length == 1){
divParent.innerHTML = "";
}
}
</script>
<script type="text/javascript">
var ajax = new Array();
function getActList(sel,div,line)
{
var catCode = sel.options[sel.selectedIndex].value;
document.getElementById("actividades[]").options.length = 0;
if(catCode.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getActividad.php?catCode='+catCode+'&num='+lineCo unt[div];
ajax[index].onCompletion = function(){ createAct(index) };
ajax[index].runAJAX();
}
}
function createAct(index)
{
var obj = document.getElementById("actividades[]");
eval(ajax[index].response);
}
</script>
</head>
<body>
<form method="POST" action="resultado.php" name='fdin'>
<a href="javascript:addFormLine('myDiv', 'myLine');">Agregar Linea +</a><br><br>
<div id="myDiv"></div>
<br>
<input type="submit">
</form>
<div id="myLine" class="hide" title="Categoria(200),Actividades(200),Costo(50)">
<div>
<select id="categoria[]" name="categoria[]" style="width: 200px" onchange="getActList(this,'myDiv', 'myLine')">
<option value="">Categoria</option>
<?php
$db=mysql_connect ("localhost", "root", "") or
die ('No se pudo conectar a la base de datos por que : ' . mysql_error());
mysql_select_db ("bd",$db);
$sqlcat="SELECT * FROM catdestajo ORDER BY nomcategoria";
$rescat = mysql_query($sqlcat,$db);
while ($regcat=mysql_fetch_assoc($rescat)){
echo "<option value='".$regcat['idcategoria']."'>".$regcat['nomcategoria']."</option>";
}
?>
</select>
</div>
<div>
<select id="actividades[]" name="actividades[]" style="width: 200px"></select>
</div>
<div><input type="text" value="" name="costo[]" maxlength="11" style="width: 50px"></div>
</div>
</body>
</html>
getActividad.php
<?php
if(isset($_GET['catCode'])){
$db=mysql_connect ("localhost", "root", "") or
die ('No se pudo conectar a la base de datos por que : ' . mysql_error());
mysql_select_db ("egsa",$db);
$sqlact="SELECT * FROM actdestajo WHERE idcategoria='".$_GET['catCode']."' ORDER BY nomactividad";
$resact = mysql_query($sqlact,$db);
while ($regact=mysql_fetch_assoc($resact)){
echo "obj.options[obj.options.length] = new Option('".$regact['nomactividad']."','".$regact['idactividad']."');\n";
}
}
?>
