Bir seri ilanlar web sitem var ve reklamların gösterildiği sayfada "Bir arkadaşıma ipucu gönder" formu oluşturuyorum ...

Böylece, isteyen herkes bazı arkadaşlarına e-posta-adrese ilan hakkında bir ipucu gönderebilir.

Formun bir php sayfasına gönderilmesi gerektiğini tahmin ediyorum, değil mi?

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

Formu gönderirken sayfa yeniden yükleniyor ... Bunu istemiyorum ...

Yeniden yüklenmemesini ve yine de postayı göndermesini sağlamanın bir yolu var mı? Tercihen ajax veya jquery olmadan ...

Teşekkürler

Sayfayı yeniden yüklemeden e-postayı göndermek için bir ajax isteği göndermeniz gerekir. Bir göz atın http://api.jquery.com/jQuery.ajax/

Kodunuz şu satırlarda olmalıdır:

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

Form send_email.php, talebi ele alması ve e-postayı göndermesi gereken sayfaya arka planda gönderilecektir.

Daha kolay olduğunu düşündüğüm şeyi buldum. Sayfaya bir Iframe koyarsanız, eylemin çıkışını oraya yönlendirebilir ve görünmesini sağlayabilirsiniz. Elbette hiçbir şey yapamazsınız. Bu durumda, iframe görüntüsünü yok olarak ayarlayabilirsiniz.

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

Ya AJAX kullanıyorsunuz ya da

• belgeye bir iframe oluşturun ve ekleyin
• iframe adını 'foo' olarak ayarlayın
• form hedefini 'foo' olarak ayarlayın
• Sunmak
• geribildirim vermek için formlar eyleminin 'parent.notify (...)' ile javascript oluşturmasını sağlayın
• isteğe bağlı olarak iframe'i kaldırabilirsiniz

En hızlı ve en kolay yol, bir iframe kullanmaktır. Sayfanızın altına bir çerçeve koyun.

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

Ve kendi formunuzda bunu yapın.

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

ve çerçeveyi css'nizde görünmez yapmak için.

iframe{
  display: none;
}

Sayfayı Yeniden Yüklemeden Form Gönderme ve Gönderilen Verilerin Sonucunu Aynı Sayfada Alma

1.) IFRAME

Form gönderildiğinde, eylem yürütülür ve yeniden yüklenecek belirli iframe'i hedefler.

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;

?>

Etiketler: phpAjaxjquerysunucu tarafıhtml

jquery-ajaxBu durumda yardım almak şart . Olmadan ajaxşu anda bir çözüm yok.

İlk olarak, form gönderildiğinde bir JavaScript işlevi çağırın. Sadece ayarlayın onsubmit="func()". İşlev çağrılsa bile, gönderimin varsayılan eylemi gerçekleştirilecektir. Bu yapılırsa, sayfayı yenilemekten veya yeniden yönlendirmekten alıkoymanın bir yolu olmayacaktır. Dolayısıyla, bir sonraki görev varsayılan eylemi önlemektir. Aşağıdaki satırı başlangıcına ekleyin func().

event.preventDefault()

Şimdi, yönlendirme veya yenileme olmayacak. Yani, sadece bir ajax araması func()yaparsınız ve arama bittiğinde yapmak istediğinizi yaparsınız.

Misal:

Form:

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

jQuery ve AJAX olmadan tam olarak bu şekilde çalışabilir ve basit bir iFrame kullanarak çok iyi çalışır. SEVİYORUM, Opera10, FF3 ve IE6'da çalışıyor. Bana doğru yönü gösteren yukarıdaki posterlerden bazıları sayesinde, buraya yazmamın tek nedeni bu:

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

yukarıda çağrılan sayfayı oluşturan php kodu:

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

Bu probleminizi çözmeli.
Gönder düğmesine tıkladıktan sonra bu kodda jquery ajax diyoruz ve url'yi
POST / GET
veri tipine iletiyoruz : veri bilgileri giriş alanlarını veya diğerlerini seçebilirsiniz.
başarılı: geri arama, sunucu
işlevi parametre metni, html veya json'dan her şey yolundaysa, sunucudan
başarıyla gelen yanıt, aldığınız veriler bir tür durumdaysa vb. yazma uyarıları yazabilirsiniz. veya daha sonra ne yapmanız gerektiğini kodunuzu çalıştırı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>

Formunuzun hedef özelliğini gizli bir iframe olarak ayarlamayı deneyebilirsiniz, böylece formu içeren sayfa yeniden yüklenmez.

Bunu dosya yüklemeleriyle denedim (AJAX ile yapılamayacağını biliyoruz) ve çok güzel çalıştı.

İFrame kullanmayı denediniz mi? Ajax yok ve orijinal sayfa yüklenmeyecek.

Gönderme formunu iframe içinde ayrı bir sayfa olarak görüntüleyebilirsiniz ve gönderildiğinde dış / kapsayıcı sayfası yeniden yüklenmez. Bu çözüm herhangi bir ajax kullanmayacaktır.

Yukarıdaki jquery'ye benzer bir şey yaptım, ancak form verilerimi ve grafik eki tuvallerimi sıfırlamam gerekiyordu. İşte bulduğum şey:

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

Bu benim için iyi çalışıyor, sadece bir html formu uygulamanız için, bu jquery kodunu şu şekilde basitleştirebiliriz:

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

JavaScript kullanmak istemiyorsanız sayfa yeniden yüklenecek

JavaScript'i iframe(çirkin bir yaklaşımla) sonuçlanmadan kullanmanız gerekecek .

Bunu JavaScript ile yapabilirsiniz; jQuery kullanmak onu ağrısız hale getirecektir.

AJAX ve Posting'e göz atmanızı öneririm.

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

İyi bir çözüm için defalarca denedim ve @taufique tarafından verilen cevap bu cevaba ulaşmama yardımcı oldu.

Not : event.preventDefault(); Fonksiyonun gövdesinin başına koymayı unutmayın .

Formun bulunduğu aynı sayfaya gönderiyorsanız, form etiketlerini bir eylem olmadan yazabilirsiniz ve form şu şekilde gönderilir

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

Bir başka olasılık da, işlevinize doğrudan bir javascript bağlantısı oluşturmaktır:

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

...

JavaScript bilmiyorum ve PHP öğrenmeye yeni başladım, bu yüzden tüm bu yanıtlardan bana yardımcı olan şey şuydu:

1. İnedx.php oluşturun ve ekleyin:

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

2. E-posta.php oluşturun ve verileri alıp almadığınızı kontrol etmek için bu kodu ekleyin (bunu iframe içinde index.php'de görmelisiniz):

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

3. Her şey yolundaysa, email.php'deki kodu şu şekilde değiştirin:

    <?php
    if (isset($_POST['Submit'])){
    $to = $_POST['email'];
    $subject = "Test email";
    $message = "Test message";
    $headers = "From: test@test.com \r\n";
    $headers .= "Reply-To: test@test.com \r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
    
    mail($to, $subject, $message, $headers);
    }
    ?>

Umarım bu benim gibi diğer tüm çaylaklara yardımcı olur :)

Bir php sayfasına gönderip html'yi geri almak için bazı jQuery'ler:

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