Que tal integrantes y amigos del foro.
El motivo de escribirles, es para solicitar su ayuda, explico:
Tengo un formulario que esta integrado principalmente por un select que se llena con una consulta a la BD en MySQL e incluye un evento onchange en PHP para cargar datos correspondientes en 3 input type='text' diferentes, aunado a esto, he adjuntado un botón para agregar una nueva fila, es aquí dónde inicia el problema, la función para agregar dicha fila es javascript.
La fila se agrega, el select también pero dentro de este se muestran muchos espacios en blanco, además los datos que carga en los input se muestran como cadena;
En PHP se muestran asi, esta sería la forma correcta:
SELECT: Cruceta INPUT1: 25563 INPUT2: 30 INPUT3: Piezas
En Javascript se muestra así:
SELECT: Cruceta INPUT1: 25563 30 Piezas
<HTML>
<TITLE> <- OTRO -> </TITLE>
<HEAD>
<script type="text/javascript" src="livevalidation_standalone.js"></script>
</HEAD>
<script language="javascript">
function addRowToTable()
{
var tbl = document.getElementById('tabla');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// Combo material
var celdaComboNombreProducto = row.insertCell(0);
var sel = document.createElement('select');
sel.name = 'material[]';
sel.id = 'material';
sel.options[0] = new Option('Seleccionar Material');
// lo cargamos con un bucle while desde BBDD
<?php include('conecta.php');
$sqltarifa=mysql_query("SELECT materialr3, descripcionmat, existencia, unidad from Material INNER JOIN Unidadmedida
ON umed=idum order by descripcionmat asc");
while ($ftarifa=mysql_fetch_array($sqltarifa)){
echo "sel.options['$ftarifa[0]']= new Option('$ftarifa[1]', '$ftarifa[0] $ftarifa[2] $ftarifa[3]');";
}
//mysql_free_result($sqltarifa);
?>
<!--sel.onchange = function(){muestraPrecioProducto(this.value);}
sel.onchange = function(){muestraPrecioProducto(this.value, this.id);}
var end=" ";
function muestraPrecioProducto(valor, id){
document.getElementById('r3'+iteration).value = valor.split(" ");
document.getElementById('existencia'+iteration).va lue = valor;
document.getElementById('unidad'+iteration).value = valor;
}
celdaComboNombreProducto.appendChild(sel);
// input r3
var codigor3 = row.insertCell(1);
var cdg = document.createElement('input');
cdg.type = 'text';
cdg.id = 'r3'+iteration;
cdg.name = 'r3[]'+iteration;
cdg.size = 4;
cdg.readOnly = true;
<!--cdg.onkeypress = keyPressTest;
codigor3.appendChild(cdg);
// input existencia
var existencia = row.insertCell(2);
var el = document.createElement('input');
el.type = 'text';
el.id = 'existencia'+iteration;
el.name = 'existencia[]'+iteration;
el.size = 5;
el.readOnly = true;
<!--el.onkeypress = keyPressTest;
existencia.appendChild(el);
// input unidad
var unidad = row.insertCell(3);
var un = document.createElement('input');
un.type = 'text';
un.id = 'unidad'+iteration;
un.name = 'unidad[]'+iteration;
un.size = 6;
un.readOnly = true;
<!--un.onkeypress = keyPressTest;
unidad.appendChild(un);
alert (iteration);
}
</script>
<table id="tabla">
<form>
<tr>
<th colspan="7">Tabla Ejemplo</th>
</tr>
<?php
$sqlu="SELECT materialr3, descripcionmat, existencia, unidad from Material INNER JOIN Unidadmedida
ON umed=idum order by descripcionmat asc";
$respu=mysql_query($sqlu) or die ("Error al selccionar Unidad de Medida 1 ".mysql_error());
echo "<tr><td align='center'><b>Material</td><td align='center'><b>R3</td><td align='center'><b>Existencia</td>
<td align='center'><b>UM</td><td align='center'><b>Despachar</td><td align='center'><b>Destino</td><td align='center'><b>Observacion</td></tr>";
?> <INPUT type="button" value="Add Row" onclick="addRowToTable(tabla)" />
<TR>
<TD>
<select name="materialu" id="selecprod" onchange="r3d.value=this.options[this.selectedIndex].getAttribute('r3');
umedd.value=this.options[this.selectedIndex].getAttribute('medida');
exisd.value=this.options[this.selectedIndex].getAttribute('exis');"/>
<option value="$row['materialr3']">Seleccionar Material</option>
<?php
while ($row = mysql_fetch_assoc($respu)){ //while($row=mysql_fetch_row($respM))
?>
<option value='$row['descripcionmat'] r3="<?php echo $row['materialr3'] ?>
"medida="<?php echo $row['unidad'] ?>"exis="<?php echo $row['existencia'] ?>"> <?php echo $row['descripcionmat'] ?> </option>
<?php
}
?>
</select>
</TD>
<td><input type='text' name='r3[]' id='r3d' value='' size='4' maxlength='20' readonly></td>
<td><input type='text' name='exis[]' id='exisd' value='' size='5' maxlength='10' readonly></td>
<script>
var ex =document.getElementById("exisd").value;
var existencia = Math.abs(ex);
</script>
<td><input type='text' name='medida[]' id='umedd' value='' size='6' maxlength='10' readonly></td>
<td><input type='text' name='despachar[]' size='6' id='desc'></td>
<script type="text/javascript">
var d2 = new LiveValidation('desc');
d2.add(Validate.Presence);
d2.add( Validate.Numericality, { minimum: 1, onlyInteger: true } );</script>
<td><input type='text' name='destino[]' maxlength='21'></td>
<td><input type='text' name='obs[]' size='10'></td></tr>
</table>
</form>
</html>