Saya memiliki situs iklan baris, dan di halaman tempat iklan ditampilkan, saya membuat formulir "Kirim tip ke teman" ...

Jadi siapa pun yang mau bisa mengirim tip iklan ke beberapa alamat email teman.

Saya menebak formulir harus dikirimkan ke halaman php bukan?

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

Saat mengirimkan formulir, halaman akan dimuat ulang ... Saya tidak ingin itu ...

Apakah ada cara untuk membuatnya tidak memuat ulang dan tetap mengirim email? Lebih disukai tanpa ajax atau jquery ...

Terima kasih

Anda harus mengirimkan permintaan ajax untuk mengirim email tanpa memuat ulang halaman. Melihat http://api.jquery.com/jQuery.ajax/

Kode Anda harus berupa sesuatu di sepanjang baris:

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

Formulir akan dikirimkan di latar belakang ke send_email.phphalaman yang akan dibutuhkan untuk menangani permintaan dan mengirim email.

Saya telah menemukan apa yang menurut saya lebih mudah. Jika Anda meletakkan Iframe di halaman, Anda dapat mengarahkan keluar dari tindakan di sana dan membuatnya muncul. Anda tidak dapat melakukan apapun, tentu saja. Dalam hal ini, Anda dapat menyetel tampilan iframe ke tidak ada.

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

Anda bisa menggunakan AJAX atau Anda

• membuat dan menambahkan iframe ke dokumen
• setel nama iframes ke 'foo'
• setel target formulir ke 'foo'
• Kirimkan
• memiliki bentuk aksi render javascript dengan 'parent.notify (...)' untuk memberikan umpan balik
• opsional, Anda dapat menghapus iframe tersebut

Cara tercepat dan termudah adalah dengan menggunakan iframe. Letakkan bingkai di bagian bawah halaman Anda.

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

Dan dalam bentuk Anda lakukan ini.

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

dan untuk membuat bingkai tidak terlihat di css Anda.

iframe{
  display: none;
}

Mengirimkan Formulir Tanpa Memuat Ulang Halaman Dan Mendapatkan Hasil Dari Data Yang Dikirim Di Halaman Yang Sama

1.) IFRAME

Saat formulir dikirim, Tindakan akan dijalankan dan menargetkan iframe tertentu untuk dimuat ulang.

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: phpajaxjquerysisi serverhtml

Suatu keharusan untuk mengambil bantuan jquery-ajaxdalam kasus ini. Tanpanya ajax, saat ini tidak ada solusi.

Pertama, panggil fungsi JavaScript saat formulir dikirimkan. Setel saja onsubmit="func()". Bahkan jika fungsinya dipanggil, tindakan default pengiriman akan dilakukan. Jika ini dilakukan, tidak ada cara untuk menghentikan halaman dari refresh atau redirect. Jadi, tugas selanjutnya adalah mencegah tindakan default. Sisipkan baris berikut di awal func().

event.preventDefault()

Sekarang, tidak akan ada pengalihan atau penyegaran. Jadi, Anda cukup melakukan panggilan ajax dari func()dan melakukan apa pun yang ingin Anda lakukan saat panggilan berakhir.

Contoh:

Bentuk:

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

ini persis bagaimana itu BISA bekerja tanpa jQuery dan AJAX dan bekerja dengan sangat baik menggunakan iFrame sederhana. I LOVE IT, bekerja di Opera10, FF3 dan IE6. Berkat beberapa poster di atas yang menunjukkan arah yang benar, itulah satu-satunya alasan saya memposting di sini:

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

kode php yang menghasilkan halaman yang disebut di atas:

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

Ini seharusnya menyelesaikan masalah Anda.
Dalam kode ini setelah tombol submit klik kita memanggil jquery ajax dan kita meneruskan url ke
jenis posting POST / GET
data: informasi data Anda dapat memilih kolom input atau lainnya.
sucess: callback jika semuanya baik-baik saja dari
teks parameter fungsi server , html atau json, respon dari server
berhasil Anda dapat menulis peringatan tertulis jika data yang Anda dapatkan dalam keadaan tertentu dan seterusnya. atau jalankan kode Anda apa yang harus dilakukan selanjutnya.

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

Anda dapat mencoba mengatur atribut target formulir Anda ke iframe tersembunyi, sehingga halaman yang berisi formulir tidak akan dimuat ulang.

Saya mencobanya dengan unggahan file (yang kami tahu tidak dapat dilakukan melalui AJAX), dan berhasil dengan baik.

Sudahkah Anda mencoba menggunakan iFrame? Tidak ada ajax, dan halaman asli tidak akan dimuat.

Anda dapat menampilkan formulir pengiriman sebagai halaman terpisah di dalam iframe, dan ketika dikirimkan, halaman luar / penampung tidak akan dimuat ulang. Solusi ini tidak akan menggunakan ajax jenis apa pun.

jika Anda mengirimkan ke halaman yang sama di mana formulirnya Anda dapat menulis tag formulir tanpa tindakan dan itu akan dikirim, seperti ini

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

Saya melakukan sesuatu yang mirip dengan jquery di atas, tetapi saya perlu mengatur ulang data formulir dan kanvas lampiran grafis saya. Jadi inilah yang saya dapatkan:

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

Itu berfungsi dengan baik untuk saya, untuk aplikasi Anda hanya dalam bentuk html, kami dapat menyederhanakan kode jquery ini seperti ini:

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

Halaman akan dimuat ulang jika Anda tidak ingin menggunakan javascript

Anda perlu menggunakan JavaScript tanpa menghasilkan iframe(pendekatan jelek).

Anda dapat melakukannya di JavaScript; menggunakan jQuery akan membuatnya tidak menyakitkan.

Saya sarankan Anda memeriksa AJAX dan Posting.

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

Saya mencoba berkali-kali untuk solusi yang baik dan jawaban oleh @taufique membantu saya sampai pada jawaban ini.

NB : Jangan lupa letakkan event.preventDefault(); di awal body fungsinya.

Kemungkinan lebih lanjut adalah membuat tautan javascript langsung ke fungsi Anda:

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

...

Berikut adalah beberapa jQuery untuk memposting ke halaman php dan mendapatkan kembali html:

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