Como inlcuir campos en funcion js

helena71 · #1 (**permalink**) 04/10/2012, 17:21

Chicos buenas tardes me colaboran con una duda por favor

En dias anteriores pregunte en el foro como subir un archivo al servidor sin usar formulario, sino usando una funcion. Me sugirieron un iframe; buscando encontre el siguiente ejemplo que unicamente sirve para subir archivos, funciona muy bien, pero tengo una duda

En el ejemplo que encontre, el script permite seleccionar el archivo y enviarlo (funciona perfecto), pero no se como poner los demas campos (id, nombre, email) en el script para que viajen con el campo archivo a traves de la funcion.

Disculpen mi ignorancia, pero no se como usar el iframe con los demas campos (id, nombre, email) que tengo.

Este es el script que encontre el cual permite subir el archivo, yo le adicione mis campos id, nomre, email

Código HTML:

Ver original<!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=utf-8" />
<title>AJAX uploader plugin</title>
<meta name="description" content="Demo de uploader ajax, usando un plugin para jquery" />
<meta name="keywords" content="jquery, ajax" />
<script language="javascript" src="js/jquery-1.3.1.min.js"></script>
<script language="javascript" src="js/AjaxUpload.2.0.min.js"></script>
<script language="javascript">
$(document).ready(function(){
    var button = $('#upload_button'), interval;
    new AjaxUpload('#upload_button', {
        action: 'upload.php',
        onSubmit : function(file , ext){
        if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
            // extensiones permitidas
            alert('Error: Solo se permiten imagenes');
            // cancela upload
            return false;
        } else {
            button.text('Uploading');
            this.disable();
        }
        },
        onComplete: function(file, response){
            button.text('Upload');
            // enable upload button
            this.enable();          
            // Agrega archivo a la lista
            $('#lista').appendTo('.files').text(file);
        }   
    });
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="id">id: <input type="text" name="id_aspirante" id="id_aspirante"></div>
<br>
<div id="nombre">Nombre: <input type="text" name="nombre_aspirante" id="nombre_aspirante"></div>
<br>
<div id="email">Email: <input type="text" name="email_aspirante" id="email_aspirante"></div>
<br>
<div id="upload_button">Upload</div>
<ul id="lista">
</ul>
</body>
</html>

Gracias

helena71 · #2 (**permalink**) 05/10/2012, 15:34

Chicos que pena molestarlos nuevamente, ¿muy complicado mi problema o estoy intentando hacer algo que no tiene solucion?

Lo que necesito es un formulario sin formulario con campo id, nombre, archivo, email para enviar a traves de una funcion javascript. El ejemplo que coloque en este foro solo pasa el archivo. No me sirve el formulario tradicional.

Gracias

emprear · #3 (**permalink**) 05/10/2012, 16:59

Cita:

Iniciado por helena71

Lo que necesito es un formulario sin formulario

Eso es toda una novedad para mi. Podés procesarlo con el action del <form>, es decir un simple submit ó con Ajax, o con una simple linea de javascript, pero el form siempre será el form.
¿dónde se supone que irán tus "campos" id, email, nombre, etc?
La idea de un ifrane oculto es bastante práctica, aqui te dejo un ejemplo de como hacerlo
http://www.forosdelweb.com/f13/formu...8/#post4283955

Creo que tenés que revisar tus conceptos
SAludos

helena71 · #4 (**permalink**) 05/10/2012, 17:18

emprear, gracias por tu tiempo

Te cuento mi historia

1. Hice un formulario con los campos id, nombre, apellido, email y ciudad, todos los campos tipo text. El formulario lo enviaba con una funcion (en lugar de un submit) que me hacia una validacion en ajax. Si existia rechazaba y si no existia lo guardaba, todo esto sin refrescar la pantalla. Esto me funciona perfecto.

2. Resulta que a este formulario necesitaba colocarle un campo file para adicionarle una foto de la persona, hasta aqui llego mi felicidad, buscando y leyendo encontre que no se puede pasar archivos por ajax. En el foro me dicen que con un iframe.

Busque ejemplos de iframe los revise y los provee todos subian el archivo perfectamente. Sin embargo ninguno me muestra como ademas del archivo subir el id, nombre, apellido, ciudad.

No se como se combina mi formulario inicial con el iframe

El ejemplo que puse en mi primera entrada de este tema, es el ejemplo que encontre, yo le adicione los camos que necesito, pero no se como pasarlos a traves de la funcion.

emprear · #5 (**permalink**) 05/10/2012, 17:42

A ver, podés hacerlo con cualquiera de estos plugins de jquery

http://www.webdeveloperjuice.com/201...-using-jquery/

Por supuesto, toda esta historia de usar Ajax, en este caso con jquery por el solo hecho de no recargar la página, no me parece tan indispensable, así que como alternativa está lo del iframe oculto. En el link que te dejé está explicado el funcionamiento.
Eso de

Cita:

Sin embargo ninguno me muestra como ademas del archivo subir el id, nombre, apellido, ciudad.

no se entiende muy bien, que querés decir con "subir", ¿cargarlos en una base de datos?. voy a suponer que sí. es muy simple
Primero hacés una verificación con js para validar los campos y la extensión de archivo (que quede en claro que esto sería para mejorar la experiencia del usuario, una validación seria debe hacerse siempre del lado del servidor), si pasa la validación hacés el submit a tu php
En tu php controlás contra la BD la existencia ó no (repetición) de los datos ingresados, si hay error, generás un mensaje x javascript y hacés un exit, si no, continuás y subís el archivo y generás un mensaje con js que aparecerá en el parent (es la página que contiene el iframe), que a su vez deberá tener creada una función que reciba dicho mensaje, repito, fijate en el link previo que dejé. (me refiero al post previo)
Una ayuda extra, para validar el form y las extensiones podés usar esto
http://foros.emprear.com/html/file-input/inx.html (ojo, el upload no es funcional, es solo un ejemplo)
SAludos
Saludos

helena71 · #6 (**permalink**) 05/10/2012, 19:00

emprear, gracias por tu tiempo

Voy a estudiar y probar lo que me sugeriste

Gracias

helena71 · #7 (**permalink**) 08/10/2012, 11:54

emprear, buenas tardes

Te cuento que estuve probando tus sugerencias y los link que me sugeriste, la verdad me confundi mas, no doy con lo que necesito

emprear · #8 (**permalink**) 08/10/2012, 14:58

Cita:

Iniciado por helena71

emprear, buenas tardes

Te cuento que estuve probando tus sugerencias y los link que me sugeriste, la verdad me confundi mas, no doy con lo que necesito

Aqui va un ejemplo sencillo

el html

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
/* script */
//script que recibe los mensajes
function mensajes(eltexto){
var mostrar = document.getElementById('mensajes');
mostrar.innerHTML = eltexto;
}
//]]>
</script>
</head>
<body>
<form action="subir.php" target="iframe_oculto" method="post">
Nombre: <input type="text" name="nombre" /><br />
Edad: <input type="text" name="edad" /><br />
<input type="submit" />
</form>
<iframe name="iframe_oculto" id="iframe_oculto" frameborder="1" scrolling="no" src="about:blank" width="0" height="0"></iframe>
<div id="mensajes">
<!-- aqui van los mensajes recibidos del php que se carga en el iframe -->
</div>
</body>
</html>

y aqui el php (subir.php)

Código PHP:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>subir archivos</title>
<script type='text/javascript'>
//<![CDATA[
var texto = "";
//]]>
</script>
<?php
if(isset($_POST['nombre'])){
$nombre = $_POST['nombre'];
if($_POST['nombre'] != ""){
echo "<script type='text/javascript'>
//<![CDATA[
texto += 'Gracias $nombre <br\/>';
//]]>
</script>";
}else{
echo "<script type='text/javascript'>
//<![CDATA[
texto += 'Debe ingresar el nombre <br\/>';
//]]>
</script>";
}
}
 
if(isset($_POST['edad'])){
$edad = $_POST['edad'];
if($_POST['edad'] != ""){
    
if($edad < 18)  {
echo "<script type='text/javascript'>
//<![CDATA[
texto += 'Debes ser mayor de 18 años <br\/>';
//]]>
</script>";
}
 
}else{
echo "<script type='text/javascript'>
//<![CDATA[
texto += 'Debe ingresar la edad <br\/>';
//]]>
</script>";
}
}
 
?>
</head>
<body>
<script type='text/javascript'>
//<![CDATA[
window.onload = parent.mensajes(texto);
//]]>
</script>
</body>
</html>

Como ves en el php hay condiciones y según sea necesario se generan los mensajes de javascript, luego son pasados al parent (es decir el html) que los recoje en la función mensajes y los muestra en un div.
Cuando se sube un archivo con php, también se obtienen estado de true y false con lo cual podés generar mensajes u otro tipo de interacción

Saludos

helena71 · #9 (**permalink**) 09/10/2012, 12:24

emprear, gracias por tu tiempo

De pronto yo no me he hecho entender o tal vez ya se distorsiono la idea inicial de lo que yo quiero hacer.

Te explico, yo tengo el siguiente formulario, el cual tiene el campo, id y nombre, estos campos se validan y se insertan a la dabse de datos sin problemas a traves de una funcion validar_solicitud_nueva(). Este me funciona perfecto. el problema es que en este formulario tengo un campo file el cual no he podido pasar a traves de la funcion para ser guardado en la base de datos.

Leyendo y probando encontre que no se puede pasar el archivo a traves de la funcion, me sugieren que lo pase a traves de un iframe, el problema es que no logro entender como integrar el iframe a lo que ya tengo, para pasar el archivo junto con los campo ID y NOMBRE, los cuales ya pasan

En el formulario el action lo tengo definido asi action="" para que no se ejecute ningun script, ademas el formulario se ejecuta a traves de una funcion y no del submit.

Te preguntaras ¿porque no uso el action y submit como se usa normalmente en un formulario? Porque el formulario lo ejecuto en una capa dentro de una pagina y si ejecuto el formulario de la forma tradicional el script del action se ejecuta dentro de la browser y no dentro de la capa de la pagina, como si me lo hace actualmente. Con la funcion logro que el script se ejecuta dentro de la capa.

Código HTML:

Ver original<form method="post" action="" name="solicitud_nueva" accept-charset="utf-8" enctype="multipart/form-data">
 
  <table border="0" cellspacing="0" cellpadding="0" width="100%">
 
     <tr>
     <td width="20%" align="right"><b>Id:</b></td>
      <td width="80%" align="left"><input type="text" name="solicitud_id" id="solicitud_id" size="57"></td>
     </tr>
     <tr>
      <td width="20%" height="15px" align="center"></td><td width="80%" align="center" id="mensaje_id" class="p11"></td>
     </tr>
 
     <tr>
     <td width="20%" align="right"><b>Nombre:</b></td>
      <td width="80%" align="left"><input type="text" name="solicitud_nombre" id="solicitud_nombre" size="57"></td>
     </tr>
     <tr>
      <td width="20%" height="15px" align="center"></td><td width="80%" align="center" id="mensaje_nombre" class="p11"></td>
     </tr>
 
     <tr>
      <td width="20%" align="right"><b>Archivo:&nbsp;</b></td>
      <td width="80%" align="left"><input type="file" name="solicitud_archivo" id="solicitud_archivo"></td>
     </tr>
     <tr>
      <td width="20%" height="15px" align="center"></td><td width="80%" align="center" id="mensaje_archivo" class="p11"></td>
     </tr>
     
     <tr>
     <td width="100%" colspan="2"><p class="p13"><input type="button" value="     Enviar     " onclick="validar_solicitud_nueva()">&nbsp;&nbsp;<input type="reset" value="     Borrar     "></p></td>
     </tr>        
  </table>
  <br> 
  </form>

Código HTML:

Ver originalfunction validar_solicitud_nueva(){
 
    var divResultado1 = document.getElementById('mensaje_id');
    var divResultado2 = document.getElementById('mensaje_nombre');
    var divResultado3 = document.getElementById('solicitud_nueva');
 
    if ((document.getElementById('solicitud_id').value == "") || (!/^[0-9]+$/.test(document.getElementById('solicitud_nombre').value))) {
 
    if (document.getElementById('solicitud_id').value == "") {
     var ccc1 = "Debe ingresar un ID";
    }else{
     var ccc1 = " ";
    }
    
    if (!/^[a-zA-Z]+$/.test(document.getElementById('solicitud_nombre').value)) {
     var ccc2 = "Debe diligenciar el campo Nombre";
    }else{
     var ccc2 = " ";
    }
    
    ajax=objetoAjax();
    ajax.open("GET", datos);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
             divResultado1.innerHTML = ccc1;
             divResultado2.innerHTML = ccc2;
        }
    }
    ajax.send(null)
 
    }else{
 
    var var1 = document.getElementById('solicitud_id').value;
    var var2 = document.getElementById('solicitud_nombre').value;
    
    ajax=objetoAjax();
    ajax.open("GET", 'insertarso.php?id='+var1+'&nombre='+var2);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
             divResultado3.innerHTML = ajax.responseText;
        }
    }
    ajax.send(null)
 
    }
 
}

emprear · #10 (**permalink**) 09/10/2012, 18:52

@helena71

vamos por partes

vos querés que tu form pase a un php cierta información, la cual debe ser guardada en una base de datos.
Estos datos son:
un id (seguramente será un número)
un nombre (una adena de texto)
y el contenido de un archivo que se sube desde la máquina del cliente
La inserción de dichos datos la hace el php

con los dos primeros no hay mayor problema, con el tercero hay algo que no aclarás
A. subís el archivo y lo guardás en una carpeta del server, algo así

Código PHP:

Ver originalmove_uploaded_file($_FILES["archivo"]["tmp_name"],

luego guardás en la BD la ruta a dicho archivo
B. que además quieras guardar el contenido del archivo, una vez subido en un campo BLOB de la BD (cosa no siempre práctica)

Ya sea A ó B el archivo lo tenés que subir

Como fuere, con Ajax puro (como ya te lo señalaron en otras respuestas, NO se puede), tenés que usar algúno de los plugins de jQuery que te indiqué.
Se puede saber entonces porque insistís con Ajax (no jQuery)

La otra alternativa es la del iframe oculto. Ahí se te presentan varias variantes, validar todo en el php (que es lo más aconsejable), o usar javascript en la página principal, fundamentalmente para controlar lo referente al archivo y evitar el inicio de la transferencia si no cumple con ciertos requisitos.

Finalmente para la validación de un form existe el evento onsubmit, eso de no asignarle un action al form para que no haga el submit porque supuestamente querés usar Ajax, que repito NO podés, es sencillamente un invento de tu parte.

En conclusión
o hacés un form tradicional + un iframe + si lo deseás, una validación por javascript
ó recurris a alguno de los plugins de jQuery (que no tengo idea de como funcionan ya que no los uso)

Me animaría a decir que lo más recomendable es que antes de seguir con tu trabajo, busques algunos buenos tutoriales sobre forms y subida de archivos con php

Saludos

helena71 · #11 (**permalink**) 09/10/2012, 19:50

emprear, gracias por tu PACIENCIA

Te cuento,

1. El ID y el NOMBRE los guardo en una base de datos.
2. El archivo lo guardo en una carpeta del servidor, el archivo lo guardo con el ID de la persona, de esta forma relaciono el archivo (foto) con el registro de la base de datos cuando los quiero consultar o visualizar.
3. Me queda claro que con el ajax no puedo guardar el archivo.
4. Lo de utilizar el formulario de forma tradicional no me sirve, por que el formulario lo ejecuto dentro de una capa y al momento de ejecutar el submit, se recarga el browser con el script del action del formulario (por esta razon usoa funcion y no submit). (¿Existe forma de que no se recargue la pagina al ejecutar el formulario dentro de la capa?). Cuando yo ejecuto el formulario de forma tradicional por fuera de mi pagina principal funciona perfecto. El problema es cuando lo ejecuto dentro de la capa. ¿Por que uso una capa? Lo hago para simular un formulario en una ventana modal.
5. Quiero usar la opcion del iframe pero no se como combinarlo con lo que tengo ya. Todos los ejemplos de iframe que veo funcionan muy bien, pero solo muestran como subir el archivo, no como combinarlo con mas campos (id, nombre). Algo que me deja preocupado es que he leido que las iframe no se deben usar

emprear · #12 (**permalink**) 09/10/2012, 20:05

@helena71

si vos ponés esto
<form action="subir.php" target="iframe_oculto" method="post">
y
<iframe name="iframe_oculto" id="iframe_oculto" frameborder="0" scrolling="no" src="about:blank" width="0" height="0"></iframe>

no se recarga nada todo el proceso del action (subirarchivo.php, por ejemplo) del form se ejecuta en el iframe, que al estar oculto, no se vé (incluso podría estar visible y mostrar los mensajes de la validación en el)

Cita:

Algo que me deja preocupado es que he leido que las iframe no se deben usar

¿De dónde has sacado eso?
Saludos

helena71 · #13 (**permalink**) 09/10/2012, 20:47

emprear, gracias por tiempo

Voy a probar lo que me sugeriste con el iframe, si es como tu me dices, seria maravilloso.

Respecto a que no se deben usar iframes, he leido que no es bueno usarlo porque no todos lo navegadores lo soportan. Pero yo realmente no se, nunca he usado uno.

Voy a probar

Mil y mil gracias por tu paciencia

Despues te cuento como me fue.

helena71 · #14 (**permalink**) 15/10/2012, 21:00

emprear, te cuento que utilice las iframe tal cual me lo sugeriste con algunos cambios adicionales y me quedo perfecto como lo necesitaba.

La verdad nunca habia utilizado ese tipo de etiqueta iframe, tenia la idea de que eran obsoletas y no reconocidas por todos los navegadores. Sin embargo ahora que e leido sobre ellas, veo que tiene varias aplicaciones.

MIL GRACIAS POR TU PACIENCIA Y COLABORACION.