Extraer valores de campos creados dinámicamente

aventis · #1 (**permalink**) 01/06/2012, 04:11

Buenos días.

Quizá está pregunta para vosotros sea algo fácil, pero yo he empezado hace 2 semanas y ando algo perdido.

Estoy creando un formulario con algo parecido a una lista de la compra en la que se seleccionan los artículos en un combo (que almacena su importe), el usuario introduce las unidades y luego se calcula el importe.

Como quiera que los artículos son variables, he tratado de hacer que los select se añadan dinámicamente. Para ello me he basado en [URL="http://www.telefonica.net/web2/blas-mar/crear.html"]este tuto[/URL].

Todo bien hasta que tengo que tomar los valores de los artículos seleccionados en el combo para calcular los subtotales. Ahí me pierdo, porque no sé cómo llamar de forma genérica a los correspondientes select y texts. Es por eso que os pido ayuda.

Tened en cuenta, que no solo me interesa obtener subtotales, si no también un total que sea la suma de los mismos, y con el cuál tendré que seguir operando en adelante.

Mi código:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html> 
<head>
<title>Crear input file</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
num=0;
function crear(obj) {
  num++;
  fi = document.getElementById('fiel');
  contenedor = document.createElement('div');
  contenedor.id = 'div'+num;
  fi.appendChild(contenedor);

  
 var arraytextos=new Array(8)
 arraytextos[0] = "Text"
 arraytextos[1] = "Numero"
 arraytextos[2] = "Compaq 686"
 arraytextos[3] = "Dell 486"
 arraytextos[4] = "Dell 586"
 arraytextos[5] = "Dell 686"
 arraytextos[6] = "IBM 486"
 arraytextos[7] = "IBM 586"
 arraytextos[8] = "IBM 686"
 
 var arrayvalores=new Array(8)
 arrayvalores[0] = "20"
 arrayvalores[1] = "10"
 arrayvalores[2] = "30"
 arrayvalores[3] = "50"
 arrayvalores[4] = "10"
 arrayvalores[5] = "8"
 arrayvalores[6] = "7"
 arrayvalores[7] = "14"
 arrayvalores[8] = "50"
 
 ele = document.createElement('select');
 ele.name='selector'+num;
 
 for (i=0; i<8; i++) 
 {
 opt = document.createElement('option');
 opt.setAttribute("value",arrayvalores[i])
 opt.innerHTML = arraytextos[i];
 ele.appendChild(opt);
 }
 contenedor.appendChild(ele);
  
  
  ele = document.createElement('input');
  ele.type = 'text';
  ele.value = '0';
  ele.size = '1';
  ele.name = 'casilla'+num;
  contenedor.appendChild(ele);
  
  ele = document.createElement('input');
  ele.type = 'button';
  ele.value = 'Borrar';
  ele.name = 'boton'+num;
  ele.onclick = function () {borrar(this.name)}
  contenedor.appendChild(ele);
}
function borrar(obj) {
  fi = document.getElementById('fiel');
  fi.removeChild(document.getElementById(obj));
}

Con respecto al ejemplo, he cambiado los nombres de los elementos (era siempre div+num), creo que eso ha hecho que el botón de borrar no funcione.
Agradeceré cualquier ayuda en este aspecto también, así como cualquier otro consejo u observación, ya que como he dicho, soy bastante novato.

Muchas gracias de antemano.

Luis_v · #2 (**permalink**) 01/06/2012, 07:15

El esquema general de la idea yo lo veo bastante bien hecho. Pocas cosas cambiaria. Mas adelante te las señalo.

En cuanto a la pregunta principal, el como obtener el importe total, deberia ser facil puesto que cada select y cada casilla de cantidad tienen nombre unico.

Importe Parcial = precio articulo (select.value) + numero articulos (casilla.value)
Importe Total = suma Importes Parciales

En codigo:

Código:

importe = 0;
for (int n=1; n<=num; n++) {
  var objArticulo = document.getElementsByName('selector'+n)[0];
  var objCantidad = document.getElementsByName('casilla'+n)[0];

  importe += objArticulo.value * objCantidad.value;
}

Ten en cuenta, que para que el anterior enfoque sea valido, la variable global "num" actua como contador de articulos, asi que al igual que lo incrementas cuando añades una compra, tienes que decrementarlo cuando la eliminas.

Cosas a cambiar.

Acostumbrate, como norma general, a declarar en su primer uso las variables con la palabra reservada "var". Asi limitas su ambito a aquel en que la declaras, de otro modo su ambito sera global.

A la funcion "crear" le declaras un parametro "obj", que luego no usas para nada. Eliminalo.

En la funcion "borrar" declaras un parametro "obj, pero luego no lo usas adecuadamente. Le pasas el nombre del boton pero luego tratar de obtener el elemento a borrar por id. Creo que te complicas la vida. Tu quieres borrar el div contenedor, pues pasale directamente una referencia a ese contenedor.

Código:

ele.onclick = function () {borrar(contenedor)}

Su codigo prodria quedar asi.

Código:

function borrar(obj) {
  fi = document.getElementById('fiel');
  fi.removeChild(obj);
  numm--;
}

Las opciones de los select son las mismas para todos. No necesitas crear los arrays "arraytextos", y "arrayvalores" en cada llamada a la funcion "crear". Saca su construccion fuera del cuerpo de la funcion.

Quizas en lugar de usar dos arrays, uno para textos y otro para valores, usaria un unico array articulos, y cada articulo tendria las propiedades texto y valor.

falquez · #3 (**permalink**) 01/06/2012, 09:43

Saludos:

Algo parecido estoy pasando. El problema es que cuando se procesa la información en php de los selects multiples con optgroup creados dinamicamente solo obtengo el valor de la primer select, el cual estaba originalmente y no fue creado dinamicamente.

se utilizan para este caso un formulario, un javascript para crear los selects (clonarlos con una legera modificación) y el ultimo jquery que solo interviene para la creación de los selects necesarios.

FORMULARIO (con el proceso en php)

<?php
if(isset($_POST['s1'])) {
function array_count_all($arr, $r = 0) {
foreach ($arr as $k => $v) {
if (is_array($v)) {
$r = array_count_all($v, $r);
$r++;
}
}
return $r;
}
$dormitorios = ($_POST["dormitorios"]);
$cantdorm = ($_POST["cantdorm"]);
$numdor = count($cantdorm);
$cuenta1 = '1';

while($cuenta1<=($numdor+1))
{
echo '<br /><br /><strong>Dormitorio #' . $cuenta1 . '</strong> ';
for ($i=0;$i<count($dormitorios);$i++)
{
if ($i == 0){$opcion = "Tipo de Dormitorio";}
if ($i == 1){$opcion = "Tipo de Cama";}
if ($i == 2){$opcion = "Cama supletoria";}
if ($i == 3){$opcion = "Baño";}
if ($i == 4){$opcion = "Closet";}
if ($i == 5){$opcion = "Aire Acondicionado";}

echo "<br>" . $opcion . ": " . $dormitorios[$i];
}
$cuenta1=($cuenta1+1);
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>

<link href="css/iwannaplace.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js2/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js2/jquery.addfield.js"></script>

</head>

<body>

<form method="get" action="">

<div id="div_0">
<strong>Características del Dormitorio:</strong>
<select name="dormitorios[]" size="5" multiple="multiple" class="text" id="dormitorios" >
<optgroup label="Tipo">
<option value="Individual"><strong>Individual</strong></option>
<option value="Doble"><strong>Doble</strong></option>
<option value="Triple"><strong>Triple</strong></option>
<option value="Cuadruple"><strong>Cuadruple</strong></option>
<option value="Jr Suite"><strong>Jr Suite</strong></option>
<option value="Suite"><strong>Suite</strong></option>
</optgroup>
<optgroup label="Camas">
<option value="Sencilla"><strong>Sencilla</strong></option>
<option value="Doble"><strong>Doble</strong></option>
<option value="Queen size"><strong>Queen Size</strong></option>
<option value="King size"><strong>King Size</strong></option>
<option value="Sofá cama"><strong>Sofá cama</strong></option>
</optgroup>
<optgroup label="Cama Supletoria">
<option value="Con cama supletoria"><strong>Con cama supletoria</strong></option>
<option value="Sin cama supletoria"><strong>Sin cama supletoria</strong></option>
</optgroup>
<optgroup label="Baño">
<option value="Completo"><strong>Baño completo</strong></option>
<option value="Medio baño"><strong>Medio baño</strong></option>
<option value="Sin baño"><strong>Sin baño</strong></option>
</optgroup>
<optgroup label="Closet">
<option value="Walk-in Closet"><strong>Walk-in Closet</strong></option>
<option value="Closet normal"><strong>Closet normal</strong></option>
<option value="Sin closet"><strong>Sin closet</strong></option>
</optgroup>
<optgroup label="Aire acondicionado">
<option value="Central"><strong>Central</strong></option>
<option value="Empotrado"><strong>Empotrado</strong></option>
<option value="Split"><strong>Split</strong></option>
<option value="Sin aire acondicionado"><strong>Sin aire acondicionado</strong></option>
</optgroup>
</select>

<strong> Cantidad: </strong>
<input id="cantdorm" name="cantdorm[]" type="text" class="input" style="width:40px;" />
<input name="button" type="button" class="bt_plus" id="0" value="+" />
</div>

<p>
<input type="submit" name="s1" value="Enviar">
</p>
</form>

</body>
</body>

el javascript que crea los selects dinamicos:

$(document).ready(function() {
//ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
$(".bt_plus").each(function (e){
$(this).bind("click",addField);
});
});

function addField(){
// ID del elemento div quitandole la palabra "div_" de delante. Pasi asi poder aumentar el número. Esta parte no es necesaria pero yo la utilizaba ya que cada campo de mi formulario tenia un autosuggest , así que dejo como seria por si a alguien le hace falta.

var clickID = parseInt($(this).parent('div').attr('id').replace( 'div_',''));

// Genero el nuevo numero id
var newID = (clickID+1);

// Creo un clon del elemento div que contiene los campos de texto
$newClone = $('#div_'+clickID).clone(true);

//Le asigno el nuevo numero id
$newClone.attr("id",'div_'+newID);

$newClone.children("#dormitorios option::selected").remove();
$newClone.children("#dormitorios").attr("name","do rmitorios"+ newID +"");

//Borro el valor del segundo campo input(este caso es el campo de cantidad) y lo identifico secuencialmente
$newClone.children("input").eq(0).val('');
$newClone.children("#cantdorm").attr("name","cantd orm"+ newID +"");
//Asigno nuevo id al boton
$newClone.children("input").eq(1).attr("id",newID)

//Inserto el div clonado y modificado despues del div original
$newClone.insertAfter($('#div_'+clickID));

//Cambio el signo "+" por el signo "-" y le quito el evento addfield
$("#"+clickID).val('-').unbind("click",addField);

//Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
$("#"+clickID).bind("click",delRow);

}

function delRow() {
// Funcion que destruye el elemento actual una vez echo el click
$(this).parent('div').remove();

}

#######################

Si alguien me puede dar una manito, desde ya, le quedo muy agradecido.

falquez · #4 (**permalink**) 01/06/2012, 09:46

No tomar en cuenta la función array_count_all( que la incluí por si acaso eso daba resultado... pero nop!

aventis · #5 (**permalink**) 01/06/2012, 14:59

Cita:

Iniciado por Luis_v

...

Te estoy muy agradecido, Luis_v por tu respuesta.

Lo de borrar ya funciona.

Sin embargo, no consigo hacer que funcione aún el cálculo. Como te decía, soy bastante novato y a lo mejor no me entero.

- He creado un campo y un botón en el formulario para que el text me muestre el importe calculado.

- He copiado el for, pero tenido que eliminar el "int" que va después del for porque si no me da error y no funciona nada. Eliminándolo el formulario carga sin errores.

Queda así, más o menos:

Código Javascript:

Ver originalfunction calcularTotal()
{
importe = 0;
for (n=1; n<=num; n++)
{
  var objArticulo = document.getElementsByName('selector'+n)[0];
  var objCantidad = document.getElementsByName('casilla'+n)[0];
 
  importe += objArticulo.value * objCantidad.value;
}
 
  document.form1.casillaTotal.value=importe;
}

Al calcular, la consola me dice que:
value es nulo o no es un objeto

...
¿Lo del += es errata? ...da igual no funciona tampoco quitando el +.

En cuanto a las demás observaciones, gracias, pero casi todas son del fulano al que le he copiado el código. Además, se ve en el post: mi cosecha es lo que no tiene espacios antes del renglón (y es copiado también...).

Lo de juntar value y text en un array no sé cómo hacerlo ¿me podías linkar un ejemplo?

Gracias de nuevo.

Por cierto, has estado fino fino con lo del num--

falquez: no me importa que postees aquí, pero me parece que eso debería ir en el subforo de php, no?

falquez · #6 (**permalink**) 06/06/2012, 08:54

Mil disculpas Aventis si lo consultado aquí es irrelevante para ti. El título de la pregunta que efectúas es la misma que me he hacho yo. Si bien es cierto que se incluye codificación php, no es menos cierto que en mi caso, un papel preponderante es el que asume el javascript y el jquery ya que según he estado investigando, la obtención de los valores de los selects multiples con optgroup generados dinámicamente es más sencilla vía java o jquery.

Nuevamente te pido me disculpes por el desatino de pensar que lo que quería era algo similar a lo que querías. Me apena que en mi primer post en este foro me envíen, eso si: muy cortes y cordialmente, a preguntar por otro lado. Buen día tengas tú.