2011-04-24 21 views
14

todo lo que quiero hacer es cuando hago clic en enviar quiero que todos los datos del formulario sean enviados a process.php ... luego en process.php quiero hacer eco de los datos POST ... luego reemplazar todo en los resultados div a lo que se hizo en process.php ...jQuery datos de formulario POST

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#myform").submit(function() {  
      $.ajax({ 
       type: "POST", 
       dataType: "html", 
       cache: false, 
       url: "process.php", 
       success: function(data){ 
        $("#results").html(data);      
       } 
      }); 
      return false; 
     }); 

     //$("#myform").submit(function() { 
      //$('#results').html("yay");      
     //} 
      // }); 
     //});   
    }); 
</script> 

<form name="myform" id="myform" action="" method="POST"> 
<!-- The Name form field --> 
    <label for="name" id="name_label">zoom</label> 
    <input type="text" name="zoom" id="zoom" size="30" value=""/> 
    <br> 
</select> 


<!-- The Submit button --> 
    <input type="submit" name="submit" value="Submit"> 
</form> 

<!-- FORM END ---------------------------------------- --> 


<!-- RESULTS START ---------------------------------------- --> 
    <div id="results">nooooooo<?PHP $_SESSION[''] ?><div> 
    <!-- <input type="image" name="mapcoords" border="0" src="mapgen.php"> ---- --> 
<!-- RESULTS END ---------------------------------------- --> 
+4

Así que, ¿cuál es la pregunta? – Nacho

+0

Su código parece hacer eso (inspección en frío). ¿Cuál es el problema? – Halcyon

+0

¿Y cuál es el problema? –

Respuesta

6
$("#myform").submit(function() {  
    $.ajax({ 
     type: "POST", 
     data : $(this).serialize(), 
     cache: false, 
     url: "process.php", 
     success: function(data){ 
      $("#results").html(data);      
     } 
    }); 
    return false; 
}); 

prueba que

+0

¡Funcionó muy bien para mí! –

33

Usted puede llamar a $.post pasando datos de formulario serializados. como este:

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#myform").submit(function() {  
       $.post(
       'process.php', 
       $(this).serialize(), 
       function(data){ 
        $("#results").html(data) 
       } 
      ); 
       return false; 
      }); 
     }); 
</script> 
+1

gracias que funcionó como un encanto – LabRaTT

+0

keepitterron ese código funcionó, pero ahora quiero cambiar una cosa ... tengo y quiero poder ejecutar el código anterior cuando el usuario selecciona algo de la lista – LabRaTT

+0

jeje, no importa, extraño, deletreé el nombre del menú desplegable ... – LabRaTT

3

Hay otra manera de hacerlo todo. Este ejemplo utiliza el complemento jQuery valida. Aquí, todos los campos de formulario se validan automáticamente. Descargar jQuery desde aquí:

https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

Descargar validación de plug-in desde aquí:

http://jquery.bassistance.de/validate/jquery-validation-1.10.0.zip

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="jquery.validate.1.7.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#customForm").validate({ 
    debug: false, 
    rules: { 
     name: {required:true,minlength:8,maxlength:8}, 
     email: {required:true,email:true}, 
    }, 
     submitHandler: function(form) { 
    // do other stuff for a valid form 
    $('#rsltx').html('<img src="WhiteLoading.gif"> Processing... please wait'); 
    $.post('post.php', $("#customForm").serialize(), function(data) { 
         $('#rsltx').html(data); 
     }); 
     } 
    }); 
}); 
</script> 

<form method="post" id="customForm" action=""> 
<div> 
<label for="name">Name</label> 
<input id="name" name="name" type="text" autocomplete="off" required/> 
</div> 
<div> 
<label for="email">E-mail</label> 
<input id="email" name="email" type="email" autocomplete="off" required/> 
</div> 
<div> 
<input id="send" name="send" type="submit" value="Send" /> 
</div> 
</form>