0

No logro que el formulario imprima los datos en el div "resp" que agrupo en la variable "form_data", esto es un codigo de prueba que estoy haciendo para aprender a usar mejor formData.

<?php
 $mes = "marzo";
?> 

<script>
var tiempo = "llueve";
$(document).on('ready',function(){

  $('#btn-ingresar').click(function(){
    var url = "datos.php";
    var form_data = new FormData();
    form_data.append("usuario", usuario);
    form_data.append("contrasena", contrasena);
    form_data.append("mes", mes);
    form_data.append("tiempo", tiempo);                                      

    $.ajax({                        
       type: "POST",                 
       url: url,                    
       data: form_data,
       success: function(data)            
       {
         $('#resp').html(data);           
       }
     });
  });
});
</script>

<form method="post" id="formulario">
    <input type="text" name="usuario" placeholder="Usuario" autofocus/>
    <input type="password" name="contrasena" placeholder="Contraseña"/>
    <input type="hidden" name="mes" value="<?php echo $mes; ?>">
    <input type="button" id="btn-ingresar" value="Ingresar" />
</form>
<div id="resp"></div>

datos.php

<?php   
$usuario = $_POST['usuario'];
$contraseña  = $_POST['contrasena'];
$mes  = $_POST['mes'];
$tiempo  = $_POST['tiempo'];
echo "tu usuario es: ".$usuario." contraseña es: ".$contraseña." y el mes es ".$mes" ,tambien ".$tiempo; 
?>
2
  • Mira esta guia para que tu pregunta sea mejor recibida. Tambien, aprovecha y haz el tour para entender mejor como funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    el 18 jul. 2017 a las 16:10
  • Por favor, aclara que queres decir con que no logras que los muestre. Tira algun error?
    – gbianchi
    el 18 jul. 2017 a las 16:10

3 respuestas 3

3

Lo que he observado en tu código es que no estás llenando el FormData con la información del formulario, estás usando variables que parecen estar indefinidas. Yo le asignaría ids a los campos del formulario en html:

<form method="post" id="formulario">
    <input type="text" id="usuario" name="usuario" placeholder="Usuario" autofocus/>
    <input type="password" name="contrasena" id="contrasena" placeholder="Contraseña"/>
    <input type="hidden" name="mes" id="mes" value="<?php echo $mes; ?>">
    <input type="button" id="btn-ingresar" value="Ingresar" />
</form>

Cambiaría la parte del js así ya que no se están tomando los valores del form:

<script>
var tiempo = "llueve";
$(document).on('ready',function(){

  $('#btn-ingresar').click(function(){
    var url = "datos.php";
    var form_data = new FormData();
    form_data.append("usuario", $("#usuario").val());
    form_data.append("contrasena", $("#contrasena").val());
    form_data.append("mes", $("#mes").val());
    form_data.append("tiempo", tiempo);                                      

    $.ajax({                        
       type: "POST",                 
       url: url,                    
       data: form_data,
       success: function(data)            
       {
         $('#resp').html(data);           
       }
     });
  });
});
</script>
0

Lo que veo en tu codigo es que te hace falta indicar de que parte estas tomando las valores para que te los envie por ajax

intenta esto

<script>
var tiempo = "llueve";
$(document).on('ready',function(){

$('#btn-ingresar').click(function(){
var url = "datos.php";
var form_data = new FormData();
form_data.append("usuario",$('#usuario').val());
form_data.append("contrasena",$('#contrasena').val());
form_data.append("mes", $('#mes').val());
form_data.append("tiempo", tiempo);                                      

$.ajax({                        
   type: "POST",                 
   url: url,                    
   data: form_data,`introducir el código aquí`
   success: function(data)            
   {
     $('#resp').html(data);           
   }
 });
});
});
</script>
1
  • Con var url = "datos.php"; guarda la dirección en la variable url y luego la pasa a a la propiedad url de $.ajax() el 18 jul. 2017 a las 16:22
0

el problema es que no estas declarando la propiedad processData

               $.ajax({
              type:"POST",
              data:formData,
              processData: false,  //importante cuando se utiliza el objeto formData
              url:"",
              success:function(r){
                datos  = jQuery.parseJSON(r);
                console.log(datos); 
              }
            });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.