cargar formulario con ajax y sus elementos

[andresbetancourt]

Buenos días,

Espero que todos estén bien y me puedan ayudar. Tengo la siguiente inquietud:

He cargado un formulario dentro de un DIV de una página HTML y lo he realizado con a javascript puro, ahora necesito validar unos campos del formulario para saber si el usuario ingreso bien los datos, pero resulta que en el DOM de la página no existen los diferentes elementos que componen el formulario (campos de texto, listas desplegables, botones...).

¿cómo hago para agregar estos elementos al DOM sin que se dupliquen?

lo digo porque he usado createElement y luego appendChild, pero lo que hace es agregar el componente a la página HTML entonces ocasiona por ejemplo que aparezca un nuevo campo de texto, y lo que deseo es poderle indicar al DOM, que he cargado un formulario y que reconozca los diferentes campos que en él están para poder hacer mis validaciones.


gracias por su valiosa colaboración

[PHPeros]

¿Puedes enseñar el código que llevas hasta ahora o una orientación? Es muy difíl comprender lo que quieres sin un ejemplo...

[andresbetancourt]

muchas gracias por querer ayudarme,

a continuación trozos de código:

las siguientes funciones las tengo en la etiqueta SCRIPT dentro de la página HTML maestra

Código:

function mostrar_modif_prod(url, id_contenedor){

	var pagina_requerida = false
	if (window.XMLHttpRequest) {// Si es Mozilla, Safari etc
		pagina_requerida = new XMLHttpRequest()
	} 
	else if (window.ActiveXObject){ // pero si es IE
		try {
		pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")
		} 
		catch (e){ // en caso que sea una versión antigua
		try{
		pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")
		}
		catch (e){}
		}
	}
	else
	return false
	
	pagina_requerida.onreadystatechange=function(){ // función de respuesta
		cargarpagina(pagina_requerida, id_contenedor)
	}
	pagina_requerida.open('GET', url, true) // asignamos los métodos open y send
	pagina_requerida.send(null)
}




// todo es correcto y ha llegado el momento de poner la información requerida
	// en su sitio en la pagina xhtml
	function cargarpagina(pagina_requerida, id_contenedor){
	if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1))
		document.getElementById(id_contenedor).innerHTML=pagina_requerida.responseText
		
			
	}

la anterior función es llamada desde un enlace html en el cual se le envían los parámetros necesarios para cargar el formulario:

Código HTML:

<a href=\"#\" onclick=\"mostrar_modif_prod('http://".$_SERVER["SERVER_NAME"].":8081/ventas/v/logica/modificarproducto.php?nom=".$fila['nombre']."&precioc=".$fila['preciocosto']."&preciov=".$fila['precioventa']."&categoria=".$fila['categoria']."&descrip=".$fila['descripcion']."&id=".$fila['identificador']."&foto1=".$fila['foto1']."&foto2=".$fila['foto2']."&foto3=".$fila['foto3']."&miniatura=".$fila['fotominiatura']."','destino1')\">Modificar</a>

a continuación el formulario que cargo en la pagina principal por medio de las funciones js antes indicadas

Código HTML:

<div class="contenedor_modificarproducto">

<!-- aca va el logo -->
			<div id="logo2_modificarproducto">
					<h2>Modificar producto</h2>
			</div>
			
	<div id="datos-producto_modificarproducto">

	<br />
	
	<form action="http://localhost:8081/ventas/c/producto.php" enctype="multipart/form-data" method="POST" onSubmit="return confirm('¿Está seguro que desea ejecutar la acción seleccionada?')">
				
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="nombre">Nombre: </label>
			<input type="text" id="b1" name="nombre" value="{nombre}" maxlength="100" />
					
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="preciocosto">Precio costo: </label>
			<input type="text" name="pcosto" id="" value="{precio_costo}" maxlength="15" />
			
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="nombre">Precio venta: </label>
			<input type="text" id="b2" name="pventa" value="{precio_venta}" maxlength="15" />
			
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="categoria">Categoria: </label>
			<select id="b3" name="categoria">	
			<!-- se usa para hacer una especie de marca en la plantilla de la vista, 
			con el fin de que la logica de la vista pueda identificar en que lugar debe poner codigo html, 
			en conclusion esta marca sera reemplazada por codigo html y ese reemplazo lo hace la logica de la vista 
			osea ventas\v\logica\crearproducto.php --> 
			{lista_categorias}			
			</select>
			
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="descripcion">Descripción producto: </label>
			<input type="text" name="descripcion" value="{descripcion}" maxlength="500" />
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="foto1">Foto 1: </label>
			<input type="file" id="b4" name="foto1" />
			
		</div>	
		<br />
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="foto2">Foto 2: </label>
			<input type="file" name="foto2" />
		</div>	
		<br />					
		<div class="index1-campos_modificarproducto">
			<label class="label_modificarproducto" for="foto3">Foto 3: </label>
			<input type="file" name="foto3" />
		</div>		
		<br />
		

		<input class="boton_modificarproducto" type="submit" name="modificar"  value="Modificar" />
	</form>

	</div>				
</div>

espero ser un poco más claro, lo que quiero es que al cargar el formulario en la página principal, se pueda reconocer en el DOM de dicha página los elementos del formulario para poder a través de un plugin que estoy usando para validación de campos, validar dichos campos haciendo uso de los atributos ID de cada campo de texto y lista desplegable usadas en el formulario. Ya que si hago la validación, ésta no me funciona porque no existen los ID a los cuales hago referencia desde el plugin que uso para hacer las validaciones.


gracias