web-dev-qa-db-ger.com

Formular absenden, ohne Seite neu zu laden

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

So kann jeder, der möchte, einen Tipp der Anzeige per E-Mail an Freunde schicken.

Ich vermute, das Formular muss auf einer PHP-Seite eingereicht 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 erneut geladen ... Ich möchte das nicht ...

Gibt es eine Möglichkeit, die Mail nicht neu zu laden und trotzdem zu senden? Vorzugsweise ohne Ajax oder Jquery ...

Vielen Dank

phpjavascripthtmlforms
69
user188962

Sie müssen eine Ajax-Anfrage senden, um die E-Mail zu senden, ohne die Seite erneut zu laden. Werfen Sie einen Blick auf http://api.jquery.com/jQuery.ajax/

Ihr Code sollte ungefähr so ​​aussehen:

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

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

52
jkilbride

Ich habe gefunden, was ich denke, ist ein einfacher Weg. Wenn Sie ein Iframe in die Seite einfügen, können Sie den Ausgang der Aktion dort umleiten und so anzeigen, dass sie angezeigt wird. Sie können natürlich nichts tun. In diesem Fall können Sie die Anzeige von iframe 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>
59
Juan Diego

Sie verwenden entweder AJAX oder Sie

  • einen iframe erstellen und an das Dokument anhängen
  • setze den iframes-Namen auf 'foo'
  • setzen Sie das Formularziel auf "foo".
  • einreichen
  • lassen Sie die Formulare-Aktion Javascript mit 'parent.notify (...)' rendern, um Feedback zu geben
  • optional können Sie den iframe entfernen
20
Sean Kinsey

Am schnellsten und einfachsten ist es, einen iframe zu verwenden. Setzen Sie einen Rahmen unten auf Ihre Seite.

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

Und das in deiner Form.

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

und um den Rahmen in Ihrem CSS unsichtbar zu machen.

iframe{
  display: none;
}
8
Dragan Marjanovic

genau so kann es auch 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 Plakate, die mich in die richtige Richtung weisen, poste ich nur deshalb hier:

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

Formular absenden, ohne die Seite erneut zu laden und Ergebnis der übermittelten Daten auf derselben Seite zu erhalten

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

Indexdatei:

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

?>

Tags:phpajaxjqueryserverside

4
Rhalp Darren Cabrera

Dies sollte Ihr Problem verlangsamen.
In diesem Code rufen wir nach dem Klicken des Submit-Buttons jquery ajax auf und übergeben die URL zum Posten
geben Sie POST/GET ein
Daten: Dateninformationen Sie können Eingabefelder oder andere auswählen.
success: Rückruf, wenn vom Server alles in Ordnung ist
Funktionsparameter text, html oder json, Antwort vom Server 
Erfolgreich können Sie Schreibwarnungen schreiben, wenn sich die Daten, die Sie erhalten haben, in einem bestimmten Zustand befinden und so weiter. oder führe deinen 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>
3
Matas Lesinskas

Es ist in diesem Fall ein Muss, jquery-ajax zu helfen. Ohne ajax gibt es derzeit keine Lösung.

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

event.preventDefault()

Jetzt gibt es keine Umleitung oder Aktualisierung. So tätigen Sie einfach einen Ajax-Anruf von func() und tun, was Sie tun 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(){...},
    });
}
3
taufique

Sie können versuchen, das Zielattribut Ihres Formulars auf einen ausgeblendeten Iframe festzulegen, damit die Seite, die das Formular enthält, nicht erneut geladen wird.

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

3
wtaniguchi

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

Sie können das gesendete Formular als separate Seite im iframe anzeigen. Wenn es gesendet wird, wird die äußere/Containerseite nicht erneut geladen. Bei dieser Lösung wird keinerlei Ajax verwendet.

2
DanC

Ich habe etwas Ähnliches wie die jquery oben gemacht, aber ich musste meine Formulardaten und die Grafik-Attachment-Canvases zurücksetzen ... Hier habe ich folgendes gefunden:

    <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, wenn Sie nur ein HTML-Formular verwenden, können Sie diesen 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>
1
drtechno

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

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

...

0
burncycle

wenn Sie auf derselben Seite einreichen, auf der sich das Formular befindet, können Sie die Formular-Tags ohne Aktion schreiben, und das Formular wird so gesendet

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

Sie müssen JavaScript verwenden, ohne zu einer iframe (hässlichen Ansatz) zu führen.

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

Ich schlage vor, Sie checken AJAX und Posting. 

0
alex