Foros del Web » Programando para Internet » Javascript »

Añadir campos dinámicamente

Estas en el tema de Añadir campos dinámicamente en el foro de Javascript en Foros del Web. Tengo una pantalla con un formulario, en dicho formulario el usuario rellenará una serie de campos entre los cuales necesito realizar lo siguiente : 1. ...
  #1 (permalink)  
Antiguo 05/02/2008, 04:36
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 18 años, 6 meses
Puntos: 0
Añadir campos dinámicamente

Tengo una pantalla con un formulario, en dicho formulario el usuario rellenará una serie de campos entre los cuales necesito realizar lo siguiente :

1. Hay un enlace que se llama "Añadir Artículo".
2. Acción ==> Saltará un PopUp, para poder buscar unos artículos.
3. Acción ==> Selecciono un artículo.
4. Acción ==> Se cierra la ventana popUp y en la página "padre" se añade dos textbox, uno con el precio de articulo seleccionado y otro con su descripción. A la izquierda se pondrá la imagen de la papelera.
5. Esta operación se podrá realizar n veces, sería un poco simular el efecto de Adjuntar del GMAIL.
6. Uno de los campos del formulario es txtbox de totales, que se va sumando según los artículos seleccionados.
7. Por ejemplo si he seleccionado tres articulos con precio, 10, 20 y 30 en dicho campo saldrá 60, si elimino el articulo que vale 20, el campo saldrá 40.

Alguien me puede ayudar?
  #2 (permalink)  
Antiguo 05/02/2008, 07:09
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 18 años, 6 meses
Puntos: 0
Re: Añadir campos dinámicamente

NAdie me puede ayudar? estoy bastante atascado.
  #3 (permalink)  
Antiguo 05/02/2008, 09:53
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 3 meses
Puntos: 772
Re: Añadir campos dinámicamente

Hola infolan

Sería más fácil ayudarte si pones lo que ya tienes hecho y explicas qué te falta o qué errores te da.

Saludos,
  #4 (permalink)  
Antiguo 05/02/2008, 10:04
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 18 años, 6 meses
Puntos: 0
Re: Añadir campos dinámicamente

el tema es que no sé por donde empezar, ese es mi problema.
  #5 (permalink)  
Antiguo 06/02/2008, 02:32
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 18 años, 6 meses
Puntos: 0
Añado mi código Re: Añadir campos dinámicamente

Buenas,

Ayer noche realicé un codigo, a apartir de aqui lo que necesito y me quedo atascado es lo siguiente:

En el enlace "Buscar" te abre un POP para buscar articulos, y cuando yo selecciono uno, en la pantalla anterior que se añada el código, descripción y precio en los testBox, y esto para los diferentes "Buscar" creados dinámicamente.


<html>
<head>
<title>Test</title>
</head>
<script>
var number ="100";

function eliminarAll(){
var tbody = document.getElementById("table1").getElementsByTag Name("tbody")[0];
while (tbody.hasChildNodes()) {
tbody.removeChild(tbody.firstChild);
}
}

function eliminar(idRow)
{
nodoTabla = document.getElementById(idRow);
nodoTabla.parentNode.removeChild(nodoTabla);
}

function addTextBox()
{
number++;
var tbody = document.getElementById("table1").getElementsByTag Name("tbody")[0];
var row = document.createElement("tr");

var cell1 = document.createElement("td");

cell1.style.border="0px";
cell1.style.cellspacing="0px";
cell1.style.cellpadding="0px";

var papelera = document.createElement("a");
var img = document.createElement("IMG");
img.src="../tools/img/papelera.gif";
img.border=0;
img.alt="Eliminar";

papelera.appendChild(img);
papelera.href="javascript:eliminar('"+number+"');" ;
cell1.appendChild(papelera);

var espacio = document.createElement("IMG");
espacio.border=1
espacio.src="transparent.gif";
espacio.width="15px";
cell1.appendChild(espacio);

var inputTextCodigo = document.createElement("INPUT");
inputTextCodigo.type = "text";
inputTextCodigo.name = "textCodigo[" + number + "]";
inputTextCodigo.size = 15;
//inputTextCodigo.value = "textCodigo[" + number + "]";
cell1.appendChild(inputTextCodigo);

var espacio = document.createElement("IMG");
espacio.border=1
espacio.src="transparent.gif";
espacio.width="15px";
cell1.appendChild(espacio);

var inputTextDescr = document.createElement("INPUT");
inputTextDescr.type = "text";
inputTextDescr.name = "textDescripcion[" + number + "]";
inputTextDescr.size = 70;
//inputTextDescr.value = "textDescripcion[" + number + "]";
cell1.appendChild(inputTextDescr);

var espacio = document.createElement("IMG");
espacio.border=1
espacio.src="transparent.gif";
espacio.width="15px";
cell1.appendChild(espacio);

var inputTextCantidad = document.createElement("INPUT");
inputTextCantidad.type = "text";
inputTextCantidad.name = "textTextCantidad[" + number + "]";
inputTextCantidad.size = 20;
//inputTextCantidad.value = "textTextCantidad[" + number + "]";
cell1.appendChild(inputTextCantidad);

var newLink=document.createElement('a');
newLink.setAttribute('href','buscar.html');
newLink.setAttribute('target','_blank');
newLink.className='contrast';
var linkText=document.createTextNode('buscar');
newLink.appendChild(linkText);

cell1.appendChild(newLink);


row.appendChild(cell1);
row.id = number;
tbody.appendChild(row);
}

</script>
<body>
<table border="1" width="100%">
<tr>
<td width="16%">Código</td>
<td width="47%">Descripción</td>
<td width="">Cantidad</td>
</tr>
<tr>
<td colspan="6">
<table id="table1" style="border:1px;cellspacing:0px;cellpadding:0px; " border="0">
<tbody></tbody>
</table>
</td>
</tr>
<tr>
<td colspan="5">
<input type="text" size="10" maxlength="10">
<a href="javascript:addTextBox();">Añadir Articulos</a>
<img src="transparent.gif" width="10%" border="0" height="1">
<a href="javascript:eliminarAll();">Eliminar todos</a>
</td>
</tr>
</table>
</body>
</html>
  #6 (permalink)  
Antiguo 06/02/2008, 04:37
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 18 años, 6 meses
Puntos: 0
Re: Añadir campos dinámicamente

Ya tengo resuelta la otra parte, lo único que me gustaría es poder sumar todas las tarifas y ponerlo en textbox que hay al lado del enlace "Añadir...".

Tiniendo encuenta, que si se añade un articulo se suma la cantidad o si se elimina, se resta.

Os paso el codigo :

Ventana padre

<html>
<head>
<title>Test</title>
</head>
<script>
var number ="100";

function eliminarAll(){
var tbody = document.getElementById("table1").getElementsByTag Name("tbody")[0];
while (tbody.hasChildNodes()) {
tbody.removeChild(tbody.firstChild);
}
}

function eliminar(idRow)
{
nodoTabla = document.getElementById(idRow);
nodoTabla.parentNode.removeChild(nodoTabla);
}

function addTextBox()
{
number++;
var tbody = document.getElementById("table1").getElementsByTag Name("tbody")[0];
var row = document.createElement("tr");

var cell1 = document.createElement("td");

cell1.style.border="0px";
cell1.style.cellspacing="0px";
cell1.style.cellpadding="0px";

var papelera = document.createElement("a");
var img = document.createElement("IMG");
img.src="../tools/img/papelera.gif";
img.border=0;
img.alt="Eliminar";

papelera.appendChild(img);
papelera.href="javascript:eliminar('"+number+"');" ;
cell1.appendChild(papelera);

var espacio = document.createElement("IMG");
espacio.border=1
espacio.src="transparent.gif";
espacio.width="15px";
cell1.appendChild(espacio);

var inputTextCodigo = document.createElement("INPUT");
inputTextCodigo.type = "text";
inputTextCodigo.name = "textCodigo[" + number + "]";
inputTextCodigo.id = "textCodigo[" + number + "]";
inputTextCodigo.size = 15;
//inputTextCodigo.value = "textCodigo[" + number + "]";
cell1.appendChild(inputTextCodigo);

var espacio = document.createElement("IMG");
espacio.border=1
espacio.src="transparent.gif";
espacio.width="15px";
cell1.appendChild(espacio);

var inputTextDescr = document.createElement("INPUT");
inputTextDescr.type = "text";
inputTextDescr.name = "textDescripcion[" + number + "]";
inputTextDescr.id = "textDescripcion[" + number + "]";
inputTextDescr.size = 70;
//inputTextDescr.value = "textDescripcion[" + number + "]";
cell1.appendChild(inputTextDescr);

var espacio = document.createElement("IMG");
espacio.border=1
espacio.src="transparent.gif";
espacio.width="15px";
cell1.appendChild(espacio);

var inputTextCantidad = document.createElement("INPUT");
inputTextCantidad.type = "text";
inputTextCantidad.name = "textTextCantidad[" + number + "]";
inputTextCantidad.id = "textTextCantidad[" + number + "]";
inputTextCantidad.size = 20;
//inputTextCantidad.value = "textTextCantidad[" + number + "]";
cell1.appendChild(inputTextCantidad);

var newLink=document.createElement('a');
newLink.setAttribute('name','buscar[' + number + ']');
newLink.setAttribute('href','buscar.html?opcion=' + number);
newLink.setAttribute('target','_blank');
newLink.className='contrast';
var linkText=document.createTextNode('buscar');
newLink.appendChild(linkText);

cell1.appendChild(newLink);


row.appendChild(cell1);
row.id = number;
tbody.appendChild(row);
}

</script>
<body>
<table border="1" width="100%">
<tr>
<td width="16%">Código</td>
<td width="47%">Descripción</td>
<td width="">Cantidad</td>
</tr>
<tr>
<td colspan="6">
<table id="table1" style="border:1px;cellspacing:0px;cellpadding:0px; " border="0">
<tbody></tbody>
</table>
</td>
</tr>
<tr>
<td colspan="5">
<input type="text" size="10" maxlength="10">
<a href="javascript:addTextBox();">Añadir Articulos</a>
<img src="transparent.gif" width="10%" border="0" height="1">
<a href="javascript:eliminarAll();">Eliminar todos</a>
</td>
</tr>
</table>
</body>
</html>


Ventana hija "buscar" :


<head>
<title>Buscar</title>
</head>

<script language="javascript">

var url = location.href;
var index = url.indexOf("?");
var parameter = "opcion";

index = url.indexOf(parameter,index) + parameter.length;
if (url.charAt(index) == "=")
{
var result = url.indexOf("&",index);
if (result == -1){result=url.length;};
codSeleccion = url.substring(index + 1,result);
}

//var codSeleccion = "102";

function aceptar()
{
var textCodigoParent = "textCodigo[" + codSeleccion + "]";
var textDescParent = "textDescripcion[" + codSeleccion + "]";
var textTarifaParent = "textTextCantidad[" + codSeleccion + "]";

var ventanaPadre = window.opener;

var txtCodigo = document.getElementById("codigo");
var txtDesc = document.getElementById("desc");
var txtTarifa = document.getElementById("tarifa");

ventanaPadre.document.getElementById(textCodigoPar ent).value = txtCodigo.value;
ventanaPadre.document.getElementById(textDescParen t).value = txtDesc.value;
ventanaPadre.document.getElementById(textTarifaPar ent).value = txtTarifa.value;
window.close();
}

function calcularSumar()
{

}

</script>
<body>
Buscar

<table>
<tr><td>Prueba con un código manual.</td></tr>
</table>
<br>

<table>
<tr>
<td>Codigo</td>
<td><input type="text" size="20" name="codigo" id="codigo"></td>
</tr>
<tr>
<td>Descripcion</td>
<td><input type="text" size="70" name="desc" id="desc"></td>
</tr>
<tr>
<td>Tarifa</td>
<td><input type="text" size="20" name="tarifa" id="tarifa"></td>
</tr>
<tr><td><input type="button" name="" value="Aceptar" onClick="javascript:aceptar();"></td></tr>
</table>
</body>
</html>

A ver si entre todos podemos terminar esto, está ya el final
  #7 (permalink)  
Antiguo 06/02/2008, 07:50
 
Fecha de Ingreso: noviembre-2005
Mensajes: 405
Antigüedad: 18 años, 6 meses
Puntos: 0
Re: Añadir campos dinámicamente

ya lo he terminado, gracias por la ayuda, hasta otra.
  #8 (permalink)  
Antiguo 06/01/2009, 13:52
 
Fecha de Ingreso: enero-2009
Mensajes: 1
Antigüedad: 15 años, 4 meses
Puntos: 0
Respuesta: Añadir campos dinámicamente

NECESITOO AYUDAAAAAAAAAAA

estoy desarrollando una aplicacion con php javascript
en ella tengo un campo ke se llama cantidad de titulos....si yo ingreso 4 ps se crean dinamicamente 4 campos en este caso son llamados en el javascript n_titulos
ahora ke tnego creado los campos necesito sacar el valor de cada unopara guardarlo en la db pero como son creados dentro de un for y de forma dinamica no se como obtener dichos valores....
para mas ilustracion aca esta el codigo de la funcion en javascript ke me crea los campos dinamcios....
function cantidadTiposRecursosCrear()
{

alert("Datos Documento Almacenados");


var n_titulos = $('txt_cantidad').value;
var nr;
var html_str = '<table align="center">';
html_str +='<br>';
html_str +='<br>';
html_str +='<br>';

html_str +='<td colspan="5"><strong>CANTIDAD DE RECURSOS PARA INGRESAR</strong></td>';
html_str +='<br>';
html_str +='<br>';
var arreglo = new Array(n_titulos)

for(var i=0; i<n_titulos; i++)
{
html_str +='<table align="center">';
html_str +='<thead>';
html_str +='<tr>';

html_str +='</tr>';
html_str +='</thead>';
html_str +='</thead>';
html_str +='<br>';
html_str += '<tr><td><b>Tipos de Recursos'+(i+1)+':</b>&nbsp;</td>'+
'<td>&nbsp;&nbsp;<select id="txttipoRecurso_'+i+'" name="txttipoRecurso_'+i+'"notvalidzero="true" required="true" visiblename="Tipo de Recurso"'+(i+1)+'"/><td></tr>';
html_str +='<br>';


html_str += '<tr><td><b>Recursos'+(i+1)+':</b>&nbsp;</td>'+
'<td>&nbsp;&nbsp;<select id="txtRecurso_'+i+'" name="txtRecurso_'+i+'"notvalidzero="true" required="true" visiblename="Recurso"'+(i+1)+'"/><td></tr>';
html_str +='<br>';


html_str += '<tr><td><b>Número de Unidades'+(i+1)+':</b>&nbsp;</td>'+
'<td>&nbsp;&nbsp;<input type="text" id="txtNumeroUnidades_'+i+'" name="txtNumeroUnidades_'+i+'" required="true" visibleName="Unidades'+(i+1)+'"/><td></tr>';
html_str +='<br>';
html_str +='<br>';




var seleccion_tipo_recurso = document.createElement('select');
seleccion_tipo_recurso.name = 'txttipoRecurso_'+i;
seleccion_tipo_recurso.id = 'txttipoRecurso_'+i;
x_obtenerTipoRecurso('txttipoRecurso_'+i,$('txt_ca ntidad').value, actualizarTipo_Recurso);

var seleccion_recurso = document.createElement('select');
seleccion_recurso.name = 'txtRecurso_'+i;
seleccion_recurso.id = 'txtRecurso_'+i;

x_obtenerRecurso('txtRecurso_'+i,$('txt_cantidad') .value, actualizar_Recurso);

var ingresar_cantidad_recurso= document.createElement('select');
ingresar_cantidad_recurso.name = 'txtNumeroUnidades_'+i;
ingresar_cantidad_recurso.id = 'txtNumeroUnidades_'+i;









}
html_str += '<tr><td><input type="button" name="GuardarRecursoCompleto" id="GuardarRecursoCompleto" value="Agregar" class="boton">';
html_str += '</table>';

$('titulosMaterialDiferente').innerHTML = html_str;


for (i=0;i<arreglo.length;i++)
{
// alert (arreglo[i]);
}

//$('GuardarRecursoCompleto').onclick = GuardarAdquisicionRecursoXRecurso();



Element.showAs('block','titulosMaterialDiferente') ;

//GuardarAdquisicionRecursoXRecurso(n_titulos);
}
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:22.