Enviar formulario sin recargar la página
Tengo un sitio web de anuncios clasificados y en la página donde se muestran los anuncios estoy creando un formulario "Enviar una propina a un amigo"...
Entonces, cualquiera que quiera puede enviar una sugerencia del anuncio a la dirección de correo electrónico de algunos amigos.
Supongo que el formulario debe enviarse a una página PHP, ¿verdad?
<form name="tip" method="post" action="tip.php">
Tip somebody:
<input
name="tip_email"
type="text"
size="30"
onfocus="tip_div(1);"
onblur="tip_div(2);"
/>
<input type="submit" value="Skicka Tips" />
<input type="hidden" name="ad_id" />
</form>
Al enviar el formulario, la página se recarga... No quiero eso...
¿Hay alguna manera de hacer que no se recargue y aun así enviar el correo? Preferiblemente sin ajax o jquery...
May 19
'10 20:05
Si coloca un iframe en la página, puede redirigir la respuesta allí usando el targetatributo del formulario. Si no desea que la respuesta se muestre en absoluto, puede configurar la visualización del iframe en ninguna.
<iframe name="votar" style="display:none;"></iframe>
<form action="tip.php" method="post" target="votar">
<input type="submit" value="Skicka Tips">
<input type="hidden" name="ad_id" value="2">
</form>
Nota del editor : históricamente esta respuesta se aceptó como correcta, pero ahora está desactualizada. Si bien el código aún funciona, si su navegador de destino admite las API FormData y Fetch (es decir, casi todos los navegadores modernos), considere consultar esta respuesta .
Deberá enviar una solicitud AJAX para enviar el correo electrónico sin recargar la página. Eche un vistazo a http://api.jquery.com/jQuery.ajax/
Su código debería ser algo así como:
$('#submit').click(function() {
$.ajax({
url: 'send_email.php',
type: 'POST',
data: {
email: '[email protected]',
message: 'hello world!'
},
success: function(msg) {
alert('Email Sent');
}
});
});
El formulario se enviará en segundo plano a la send_email.phppágina que deberá manejar la solicitud y enviar el correo electrónico.
La forma más rápida y sencilla es utilizar un iframe. Coloque un marco en la parte inferior de su página.
<iframe name="frame"></iframe>
Y en tu forma haz esto.
<form target="frame">
</form>
y hacer que el marco sea invisible en tu CSS.
iframe{
display: none;
}
O usas AJAX o
- crear y agregar un iframe al documento
- establezca el nombre de iframes en 'foo'
- establecer el objetivo de formularios en 'foo'
- entregar
- haga que la acción de formularios represente javascript con 'parent.notify(...)' para dar su opinión
- Opcionalmente puedes eliminar el iframe.