Ho un sito web di annunci economici e nella pagina in cui vengono visualizzati gli annunci, sto creando un modulo "Invia un suggerimento a un amico" ...

Quindi chiunque lo desideri può inviare un suggerimento dell'annuncio all'indirizzo email di alcuni amici.

Immagino che il modulo debba essere inviato a una pagina php, giusto?

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

Quando si invia il modulo, la pagina viene ricaricata ... non lo voglio ...

C'è un modo per evitare che si ricarichi e continui a inviare la posta? Preferibilmente senza ajax o jquery ...

Grazie

Dovrai inviare una richiesta ajax per inviare l'email senza ricaricare la pagina. Dai un'occhiata a http://api.jquery.com/jQuery.ajax/

Il tuo codice dovrebbe essere qualcosa sulla falsariga di:

$('#submit').click(function() {
    $.ajax({
        url: 'send_email.php',
        type: 'POST',
        data: {
            email: 'email@example.com',
            message: 'hello world!'
        },
        success: function(msg) {
            alert('Email Sent');
        }               
    });
});

Il modulo verrà send_email.phpinviato in background alla pagina che dovrà gestire la richiesta e inviare l'email.

Ho trovato quello che penso sia un modo più semplice. Se metti un Iframe nella pagina, puoi reindirizzare l'uscita dell'azione da lì e farlo apparire. Non puoi fare niente, ovviamente. In tal caso, puoi impostare la visualizzazione dell'iframe su nessuno.

<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 usi AJAX o tu

• creare e aggiungere un iframe al documento
• imposta il nome dell'iframe su "foo"
• imposta l'obiettivo dei moduli su 'foo'
• Invia
• fare in modo che l'azione dei form renda javascript con 'parent.notify (...)' per fornire feedback
• facoltativamente puoi rimuovere l'iframe

Il modo più veloce e più semplice è utilizzare un iframe. Metti una cornice in fondo alla pagina.

<iframe name="frame"></iframe>

E nella tua forma fallo.

<form target="frame">
</form>

e per rendere la cornice invisibile nel tuo css.

iframe{
  display: none;
}

Invio del modulo senza ricaricare la pagina e ottenere il risultato dei dati inviati nella stessa pagina

Ecco alcuni dei codici che ho trovato su Internet che risolvono questo problema:

1.) IFRAME

Quando il modulo viene inviato, l'azione verrà eseguita e targetizzerà l'iframe specifico da ricaricare.

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;

?>

Tag: phpajaxjquerylato serverhtml

In jquery-ajaxquesto caso è d' obbligo chiedere aiuto . Senza ajax, attualmente non c'è soluzione.

Innanzitutto, chiama una funzione JavaScript quando il modulo viene inviato. Basta impostare onsubmit="func()". Anche se la funzione viene chiamata, verrà eseguita l'azione predefinita dell'invio. Se viene eseguito, non ci sarebbe modo di impedire alla pagina di aggiornarsi o reindirizzare. Quindi, l'attività successiva è impedire l'azione predefinita. Inserire la riga seguente all'inizio di func().

event.preventDefault()

Ora non ci saranno reindirizzamenti o aggiornamenti. Quindi, fai semplicemente una chiamata ajax da func()e fai quello che vuoi fare quando la chiamata finisce.

Esempio:

Modulo:

<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(){...},
    });
}

questo è esattamente come può funzionare senza jQuery e AJAX e funziona molto bene usando un semplice iFrame. I LOVE IT, funziona in Opera10, FF3 e IE6. Grazie ad alcuni dei poster sopra riportati che mi indicano la giusta direzione, questo è l'unico motivo per cui sto postando qui:

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

il codice php che genera la pagina che viene richiamata sopra:

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>
  ');
}

Questo dovrebbe risolvere il tuo problema.
In questo codice, dopo aver fatto clic sul pulsante di invio, chiamiamo jquery ajax e passiamo l'URL al
tipo di post POST / GET
data: informazioni sui dati è possibile selezionare i campi di input o qualsiasi altro.
successo: callback se tutto va bene dal
testo del parametro della funzione del server , html o json, risposta dal server
con successo puoi scrivere avvisi di scrittura se i dati che hai sono in qualche tipo di stato e così via. o esegui il tuo codice cosa fare dopo.

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

Puoi provare a impostare l'attributo di destinazione del tuo modulo su un iframe nascosto, in modo che la pagina contenente il modulo non venga ricaricata.

L'ho provato con i caricamenti di file (che sappiamo non può essere fatto tramite AJAX) e ha funzionato magnificamente.

Hai provato a utilizzare un iFrame? No ajax e la pagina originale non verrà caricata.

Puoi visualizzare il modulo di invio come una pagina separata all'interno dell'iframe e quando viene inviato la pagina esterna / contenitore non verrà ricaricata. Questa soluzione non farà uso di alcun tipo di ajax.

se stai inviando alla stessa pagina in cui si trova il modulo potresti scrivere i tag del modulo senza un'azione e verrà inviato, in questo modo

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

Ho fatto qualcosa di simile al jquery sopra, ma avevo bisogno di reimpostare i dati del modulo e le tele degli allegati grafici. Quindi ecco cosa ho pensato:

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

Questo funziona bene per me, per la tua applicazione di un semplice modulo html, possiamo semplificare questo codice jquery in questo modo:

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

Sarà necessario utilizzare JavaScript senza risultare in un file iframe (brutto approccio).

Puoi farlo in JavaScript; l'utilizzo di jQuery lo renderà indolore.

Ti suggerisco di controllare AJAX e Posting.

Un'ulteriore possibilità è creare un collegamento javascript diretto alla tua funzione:

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

...

La pagina verrà ricaricata se non si desidera utilizzare 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');
      }
   }   );
}

Ho provato molte volte per una buona soluzione e la risposta di @taufique mi ha aiutato ad arrivare a questa risposta.

NB : Non dimenticare di mettere event.preventDefault(); all'inizio del corpo della funzione.

Ecco un po 'di jQuery per postare su una pagina php e recuperare html:

$('form').submit(function() {
    $.post('tip.php', function(html) {
       // do what you need in your success callback
    }
    return false;
});