Mam witrynę z ogłoszeniami drobnymi i na stronie, na której wyświetlane są reklamy, tworzę formularz „Wyślij napiwek znajomemu” ...

Więc każdy, kto chce, może wysłać wskazówkę dotyczącą ogłoszenia do znajomych na adres e-mail.

Domyślam się, że formularz należy przesłać na stronę php, prawda?

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

Podczas wysyłania formularza strona jest ponownie ładowana ... Nie chcę tego ...

Czy jest jakiś sposób, aby nie ładować ponownie i nadal wysyłać pocztę? Najlepiej bez ajax lub jquery ...

Dzięki

Aby wysłać wiadomość e-mail bez ponownego ładowania strony, musisz przesłać żądanie AJAX. Spójrz na http://api.jquery.com/jQuery.ajax/

Twój kod powinien wyglądać następująco:

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

Formularz zostanie przesłany w tle do send_email.phpstrony, która będzie musiała obsłużyć żądanie i wysłać e-mail.

Znalazłem łatwiejszy sposób. Jeśli umieścisz ramkę iframe na stronie, możesz przekierować tam zakończenie działania i sprawić, że się pojawi. Oczywiście nic nie możesz zrobić. W takim przypadku możesz ustawić wyświetlanie elementu iframe na brak.

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

Używasz AJAX lub siebie

• utwórz i dołącz ramkę iframe do dokumentu
• ustaw nazwę iframe na „foo”
• ustaw cel formularza na „foo”
• Zatwierdź
• Niech akcja formularzy renderuje javascript z 'parent.notify (...)', aby przekazać opinię
• opcjonalnie możesz usunąć ramkę iframe

Najszybszym i najłatwiejszym sposobem jest użycie elementu iframe. Umieść ramkę u dołu strony.

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

I zrób to w swojej formie.

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

i uczynić ramkę niewidoczną w twoim css.

iframe{
  display: none;
}

Przesyłanie formularza bez ponownego ładowania strony i uzyskiwanie wyników przesłanych danych na tej samej stronie

1.) IFRAME

Po przesłaniu formularza akcja zostanie wykonana i będzie skierowana do określonego elementu iframe do ponownego załadowania.

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;

?>

Tagi: phpAjaxjquerypo stronie serwerahtml

W jquery-ajaxtym przypadku trzeba skorzystać z pomocy . Bez ajaxtego obecnie nie ma rozwiązania.

Najpierw wywołaj funkcję JavaScript po przesłaniu formularza. Po prostu ustaw onsubmit="func()". Nawet jeśli funkcja zostanie wywołana, zostanie wykonana domyślna akcja przesyłania. Jeśli zostanie wykonana, nie będzie możliwości powstrzymania odświeżania lub przekierowywania strony. Zatem następnym zadaniem jest zapobieganie domyślnej akcji. Wstaw następujący wiersz na początku func().

event.preventDefault()

Teraz nie będzie przekierowań ani odświeżania. Więc po prostu wykonujesz wywołanie Ajax od func()i robisz cokolwiek zechcesz po zakończeniu połączenia.

Przykład:

Formularz:

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

dokładnie tak to MOŻE działać bez jQuery i AJAX i działa bardzo dobrze przy użyciu prostej ramki iFrame. I LOVE IT, działa w Opera10, FF3 i IE6. Dzięki niektórym z powyższych plakatów wskazujących mi właściwy kierunek, to jedyny powód, dla którego zamieszczam tutaj:

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

kod php generujący wywoływaną stronę:

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

To powinno rozwiązać twój problem.
W tym kodzie po kliknięciu przycisku wysyłania wywołujemy jquery ajax i przekazujemy adres URL do posta
typu POST / GET
data: informacje o danych można wybrać pola wejściowe lub dowolne inne.
sucess: wywołanie zwrotne, jeśli wszystko jest w porządku z
tekstu parametru funkcji serwera , html lub json, odpowiedź z serwera
w przypadku powodzenia możesz napisać ostrzeżenia o zapisie, jeśli otrzymane dane są w jakimś stanie i tak dalej. lub wykonaj swój kod, co dalej.

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

Możesz spróbować ustawić atrybut target formularza na ukrytą ramkę iframe, aby strona zawierająca formularz nie została ponownie załadowana.

Wypróbowałem to z przesyłaniem plików (czego wiemy, że nie można tego zrobić przez AJAX) i działało pięknie.

Czy próbowałeś użyć iFrame? Brak Ajax, a oryginalna strona się nie załaduje.

Możesz wyświetlić formularz przesyłania jako oddzielną stronę wewnątrz elementu iframe, a po jego przesłaniu strona zewnętrzna / kontenera nie zostanie załadowana ponownie. To rozwiązanie nie będzie wykorzystywało żadnego rodzaju AJAX.

jeśli przesyłasz na tę samą stronę, na której znajduje się formularz, możesz napisać tagi formularza bez działania, a zostanie on przesłany, w ten sposób

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

Zrobiłem coś podobnego do powyższego jQuery, ale musiałem zresetować dane formularza i obrazy załączników graficznych. Oto co wymyśliłem:

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

To działa dobrze dla mnie, dla twojego zastosowania tylko formularza HTML, możemy uprościć ten kod jquery w następujący sposób:

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

Strona zostanie ponownie załadowana, jeśli nie chcesz używać javascript

Będziesz musiał używać JavaScript bez iframe(brzydkiego podejścia).

Możesz to zrobić w JavaScript; użycie jQuery sprawi, że będzie to bezbolesne.

Proponuję sprawdzić AJAX i 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');
      }
   }   );
}

Wiele razy próbowałem znaleźć dobre rozwiązanie, a odpowiedź @taufique pomogła mi dojść do tej odpowiedzi.

Uwaga : nie zapomnij umieścić event.preventDefault(); na początku treści funkcji.

Kolejną możliwością jest utworzenie bezpośredniego linku javascript do swojej funkcji:

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

...

Oto kilka jQuery do wysyłania na stronę php i odzyskiwania html:

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