2012-06-02 11 views
8

Si tengo esta forma que presente los datos enviados a la página en sí:el envío de datos de correos con jQuery en el envío de formularios

<form method="post"> 
    <input type="text" name="name"/> 
    <input type="submit"/> 
</form> 

¿Cómo voy a ser capaz de utilizar JavaScript/jQuery para inyectar un dato POST adicionales. Esto sería más fácil si solo presento el formulario a través de ajax usando cualquiera de las funciones como $.post(), $.get() o $.ajax(). Pero lo que quiero hacer aquí es enviar el formulario no a través de ajax.

Los datos adicionales están en JavaScript. Estoy pensando en inyectar un nuevo campo oculto en el DOM en el que pasaré los datos para que se envíe con el formulario, pero ¿hay alguna otra forma de hacerlo?

Comente si necesita más código/explicación.

+0

¿Por qué este downvoted? –

Respuesta

11

En lugar de usar un botón de enviar, use un botón regular y controle la presentación a través de Javascript. En su javascript, necesita serializar el formulario y pasarlo como datos junto con cualquier otra cosa que desee.

<script> 

    $(document).ready(function() { 

     var extra_data = "This is more stuff to send"; 

     $('#submit').click(function() { 
      $.ajax({ 
      type: "POST", 
      url: "form.php", 
      data: {'form': $("#my_form").serialize(), 'other': extra_data}, 
      success: function(msg) { 
       alert("Form Submitted: " + msg); 
      } 
      }); 

     }); 

    }); 

</script> 

<form id="my_form" method="post"> 
    <input type="text" name="name" /> 
    <input type="button" id="submit" /> 
</form> 
+0

Eso es lo que trato de decir en el cuerpo de la pregunta. Supongo que tendré que usar ajax para enviar el formulario. –

+0

Tiene dos opciones: 1) Campos ocultos en su formulario. 2) AJAX. Usted elige, pero personalmente creo que el método AJAX es más robusto y permite más funcionalidades como la validación de formularios antes del envío. –

1
<head> 
    <script src="jquery/jquery-1.11.1.min.js"></script> 
    <script> 
    $(function() { 
     $('#form_id').on('click','#submit', function(e){ 
      e.preventDefault(); 
      $.ajax({ 
       type: "POST", 
       url: "get_Ajax.php", 
       data: $('#form_id').serialize(), 
       success: function(data) { 
        alert(data); 
       } 
      }); 
      return false; 
     }); 
    }); 
    </script> 
</head> 
<form method="post" id="form_id"> 
<input type="text" name="ime"> 
<input type="button" id="submit" name="submit" value="Send"> 
</form> 

** ** get_ajax.php

<?php 
$ime = $_POST['ime']; 

echo "Your name is $ime"; 
?> 
Cuestiones relacionadas