ajax problem sending data with formdata

Question

ajax problem sending data with formdata

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

I can not get the form to print the data in the "resp" div that I group in the variable "form_data", this is a test code I am doing to learn how to use formData better.

<?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; 
?>

php ajax

asked by Gustavo 18.07.2017 в 17:59

source

2 answers

Error: "The conversion of the nvarchar value '92012156148' overflowed an int column" How to open files with FileInputStream?

score 3 · Answer 1

What I have observed in your code is that you are not filling the FormData with the form information, you are using variables that seem to be undefined. I would assign ids to the form fields in 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>

I would change the part of the js like that since the values of the form are not taken:

<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>

score 0 · Answer 2

What I see in your code is that you need to indicate which part you are taking the values to be sent to you by ajax

try this

<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>