Senden Sie das Formular ohne Neuladen der Seite

Lesezeit: 9 Minuten

Ich habe eine Kleinanzeigen-Website, 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 Hinweis auf die 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 möchte ich nicht…

Gibt es eine Möglichkeit, es nicht neu zu laden und die E-Mail trotzdem zu senden? Am besten ohne ajax oder jquery…

  • Um ein Formular zu senden, müssen Sie eine HTTP-Anforderung stellen. HTTP-Anforderungen stellen, ohne die Seite zu laden, bedeutet Ajax. Du könntest auch versuchen, ohne Auto in die Stadt zu fahren.

    – QUentin

    19. Mai 2010 um 13:53 Uhr

  • “ohne Ajax oder Jquery” klingt wie “Ich will ein Auto ohne Räder”

    – Ihr gesunder Menschenverstand

    19. Mai 2010 um 13:54 Uhr

  • @ Keith Fast, <iframe> und das target Attribut wird es tun.

    – Alex

    19. Mai 2010 um 13:56 Uhr

  • Sie verwenden XmlHttpRequest nicht speziell, aber Sie rufen den Server immer noch asynchron mit Javascript auf. Das fällt unter Ajax.

    – Keith Rousseau

    19. Mai 2010 um 13:57 Uhr

  • Ich las den Titel und dachte “Ah, er braucht nur Ajax”. Ich las die Frage weiter, während ich an meinem Kaffee nippte und in meinem Kopf eine Antwort vorbereitete. Am Ende der Frage ist mein Kaffee überall auf dem Bildschirm…

    – BalusC

    19. Mai 2010 um 13:58 Uhr


Senden Sie das Formular ohne Neuladen der Seite
Juan Diego

Ich habe einen meiner Meinung nach einfacheren Weg gefunden. Wenn Sie einen Iframe in die Seite einfügen, können Sie den Ausgang der Aktion dorthin umleiten und anzeigen lassen. Du kannst natürlich nichts tun. In diesem Fall können Sie die Iframe-Anzeige auf „Keine“ 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>

  • ich benutzte action="about:blank"

    – ThorSummoner

    17. März 2015 um 17:51 Uhr

  • Damit können Sie immer noch die Werte erfassen, wie zum Beispiel: $_POST["ad_id"]

    – Wilhelm

    12. September 2016 um 12:21 Uhr

  • frage mich, warum dies nicht als Antwort ausgewählt wurde! Kopfschmerzen erspart.

    – Neo

    22. September 2017 um 3:12 Uhr

  • irishwill200, nein

    – kalte Umarmung

    2. Oktober 2017 um 13:12 Uhr

  • Das sieht nach einer sehr guten Antwort aus. Aber mit diesem Ansatz wäre es unmöglich, unterschiedliche Fehlercodes und Validierungsfehler zu handhaben. Aber um Beispielcode für jemanden zu erstellen, könnte dies nützlich sein.

    – Er Nrik

    11. Juni 2021 um 11:56 Uhr

Senden Sie das Formular ohne Neuladen der Seite
jkilbride

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

Ihr Code sollte etwas in der Art von sein:

$('#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 übermittelt send_email.php Seite, die die Anfrage bearbeiten und die E-Mail senden muss.

  • Wie würde das aussehen, wenn Sie auch den HTML-Code einbinden würden?

    – Bauplanchris

    2. Juli 2016 um 12:34 Uhr

  • dass send_email.php “send_email.php” sein sollte?

    – Tragen

    19. Februar 2017 um 20:00 Uhr

  • Wie würden Sie das nur mit Vanilla AJAX mit reinem JavaScript machen?

    – Adam

    3. Januar 2018 um 14:54 Uhr

  • Wenn das Formular immer noch aktualisiert wird, fügen Sie hinzu return false; vor der letzten schließenden Klammer

    – Der Codesee

    29. Februar 2020 um 14:32 Uhr

  • Diese Antwort erfordert eine Jquery-Abhängigkeit. Eine moderne Lösung im Jahr 2020 ist die Verwendung von XMLHttpRequest, wie in dieser Antwort beschrieben.

    – Benutzer2225804

    18. Oktober 2020 um 14:03 Uhr

1641793856 314 Ausschliesen von Debug JavaScript Code wahrend der Minimierung
Sean Kinsey

Sie verwenden entweder AJAX oder Sie

  • Erstellen Sie einen Iframe und hängen Sie ihn an das Dokument an
  • Setzen Sie den Iframe-Namen auf “foo”.
  • setze 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

  • Das ist immer noch Ajax. Nicht XHR, aber immer noch Ajax.

    – QUentin

    19. Mai 2010 um 13:59 Uhr

  • super trick danke. Beispiel für die Verwendung <form id="myGiswebForm" method="post" action="https://******/saveForm.asp" target="myiframe"> und <iframe style="display:none;" src="" name="myiframe"></iframe>

    – Luft

    21. August 2013 um 14:09 Uhr

1646351528 567 Senden Sie das Formular ohne Neuladen der Seite
Dragan Marjanović

Der schnellste und einfachste Weg ist die Verwendung eines Iframes. Setzen Sie einen Rahmen am unteren Rand Ihrer Seite.

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

Und tun Sie dies in Ihrer Form.

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

und um den Rahmen in Ihrem CSS unsichtbar zu machen.

iframe{
  display: none;
}

Senden Sie das Formular ohne Neuladen der Seite
Rhalp Darren Cabrera

ABSENDEN DES FORMULARS OHNE NEULADEN DER SEITE UND ERHALTEN SIE DAS ERGEBNIS DER ÜBERMITTELTEN DATEN AUF DERSELBEN SEITE.

Hier ist ein Teil des Codes, den ich im Internet gefunden habe und der dieses Problem löst:

1.) IFRAME

Wenn das Formular gesendet wird, wird die Aktion ausgeführt und zielt darauf ab, den spezifischen Iframe neu zu laden.

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
$Submit = isset($_POST['Submit']) ? $_POST['Submit'] : false;
$Name = isset($_POST['Name']) ? $_POST['Name'] : '';
if($Submit){
 echo $Name;
}
?>

2.) AJAX

Index.php:

<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.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>

server_action.php

<?php 
$name = isset($_POST['name']) ? $_POST['name'] : '';
$descr = isset($_POST['descr']) ? $_POST['descr'] : '';


echo $name;
echo $descr;

?>

Stichworte: phpajaxjqueryserversidehtml

  • Danke, Sir, Sie haben mein Herz, weiter so

    – Tut mir leid, ich sage es nicht

    24. Februar 2020 um 15:49 Uhr

  • @MuhammadAli, ich bin froh, das hier zu haben :).

    – Rhalp Darren Cabrera

    25. Februar 2020 um 18:58 Uhr

  • Ich habe schon oft im Internet gesucht. Ich habe Jquery verwendet, aber Jquery funktioniert manchmal und manchmal nicht. Ich denke also, dass Ajax am besten ist, was in Ihrer Antwort erwähnt wird.

    – Tut mir leid, ich sage es nicht

    26. Februar 2020 um 10:11 Uhr


1646351530 140 Senden Sie das Formular ohne Neuladen der Seite
Wiedereinsetzen von Monica3167040

Es ist ein Muss, Hilfe anzunehmen jquery-ajax in diesem Fall. 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 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 die folgende Zeile am Anfang von ein func().

event.preventDefault()

Jetzt gibt es keine Umleitung oder Aktualisierung. Sie tätigen also 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(){...},
    });
}

  • Danke, Sir, Sie haben mein Herz, weiter so

    – Tut mir leid, ich sage es nicht

    24. Februar 2020 um 15:49 Uhr

  • @MuhammadAli, ich bin froh, das hier zu haben :).

    – Rhalp Darren Cabrera

    25. Februar 2020 um 18:58 Uhr

  • Ich habe schon oft im Internet gesucht. Ich habe Jquery verwendet, aber Jquery funktioniert manchmal und manchmal nicht. Ich denke also, dass Ajax am besten ist, was in Ihrer Antwort erwähnt wird.

    – Tut mir leid, ich sage es nicht

    26. Februar 2020 um 10:11 Uhr


1646351530 762 Senden Sie das Formular ohne Neuladen der Seite
Gemeinschaft

genau so KANN es ohne jQuery und AJAX funktionieren und es funktioniert sehr gut mit einem einfachen iFrame. ICH LIEBE ES, funktioniert in Opera10, FF3 und IE6. Dank einiger der obigen Poster, die mich in die richtige Richtung weisen, ist das 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="https://stackoverflow.com/questions/2866063/frame.php?p=addProductToPage" onload="bCanAddMore = true;"></iframe>

der PHP-Code, der die oben aufgerufene Seite generiert:

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="https://stackoverflow.com/questions/2866063/frame.php?p=addProductToPage" >
                <input type="hidden" name="iProduct" value="" />
                <input type="hidden" name="iAddToPage" value="" />
            </form>
        </body>
    </html>
  ');
}

  • Verwenden Sie kein PHP print HTML-Code drucken. Schließen Sie einfach das PHP-Tag ?> und fügen Sie den HTML-Code danach hinzu. Und vermeiden Sie die Verwendung exit es ist nicht notwendig (schwerwiegende Fehler, …)

    – Oriol

    25. Februar 2013 um 20:42 Uhr

  • ja danke für den hinweis. Dies ist nur ein notwendiges Beispiel, ich habe es in meinem System nicht wirklich so gemacht.

    – Tyler

    15. März 2013 um 0:33 Uhr

  • Das ist eine Menge Arbeit an dieser Antwort, aber es gibt viele andere.

    – Wiedereinsetzung von Monica3167040

    14. Oktober 2017 um 0:53 Uhr

  • Das einzige Nebenproblem dabei ist das get() darin, weil ich nicht möchte, dass das Formularstatusbuch markierbar/cachefähig ist.

    – drtechno

    23. April 2018 um 14:41 Uhr

928750cookie-checkSenden Sie das Formular ohne Neuladen der Seite

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy