php - quedarse - Enviar formulario sin recargar la página
php sin recargar pagina (16)
Envío de formulario sin recargar la página y obtener el resultado de los datos enviados en la misma página
Aquí hay algunos de los códigos que encontré en Internet que resuelven este problema
Archivo de índice:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
</script>
<script type="text/javascript">
function clickButton(){
var name=document.getElementById(''name'').value;
var descr=document.getElementById(''descr'').value;
$.ajax({
type:"post",
url:"server_action.php",
data:
{
''name'' :name,
''descr'' :descr
},
cache:false,
success: function (html)
{
alert(''Data Send'');
$(''#msg'').html(html);
}
});
return false;
}
</script>
<form >
<input type="" name="name" id="name">
<input type="" name="descr" id="descr">
<input type="submit" name="" value="submit" onclick="return clickButton();">
</form>
<p id="msg"></p>
server_action.php
<?php
$name = $_POST[''name''];
$descr = $_POST[''descr''];
echo $name;
echo $descr;
?>
Etiquetas: php ajax jquery serverside
Tengo un sitio web de clasificados, y en la página donde se muestran los anuncios, estoy creando un formulario de "Enviar una sugerencia 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 vuelve a cargar ... No quiero eso ...
¿Hay alguna manera de hacer que no vuelva a cargar y todavía enviar el correo? Preferiblemente sin ajax o jquery ...
Gracias
¿Has intentado usar un iFrame? No ajax, y la página original no se cargará.
Puede mostrar el formulario de envío como una página separada dentro del iframe, y cuando se envía la página externa / contenedor no se volverá a cargar. Esta solución no hará uso de ningún tipo de ajax.
Aquí hay algunos jQuery para publicar en una página php y recuperar html:
$(''form'').submit(function() {
$.post(''tip.php'', function(html) {
// do what you need in your success callback
}
return false;
});
Deberá enviar una solicitud ajax para enviar el correo electrónico sin tener que volver a cargar la página. Eche un vistazo a http://api.jquery.com/jQuery.ajax/
Tu código debe 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 página send_email.php , que deberá gestionar la solicitud y enviar el correo electrónico.
Es imprescindible tomar la ayuda de jquery-ajax en este caso. Sin ajax , actualmente no hay solución.
Primero, llame a una función de JavaScript cuando se envíe el formulario. Simplemente configure onsubmit="func()" . Incluso si se llama a la función, se realizará la acción predeterminada de la presentación. Si se realiza, no habría forma de evitar que la página se actualice o redirija. Entonces, la siguiente tarea es evitar la acción predeterminada. Inserta la siguiente línea al comienzo de func() .
event.preventDefault()
Ahora, no habrá redirección ni actualización. Entonces, simplemente haga una llamada ajax desde func() y haga lo que quiera cuando termine la llamada.
Ejemplo:
Formar:
<form id="form-id" onsubmit="func()">
<input id="input-id" type="text">
</form>
Javascript:
function func(){
event.preventDefault();
var newValue = $(''#input-field-id'').val();
$.ajax({
type: ''POST'',
url: ''...'',
data: {...},
datatype: ''JSON'',
success: function(data){...},
error: function(){...},
});
}
Esto debería resolver tu problema.
En este código, después del botón de enviar haga clic en llamar a jquery ajax y pasamos la url para publicar
tipo POST / GET
datos: información de datos puede seleccionar campos de entrada o cualquier otro.
éxito: devolución de llamada si todo está bien desde el servidor
texto del parámetro de función, html o json, respuesta del servidor
en caso de error, puede escribir advertencias de escritura si los datos que obtuvo están en algún tipo de estado, etc. o ejecuta tu código qué hacer a continuación.
<form id=''tip''>
Tip somebody: <input name="tip_email" id="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
<input type="submit" id="submit" value="Skicka Tips"/>
<input type="hidden" id="ad_id" name="ad_id" />
</form>
<script>
$( "#tip" ).submit(function( e ) {
e.preventDefault();
$.ajax({
url: tip.php,
type:''POST'',
data:
{
tip_email: $(''#tip_email'').val(),
ad_id: $(''#ad_id'').val()
},
success: function(msg)
{
alert(''Email Sent'');
}
});
});
</script>
He encontrado lo que creo que es una manera más fácil. Si coloca un Iframe en la página, puede redirigir la salida de la acción allí y hacer que se muestre. No puedes hacer nada, por supuesto. En ese caso, puede configurar la visualización del iframe en none.
<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>
Hice algo similar al jquery anterior, pero necesitaba restablecer los datos de mi formulario y los lienzos de adjuntos gráficos. Así que aquí es lo que se me ocurrió:
<script>
$(document).ready(function(){
$("#text_only_radio_button_id").click(function(){
$("#single_pic_div").hide();
$("#multi_pic_div").hide();
});
$("#pic_radio_button_id").click(function(){
$("#single_pic_div").show();
$("#multi_pic_div").hide();
});
$("#gallery_radio_button_id").click(function(){
$("#single_pic_div").hide();
$("#multi_pic_div").show();
});
$("#my_Submit_button_ID").click(function() {
$("#single_pic_div").hide();
$("#multi_pic_div").hide();
var url = "script_the_form_gets_posted_to.php";
$.ajax({
type: "POST",
url: url,
data: $("#html_form_id").serialize(),
success: function(){
document.getElementById("html_form_id").reset();
var canvas=document.getElementById("canvas");
var canvasA=document.getElementById("canvasA");
var canvasB=document.getElementById("canvasB");
var canvasC=document.getElementById("canvasC");
var canvasD=document.getElementById("canvasD");
var ctx=canvas.getContext("2d");
var ctxA=canvasA.getContext("2d");
var ctxB=canvasB.getContext("2d");
var ctxC=canvasC.getContext("2d");
var ctxD=canvasD.getContext("2d");
ctx.clearRect(0, 0,480,480);
ctxA.clearRect(0, 0,480,480);
ctxB.clearRect(0, 0,480,480);
ctxC.clearRect(0, 0,480,480);
ctxD.clearRect(0, 0,480,480);
} });
return false;
}); });
</script>
Eso funciona bien para mí, para su aplicación de solo un formulario html, podemos simplificar este código jquery así:
<script>
$(document).ready(function(){
$("#my_Submit_button_ID").click(function() {
var url = "script_the_form_gets_posted_to.php";
$.ajax({
type: "POST",
url: url,
data: $("#html_form_id").serialize(),
success: function(){
document.getElementById("html_form_id").reset();
} });
return false;
}); });
</script>
La forma más rápida y sencilla es usar un iframe. Pon un marco en la parte inferior de tu página.
<iframe name="frame"></iframe>
Y en tu forma haz esto.
<form target="frame">
</form>
y para hacer que el marco sea invisible en tu CSS.
iframe{
display: none;
}
La página se volverá a cargar si no quieres usar javascript
Necesitará usar JavaScript sin resultar en un iframe (enfoque desagradable).
Puedes hacerlo en JavaScript; usar jQuery lo hará sin dolor.
Sugiero que revises AJAX y Publicaciones.
Puede intentar establecer el atributo de destino de su formulario en un iframe oculto, de modo que la página que contiene el formulario no se vuelva a cargar.
Lo intenté con la carga de archivos (que sabemos que no se puede hacer a través de AJAX), y funcionó muy bien.
Si está enviando a la misma página donde está el formulario, podría escribir las etiquetas de formulario sin una acción y se enviará, como este
<form method=''post''> <!-- you can see there is no action here-->
Usted usa AJAX o usted
- crear y anexar un iframe al documento
- establece el nombre iframes en ''foo''
- establecer los formularios de destino a ''foo''
- enviar
- tener la acción de formularios render javascript con ''parent.notify (...)'' para dar feedback
- opcionalmente puede eliminar el iframe
así es como PUEDE funcionar sin jQuery y AJAX, y funciona muy bien con un simple iFrame. ME ENCANTA, trabaja en Opera10, FF3 e IE6. Gracias a algunos de los carteles anteriores que me indican la dirección correcta, esa es la única razón por la que estoy publicando aquí:
<select name="aAddToPage[65654]"
onchange="
if (bCanAddMore) {
addToPage(65654,this);
}
else {
alert(''Could not add another, wait until previous is added.'');
this.options[0].selected = true;
};
" />
<option value="">Add to page..</option>
[more options with values here]</select>
<script type="text/javascript">
function addToPage(iProduct, oSelect){
iPage = oSelect.options[oSelect.selectedIndex].value;
if (iPage != "") {
bCanAddMore = false;
window.hiddenFrame.document.formFrame.iProduct.value = iProduct;
window.hiddenFrame.document.formFrame.iAddToPage.value = iPage;
window.hiddenFrame.document.formFrame.submit();
}
}
var bCanAddMore = true;</script>
<iframe name="hiddenFrame" style="display:none;" src="frame.php?p=addProductToPage" onload="bCanAddMore = true;"></iframe>
el código php que genera la página que se está llamando arriba:
if( $_GET[''p''] == ''addProductToPage'' ){ // hidden form processing
if(!empty($_POST[''iAddToPage''])) {
//.. do something with it..
}
print(''
<html>
<body>
<form name="formFrame" id="formFrameId" style="display:none;" method="POST" action="frame.php?p=addProductToPage" >
<input type="hidden" name="iProduct" value="" />
<input type="hidden" name="iAddToPage" value="" />
</form>
</body>
</html>
'');
}
function Foo(){
event.preventDefault();
$.ajax( {
url:"<?php echo base_url();?>Controllername/ctlr_function",
type:"POST",
data:''email=''+$("#email").val(),
success:function(msg) {
alert(''You are subscribed'');
}
} );
}
Intenté muchas veces una buena solución y la respuesta de @taufique me ayudó a llegar a esta respuesta.
NB : No te olvides de poner event.preventDefault(); al comienzo del cuerpo de la función.