Ich habe eine Kleinanzeigen-Website und auf der Seite, auf der Anzeigen geschaltet werden, erstelle ich ein Formular "Tipp an einen Freund senden" ...

Jeder, der möchte, kann einen Tipp der Anzeige an die E-Mail-Adresse eines Freundes senden.

Ich vermute, das Formular muss an eine PHP-Seite gesendet werden, oder?

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

Beim Absenden des Formulars wird die Seite neu geladen ... das will ich nicht ...

Gibt es eine Möglichkeit, die E-Mail nicht neu zu laden und trotzdem zu senden? Am liebsten ohne Ajax oder JQuery ...

Vielen Dank

Sie müssen eine Ajax-Anfrage senden, um die E-Mail zu senden, ohne die Seite neu zu laden. Schauen Sie sich http://api.jquery.com/jQuery.ajax/ an.

Ihr Code sollte wie folgt aussehen:

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

Das Formular wird im Hintergrund an die send_email.phpSeite gesendet, die die Anfrage bearbeiten und die E-Mail senden muss.

Ich habe herausgefunden, was meiner Meinung nach einfacher ist. Wenn Sie einen Iframe in die Seite einfügen, können Sie den Ausgang der Aktion dort umleiten und anzeigen lassen. Sie können natürlich nichts tun. In diesem Fall können Sie die Iframe-Anzeige auf none setzen.

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

Sie verwenden entweder AJAX oder Sie

• Erstellen Sie einen Iframe und hängen Sie ihn an das Dokument an
• Setzen Sie den Iframes-Namen auf 'foo'.
• Setzen Sie das Formularziel auf "foo".
• einreichen
• Lassen Sie die Formularaktion Javascript mit 'parent.notify (...)' rendern, um Feedback zu geben
• Optional können Sie den Iframe entfernen

Der schnellste und einfachste Weg ist die Verwendung eines Iframes. Fügen Sie einen Rahmen am Ende Ihrer Seite ein.

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

Und in deiner Form mach das.

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

und um den Frame in Ihrem CSS unsichtbar zu machen.

iframe{
  display: none;
}

Senden eines Formulars ohne erneutes Laden der Seite und Abrufen des Ergebnisses der übermittelten Daten auf derselben Seite

Hier ist ein Teil des Codes, den ich im Internet gefunden habe, um dieses Problem zu lösen:

1.) IFRAME

Wenn das Formular gesendet wurde, wird die Aktion ausgeführt und zielt auf den angegebenen Iframe ab, der neu geladen werden soll.

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;

?>

Stichworte: phpAjaxjqueryserverseitightml

jquery-ajaxIn diesem Fall ist es ein Muss, Hilfe in Anspruch zu nehmen . Ohne ajaxgibt es derzeit keine Lösung.

Rufen Sie zunächst eine JavaScript-Funktion auf, wenn das Formular gesendet wird. Einfach einstellen onsubmit="func()". Selbst wenn die Funktion aufgerufen wird, wird die Standardaktion der Übermittlung ausgeführt. Wenn dies ausgeführt wird, gibt es keine Möglichkeit, das Aktualisieren oder Umleiten der Seite zu verhindern. Die nächste Aufgabe besteht also darin, die Standardaktion zu verhindern. Fügen Sie am Anfang die folgende Zeile ein func().

event.preventDefault()

Jetzt erfolgt keine Umleitung oder Aktualisierung mehr. Sie tätigen einfach einen Ajax-Anruf von func()und tun, was Sie möchten, wenn der Anruf endet.

Beispiel:

Bilden:

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

Genau so kann es ohne jQuery und AJAX funktionieren und es funktioniert sehr gut mit einem einfachen iFrame. Ich liebe es, arbeitet in Opera10, FF3 und IE6. Dank einiger der oben genannten Poster, die mir die richtige Richtung weisen, ist dies der einzige Grund, warum ich hier poste:

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

der PHP-Code, der die Seite generiert, die oben aufgerufen wird:

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

Dies sollte Ihr Problem lösen.
In diesem Code rufen wir nach dem Klicken auf die Schaltfläche "Senden" jquery ajax auf und übergeben die URL an
POST / GET-
Daten vom Post- Typ : Dateninformationen, die Sie in Eingabefeldern oder anderen auswählen können.
Erfolg: Rückruf, wenn alles in Ordnung ist, vom Serverfunktionsparameter
Text, HTML oder JSON, Antwort vom Server
in Erfolg Sie können Schreibwarnungen schreiben, wenn sich die erhaltenen Daten in einem Zustand befinden und so weiter. oder führen Sie Ihren Code aus, was als nächstes zu tun ist.

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

Sie können versuchen, das Zielattribut Ihres Formulars auf einen versteckten Iframe festzulegen, damit die Seite mit dem Formular nicht neu geladen wird.

Ich habe es mit Datei-Uploads versucht (von denen wir wissen, dass sie nicht über AJAX durchgeführt werden können), und es hat wunderbar funktioniert.

Haben Sie versucht, einen iFrame zu verwenden? Kein Ajax, und die Originalseite wird nicht geladen.

Sie können das Übermittlungsformular als separate Seite im Iframe anzeigen. Wenn es übermittelt wird, wird die äußere / Containerseite nicht neu geladen. Diese Lösung verwendet keine Art von Ajax.

Wenn Sie auf derselben Seite senden, auf der sich das Formular befindet, können Sie die Formular-Tags ohne Aktion schreiben, und es wird wie folgt gesendet

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

Ich habe etwas Ähnliches wie oben gemacht, aber ich musste meine Formulardaten und Leinwände für grafische Anhänge zurücksetzen. Also hier ist, was ich mir ausgedacht habe:

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

Das funktioniert gut für mich, für Ihre Anwendung nur eines HTML-Formulars können wir diesen JQuery-Code wie folgt vereinfachen:

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

Sie müssen JavaScript verwenden, ohne dass dies zu einem iframe(hässlichen) Ansatz führt.

Sie können dies in JavaScript tun. Die Verwendung von jQuery macht es schmerzlos.

Ich schlage vor, Sie schauen sich AJAX und Posting an.

Eine weitere Möglichkeit besteht darin, einen direkten Javascript-Link zu Ihrer Funktion herzustellen:

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

...

Die Seite wird neu geladen, wenn Sie kein Javascript verwenden möchten

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

Ich habe viele Male nach einer guten Lösung gesucht und die Antwort von @taufique hat mir geholfen, zu dieser Antwort zu gelangen.

NB : Vergessen Sie nicht, event.preventDefault(); den Anfang des Funktionskörpers zu setzen.

Hier ist eine jQuery zum Posten auf einer PHP-Seite und zum Zurückholen von HTML:

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