Foros del Web » Programando para Internet » Javascript » Frameworks JS »

ayuda con envio de formulario

Estas en el tema de ayuda con envio de formulario en el foro de Frameworks JS en Foros del Web. Hola amigos soy novato en esto del ajax y pues tengo un problema que haber si ustedes me pueden ayudar. Tengo una tabla que me ...
  #1 (permalink)  
Antiguo 26/05/2009, 01:30
 
Fecha de Ingreso: noviembre-2003
Ubicación: Puente de ixtla
Mensajes: 773
Antigüedad: 21 años, 1 mes
Puntos: 0
Exclamación ayuda con envio de formulario

Hola amigos soy novato en esto del ajax y pues tengo un problema que haber si ustedes me pueden ayudar.
Tengo una tabla que me muestra registros de una bd y al darle click sobre la tabla me manda por metodo get una variable que hace que en un div abajo muestre el formulario con la informacion a modificar. Bueno hasta ahi todo bien luego quiero enviar por un ajax a modificar los datos. El archivo php que hace el update en la tabla funciona puesto que ya lo probe. El problema biene cuando yo hago la llamada al metodo que envia los datos al php. Lo unico que hace es ponerme la imagen de esperando pero no envia nada al php. Me muestra un error que dice asi document.forms.form1.especialidad' is null or not an object no se que pueda ser. pongo el codigo de mi formulario

Código PHP:
<?
include("seguridad.php");
$usuario=$_SESSION['usuario'];
$id=$_GET['id'];
$sql="SELECT * FROM segcurso WHERE ID='$id' AND usuario='$usuario'";
$result=mysql_query($sql) or die("Error al intentar ejecutar la sentencia sql, mysql dice; ").mysql_error();
while(
$fila2=mysql_fetch_object($result))
{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>SSA | Sistema de Seguimiento Acad&eacute;mico | BIENVENIDO</title>
        <meta name="keywords" content="itinerary, list" />
        <meta name="description" content="This page provides a list of all itineraries" />
        <link href="css/default.css" rel="stylesheet" type="text/css" />
        <script language="javascript" src="funciones.js"></script>
        <script language="javascript" src="validaciones.js"></script>
        <script language="javascript" src="popcalendar.js"></script>
        <script type="text/javascript" src="ajax2.js"></script>
        <style type='text/css'> .hide {display:none} </style>
    </head>
    <body>
    <div id="Resultado">
<form id="form1" name="form1" ACTION="javascript:GuardarRegistro();" method="post">
<input name="id" type="hidden" value="<? echo $id;?>" size="4">
<table width="380" border="0" align="center">
<tr>
    <td> <? echo "<h1>Modificaci&oacute;n de Registros</h1>"?>
    <div id="frm1" class='hide'>
    <h1>Entrega de Planeaci&oacute;n e Instrumentaci&oacute;n del Curso</h1>
    <table align="center" width="380">
    <tr>
      <td width="250"><label>&nbsp; Fecha en que entrego su planeaci&oacute;n: <br>
      </label></td>
      <td><input name="fecha_ent_plan" type="text" id="fecha_ent_plan" value="<? echo $fila2->ent_plan;?>" size="15" onClick="popUpCalendar(this, form1.fecha_ent_plan, 'yyyy-mm-dd');"></td>
     </tr>
     <tr>
        <td width="250"><br>
          &nbsp;
            <label>Fecha en que entrego su instrumentaci&oacute;n:</label></td>
      <td><br>
        <input name="fecha_ent_instru" type="text" id="fecha_ent_instru" value="<? echo $fila2->ent_inst;?>" size="15" onClick="popUpCalendar(this, form1.fecha_ent_instru, 'yyyy-mm-dd');"></td>
    </tr>
    <tr>
      <td colspan="2"><br>
        <div align="center">
            <a href="#" onclick='mostrar("frm1","frm3","frm2")'><< Previous</a>&nbsp;&nbsp;
            <a href="#" onclick='mostrar("frm1","frm3","frm2")'>1</a>
            <b>2</b>
            <a href="#" onclick='mostrar("frm1","frm2","frm3")'>3</a>&nbsp;&nbsp;
            <a href="#" onclick='mostrar("frm1","frm2","frm3")'>Next >></a>       
        </div></td>
     </tr>
    </table> 
    </div>
    <div id="frm2" class='hide'>
    <h2>Seguimiento de la gestion del curso</h2>
    <table align="center" width="380">
    <tr>
      <td colspan="2" align="center"><label>&nbsp;Registro en su planeaci&oacute;n los seguimientos acad&eacute;micos: <br>
      </label> <br></td>
      </tr>
     <tr>
        <td width="250">
         &nbsp;
            <label>1er Seguimiento (23 al 27 de Febrero) :</label></td>
      <td><input type="radio" name="primer_seg" value="1">
      Si &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="primer_seg" value="0">
        No</td>
    </tr>
         <tr>
        <td width="250">
          &nbsp;
            <label>2do Seguimiento (30 Marzo al 3 de Abril) :</label></td>
      <td><input type="radio" name="segundo_seg" value="1">
      Si &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="segundo_seg" value="0">
        No</td>
    </tr>
         <tr>
        <td width="250">
          &nbsp;
            <label>3er Seguimiento (11 al 15 de Mayo) :</label></td>
      <td><input type="radio" name="tercer_seg" value="1">
      Si &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="tercer_seg" value="0">
        No
        </td>
    </tr>
    <tr>
      <td><div align="center"><br>
            <INPUT TYPE="reset" VALUE="Borrar">
      </div></td>
      <td><div align="left"><br>
            <input type="button" value="Enviar" onClick="Validar(this.form)">
      </div></td>
    </tr>
    <tr>
      <td colspan="2"><br>
        <div align="center">
               <a href="#" onclick='mostrar("frm2","frm1","frm3")'><< Previous</a>&nbsp;&nbsp;
            <a href="#" onclick='mostrar("frm1","frm3","frm2")'>1</a>
            <a href="#" onclick='mostrar("frm2","frm1","frm3")'>2</a>
            <b>3</b>          
        </div></td>
     </tr>
    </table> 
    </div>
    <div id="frm3">
    <h1>Seguimiento del Curso</h1>
    <table align="center" width="380">
    <tr>
      <td colspan="3"><label>&nbsp;Especialidad:&nbsp;</label>
          <select id="especialidad" name="especialidad" style="width:289px;"  size="1" onChange="cambia_materias()">
          <option selected>Seleccione una especialidad...</option>
            <option value="ISC">Ing. en Sistemas Computacionales</option>
            <option value="II">Ing. Industrial</option>
            <option value="IBQ">Ing. Bioqu&iacute;mica</option>
            <option value="IC">Ing. Civil</option>
            <option value="IE">Ing. Electromec&aacute;nica</option>
            <option value="IQ">Ing. Qu&iacute;mica</option>
            <option value="LA">Lic. en Administraci&oacute;n</option>
            <option value="LI">Lic. en Inform&aacute;tica</option>
        </select></td>
        </tr>
     <tr>
          <td colspan="3"><label>&nbsp;Materia: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <select id="course" name="course" style="width:288px;" size="1">
              <option value="-" selected>-</option></select>        </td>
        </tr>
     <tr>
        <td colspan="2"><br>
            <label>&nbsp;Grupo: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="grupo" id="grupo" type="text" size="6" maxlength="3" value="<? echo $fila2->grupo?>" onKeyUp="this.value = this.value.toUpperCase();">
            </label>        </td>
      <td><br><label>Unidades: &nbsp;</label>
        <select name="units2" size="1" id="units2" onChange="activa_textos()">
          <option value="3" selected>3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
        </select>        </td>
    </tr>
    <tr>
      <td colspan="3"><br><p align="center">&nbsp;Porcentaje de Aprobados por Unidad:
        <input readonly name="user" type="hidden" value="<? echo $_SESSION['usuario']; ?>" id="user" size="15">
        </p></td>
    </tr>
    <tr>
      <td><label>&nbsp;Unidad 1:
            <input name="unidad1" type="text" value="<? echo $fila2->u1;?>" id="unidad1" size="4" onKeyPress="return acceptNum(event)" maxlength="3">
           </label></td>
       <td><label>&nbsp;Unidad 2:
            <input name="unidad2" type="text" value="<? echo $fila2->u2;?>" id="unidad2" size="4" onKeyPress="return acceptNum(event)" maxlength="3">
           </label></td>
       <td><label>&nbsp;Unidad 3:
            <input name="unidad3" type="text" value="<? echo $fila2->u3;?>" id="unidad3" size="4" onKeyPress="return acceptNum(event)" maxlength="3">
           </label></td>
    </tr>
    <tr>
      <td><label>&nbsp;Unidad 4:     
          <input name="unidad4" type="text" value="<? echo $fila2->u4;?>" id="unidad4" size="4" onKeyPress="return acceptNum(event)" maxlength="3" disabled>
      </label></td>
      <td><label>&nbsp;Unidad 5:
          <input name="unidad5" type="text" value="<? echo $fila2->u5;?>" id="unidad5" size="4" onKeyPress="return acceptNum(event)" maxlength="3" disabled>
      </label></td>
      <td><label>&nbsp;Unidad 6:
          <input name="unidad6" type="text" value="<? echo $fila2->u6;?>" id="unidad6" size="4" onKeyPress="return acceptNum(event)" maxlength="3" disabled>
      </label></td>
    </tr>
    <tr>
      <td><label>&nbsp;Unidad 7:
          <input name="unidad7" type="text" value="<? echo $fila2->u7;?>" id="unidad7" size="4" onKeyPress="return acceptNum(event)" maxlength="3" disabled>
      </label></td>
      <td><label>&nbsp;Unidad 8:
          <input name="unidad8" type="text" value="<? echo $fila2->u8;?>" id="unidad8" size="4" onKeyPress="return acceptNum(event)" maxlength="3" disabled>
      </label></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="3"><br>
        <div align="center">
            <b>1</b>
            <a href="#" onclick='mostrar("frm2","frm1","frm3")'>2</a>
            <a href="#" onclick='mostrar("frm1","frm2","frm3")'>3</a>&nbsp;&nbsp;
            <a href="#" onclick='mostrar("frm2","frm1","frm3")'>Next >></a>          
        </div></td>
     </tr>
    </table>
    </div>
    </td>
</tr>
</table>
</form>
<?
}
?>
</div>
</body>
</html>
__________________
°º¤ø,¸¸,ø¤º°`°º¤ø,¸S@M°º¤ø,¸¸,ø¤º°`°º¤ø,¸.
Dios solo nos dio el 0 y el 1 y con solo eso hemos construido un universo
  #2 (permalink)  
Antiguo 26/05/2009, 01:31
 
Fecha de Ingreso: noviembre-2003
Ubicación: Puente de ixtla
Mensajes: 773
Antigüedad: 21 años, 1 mes
Puntos: 0
Respuesta: ayuda con envio de formulario

y aqui pongo ajax2.js

Código:
function objetoAjax(){ 
    var xmlhttp=false; 
    try { 
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
        try { 
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (E) { 
            xmlhttp = false; 
          } 
    } 
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') { 
        xmlhttp = new XMLHttpRequest(); 
    } 
    return xmlhttp; 
} 
 
function GuardarRegistro(){ 
  //donde se mostrará lo resultados 
  divResultado = document.getElementById('Resultado'); 
  divResultado.innerHTML= '<img src="wait.gif">'; 
  //valores de las cajas de texto 
  especialidad=document.forms.form1.especialidad.value; 
  course=document.forms.form1.course.value; 
  grupo=document.forms.form1.grupo.value;
  units2=document.forms.form1.units2.value;
  unidad1=document.forms.form1.unidad1.value;
  unidad2=document.forms.form1.unidad2.value;
  unidad3=document.forms.form1.unidad3.value;
  unidad4=document.forms.form1.unidad4.value;
  unidad5=document.forms.form1.unidad5.value;
  unidad5=document.forms.form1.unidad6.value;
  unidad7=document.forms.form1.unidad7.value;
  unidad8=document.forms.form1.unidad8.value;
  fecha_ent_plan=document.forms.form1.fecha_ent_plan.value;
  fecha_ent_instru=document.forms.form1.fecha_ent_instru.value;
  primer_seg=document.forms.form1.primer_seg.value;
  segundo_seg=document.forms.form1.segundo_seg.value;
  tercer_seg=document.forms.form1.tercer_seg.value;
 
  //instanciamos el objetoAjax 
 
  ajax=objetoAjax(); 
  //uso del medoto POST 
  //archivo que realizará la operacion 
  //registro.php 
  ajax.open("POST", "updatesegcurso.php",true); 
  ajax.onreadystatechange=function() { 
    if (ajax.readyState==4) { 
    //mostrar resultados en esta capa
    divResultado.innerHTML = ajax.responseText 
    //llamar a funcion para limpiar los inputs 
    LimpiarCampos(); 
    } 
  } 
  ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
  //enviando los valores 
  ajax.send("especialidad="+especialidad+"&course="+course+"&grupo="+grupo+"&units2="+units2+"&unidad1="+unidad1+"&unidad2="+unidad2+"&unidad3="+unidad3+"&unidad4="+unidad4+"&unidad5="+unidad5+"&unidad6="+unidad6+"&unidad7="+unidad7+"&unidad8="+unidad8+"&fecha_ent_plan="+fecha_ent_plan+"&fecha_ent_instru="+fecha_ent_instru+"&primer_seg="+primer_seg+"&segundo_seg)"+segundo_seg+"&tercer_seg="+tercer_seg)  
} 
 
function LimpiarCampos(){ 
  document.forms.registro.nombre.value=""; 
  document.forms.registro.ap_paterno.value=""; 
  document.forms.registro.ap_materno.value=""; 
  document.forms.registro.no_credencial.value=""; 
 
  document.forms.registro.nombre.focus(); 
}
se los agradesco de antemano
__________________
°º¤ø,¸¸,ø¤º°`°º¤ø,¸S@M°º¤ø,¸¸,ø¤º°`°º¤ø,¸.
Dios solo nos dio el 0 y el 1 y con solo eso hemos construido un universo
  #3 (permalink)  
Antiguo 26/05/2009, 07:46
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 16 años, 5 meses
Puntos: 5
Respuesta: ayuda con envio de formulario

Buenas Ixtleco,

En principio puedo ver dos errores en tu código, uno el típico fallo de copy&paste y el otro es un fallo típico de no tener muy claro lo que se esta haciendo,...En cuanto al primero todos usamos copy&paste y nos llevamos más de un susto asi que poco que objetar, en cuanto al segundo todos hemos empezado perdidos con una materia nueva y los errores y la buena fe de la gente que ayuda nos han enseñado, asi pues espero servirte de ayuda.

1-. En la funcion GuardarRegistro() de ajax2.js

Código javascript:
Ver original
  1. unidad1=document.forms.form1.unidad1.value;
  2.   unidad2=document.forms.form1.unidad2.value;
  3.   unidad3=document.forms.form1.unidad3.value;
  4.   unidad4=document.forms.form1.unidad4.value;
  5.   unidad5=document.forms.form1.unidad5.value;
  6.   unidad5=document.forms.form1.unidad6.value; //<---Supongo que será unidad6=...
  7.   unidad7=document.forms.form1.unidad7.value;
  8.   unidad8=document.forms.form1.unidad8.value;

2-. También en la funcion GuardarRegistro() de ajax2.js

El error que te da es el siguiente

document.forms.form1 is undefined


Y es realmente lo que sucede, en el momento en que tu función javascript intenta acceder al formulario form1 éste ya no existe ya que todo el codigo html que había dentro del objeto <div id="Resultado"> ha sido sustituido por <img src="wait.gif">, incluido el <form id="form1" ... >. Con lo cual se machaca el formulario. Si lo que deseas es poner un gif mientras la petición ajax se procesa -en mi opinión- lo más correcto es:

Código javascript:
Ver original
  1. function GuardarRegistro(){
  2.   //donde se mostrará lo resultados
  3.   divResultado = document.getElementById('Resultado');
  4.   ....
  5.   ....
  6.   //instanciamos el objetoAjax
  7.  
  8.   ajax=objetoAjax();
  9.   //uso del medoto POST
  10.   //archivo que realizará la operacion
  11.   //registro.php
  12.   ajax.open("POST", "updatesegcurso.php",true);
  13.   ajax.onreadystatechange=function() {
  14.     if (ajax.readyState==4) {
  15.       //mostrar resultados en esta capa
  16.       divResultado.innerHTML = ajax.responseText
  17.       ....
  18.     }else{
  19.       //mientras se procesa mostramos imagen de espera
  20.       divResultado.innerHTML= '<img src="wait.gif">';
  21.     }
  22.   }
  23.   ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  24.   //enviando los valores
  25.   ajax.send(".....")  
  26. }

Prueba con estos cambios a ver si avanzas en el tema,...

Saludos
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
  #4 (permalink)  
Antiguo 26/05/2009, 14:35
 
Fecha de Ingreso: noviembre-2003
Ubicación: Puente de ixtla
Mensajes: 773
Antigüedad: 21 años, 1 mes
Puntos: 0
Respuesta: ayuda con envio de formulario

hola me funciono perecto como tu dijiste el unico problema es los botones de radio como puedo enviarolos? porque no obtiene el valor muchas gracias por la ayuda
__________________
°º¤ø,¸¸,ø¤º°`°º¤ø,¸S@M°º¤ø,¸¸,ø¤º°`°º¤ø,¸.
Dios solo nos dio el 0 y el 1 y con solo eso hemos construido un universo
  #5 (permalink)  
Antiguo 27/05/2009, 02:35
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 16 años, 5 meses
Puntos: 5
Respuesta: ayuda con envio de formulario

Buenas,

Me alegro te haya funcionado...

Ciertamente esto de los input radio es algo que no logro entender. No se porque pero pasa esto. Lo que yo hago para solucionarlo es dar valor a un hidden dependiendo el radio que checkeo. Habrá otras opciones, incluso pueden ser más eficientes pero yo es como lo hago. Te cuento.

Tenemos los input radio y creamos un hidden para cada grupo de radios, es decir, en este ejemplo 2, uno para almacenar el valor de primer_ser y el segundo para almacenar el valor de segundo_seg. Usando el evento onclick damos valor al hidden.

Código html:
Ver original
  1. <form id="form1" name="form1" ACTION="javascript:GuardarRegistro();" method="post">
  2. <!--Aqui creamos los hidden que almacenan el valor de los radios-->
  3. <input type="hidden" name="value_primer_seg" id="value_primer_seg">
  4. <input type="hidden" name="value_segundo_seg" id="value_segundo_seg">
  5. <!-- ///////////////////////////////////////////////////////////////////// -->
  6. <br/>
  7. <label>1er Seguimiento (23 al 27 de Febrero) :</label><br/>
  8. <input type="radio" name="primer_seg" onclick="document.getElementById('value_primer_seg').value='1';alert('Asignado valor '+document.getElementById('value_primer_seg').value+' al hidden value_primer_seg');">Si &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  9. <input type="radio" name="primer_seg" onclick="document.getElementById('value_primer_seg').value='0';alert('Asignado valor '+document.getElementById('value_primer_seg').value+' al hidden value_primer_seg');">No
  10. <br/>
  11. <label>2do Seguimiento (30 Marzo al 3 de Abril) :</label><br/>
  12. <input type="radio" name="segundo_seg" onclick="document.getElementById('value_segundo_seg').value='1';alert('Asignado valor '+document.getElementById('value_segundo_seg').value+' al hidden value_segundo_seg');">Si &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  13. <input type="radio" name="segundo_seg"  onclick="document.getElementById('value_segundo_seg').value='0';alert('Asignado valor '+document.getElementById('value_segundo_seg').value+' al hidden value_segundo_seg');">No
  14. </form>

Ahora ya sólo quedaria modificar la función con la que recoges el valor de los elementos del form para recoger los de los hidden en vez de los valores de los radios,...

No se, pruébalo a ver si te funciona porque lo he programado asi al vuelo y a lo mejor hay algun error,...

Cualquier cosa ya sabes,...

Saludos.
__________________
Si quieres puedes y si puedes debes. Imposible is nothing!!!
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 08:54.