Tengo un sitio web de anuncios clasificados, y en la página donde se muestran los anuncios, estoy creando un formulario "Enviar un consejo a un amigo" ...

Así que 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 forma de hacer que no se recargue y aún envíe el correo? Preferiblemente sin ajax o jquery ...

Gracias

Deberá enviar una solicitud ajax para enviar el correo electrónico sin volver a cargar la página. Eche un vistazo a http://api.jquery.com/jQuery.ajax/

Su código debe ser algo parecido a:

$('#submit').click(function() {
    $.ajax({
        url: 'send_email.php',
        type: 'POST',
        data: {
            email: 'email@example.com',
            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.

Encontré lo que creo que es una forma más fácil. Si coloca un Iframe en la página, puede redirigir la salida de la acción allí y hacer que aparezca. No puedes hacer nada, por supuesto. En ese caso, puede configurar la visualización del iframe en ninguno.

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

O usa AJAX o usted

• crear y agregar un iframe al documento
• establecer el nombre de iframes en 'foo'
• establecer el destino de formularios en 'foo'
• enviar
• haga que la acción de formularios represente javascript con 'parent.notify (...)' para dar su opinión
• opcionalmente, puede eliminar el iframe

La forma más rápida y sencilla es utilizar 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 hacer que el marco sea invisible en tu css.

iframe{
  display: none;
}

Enviar formulario sin volver a cargar la página y obtener el resultado de los datos enviados en la misma página

1.) IFRAME

Cuando se envía el formulario, la acción se ejecutará y apuntará al iframe específico para recargar.

index.php

<iframe name="content" style="">
</iframe>
<form action="iframe_content.php" method="post" target="content">
<input type="text" name="Name" value="">
<input type="submit" name="Submit" value="Submit">
</form>

iframe_content.php

<?php
if (isset($_POST['Submit'])){
$Name = $_POST['Name'];
echo $Name;
}
?>

2.) AJAX

Index.php:

   <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: phpajaxjquerylado del servidorhtml

Es imprescindible tener ayuda jquery-ajaxen este caso. Sin ajax, actualmente no hay solución.

Primero, llame a una función de JavaScript cuando se envíe el formulario. Solo configúrelo onsubmit="func()". Incluso si se llama a la función, se realizará la acción predeterminada del envío. Si se realiza, no habría forma de evitar que la página se actualice o se redirija. Entonces, la siguiente tarea es evitar la acción predeterminada. Inserte la siguiente línea al comienzo de func().

event.preventDefault()

Ahora, no habrá redirecciones ni actualizaciones. Entonces, simplemente realiza una llamada ajax desde func()y hace lo que quiera hacer cuando finalice 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(){...},
    });
}

así es exactamente como PUEDE funcionar sin jQuery y AJAX y está funcionando muy bien usando un iFrame simple. ME ENCANTA, funciona 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 publico 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 llama 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>
  ');
}

Esto debería solucionar tu problema.
En este código, después de hacer clic en el botón enviar, llamamos jquery ajax y pasamos la url para publicar el
tipo POST / GET
data: información de datos que puede seleccionar campos de entrada o cualquier otro.
éxito: devolución de llamada si todo está bien desde el
texto del parámetro de la función del servidor , html o json, respuesta del servidor
con éxito, puede escribir advertencias de escritura si los datos que obtuvo están en algún tipo de estado, etc. o ejecute su 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>

Puede intentar configurar el atributo de destino de su formulario en un iframe oculto, para que la página que contiene el formulario no se vuelva a cargar.

Lo probé con cargas de archivos (que sabemos que no se pueden hacer a través de AJAX), y funcionó a la perfección.

¿Ha intentado utilizar un iFrame? Sin 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íe, la página externa / contenedor no se recargará. Esta solución no utilizará ningún tipo de ajax.

si está enviando a la misma página donde está el formulario, puede escribir las etiquetas del formulario sin una acción y se enviará, así

<form method='post'> <!-- you can see there is no action here-->

Hice algo similar al jquery anterior, pero necesitaba restablecer los datos de mi formulario y los lienzos de archivos adjuntos gráficos. Así que esto 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 de esta manera:

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

Necesitará usar JavaScript sin que resulte en un iframe (enfoque desagradable).

Puedes hacerlo en JavaScript; usar jQuery lo hará indoloro.

Le sugiero que consulte AJAX y Publicación.

Otra posibilidad es hacer un enlace javascript directo a su función:

<form action="javascript:your_function();" method="post">

...

La página se volverá a cargar si no desea utilizar javascript.

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 encontrar una buena solución y la respuesta de @taufique me ayudó a llegar a esta respuesta.

NB : No olvide poner event.preventDefault(); al principio del cuerpo de la función.

Aquí hay algo de 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;
});