web-dev-qa-db-de.com

Verhindern Sie, dass die Seite erneut geladen wird, und leiten Sie sie auf das Formular "Submit Ajax/JQuery" um

Ich habe alle ähnlichen Posts da draußen durchgesehen, aber nichts scheint zu helfen. Das habe ich

HTML:

<section>
  <form id="contact-form" action="" method="post">
    <fieldset>
      <input id="name" name="name" placeholder="Name" type="text" />
      <input id="email" name="email" placeholder="Email" type="text" />
      <textarea id="comments" name="comments" placeholder="Message"></textarea>
      <div class="12u">
        <a href="#" id="form-button-submit " class="button" onClick="sendForm()">Send Message</a>
        <a href="#" id="form-button-clear" class="button" onClick="document.getElementById('contact-form').reset()">Clear Form</a>
      </div>
      <ul id="response"></ul>
    </fieldset>
  </form>
</section>

JavaScript/jQuery:

function sendForm() {
  var name = $('input#name').val();
  var email = $('input#email').val();
  var comments = $('textarea#comments').val();
  var formData = 'name=' + name + '&email=' + email + '&comments=' + comments;
  $.ajax({
    type: 'post',
    url: 'js/sendEmail.php',
    data: formData,
    success: function(results) {
      $('ul#response').html(results);
    }
  }); // end ajax
}

Was ich nicht tun kann, ist zu verhindern, dass die Seite aktualisiert wird, wenn der #form-button-submit gedrückt wird. Ich habe return false; ausprobiert Ich habe preventDefault() ausprobiert und jede Kombination, einschließlich return false; in der onClick. Ich habe auch versucht, stattdessen input type="button" und type="submit" und das gleiche Ergebnis zu verwenden. Ich kann das nicht lösen und es ist verrückt. Wenn möglich, würde ich den Hyperlink aufgrund einiger Design-Dinge eher verwenden. Ich würde mich sehr über Ihre Hilfe freuen.

3

Ändern Sie die Funktion wie folgt:

function sendForm(e){
  e.preventDefault();
}

Und als Kommentar erwähnt, passieren Sie die Veranstaltung:

onclick = sendForm(event);

Update 2:

$('#form-button-submit').on('click', function(e){
   e.preventDefault();

   var name = $('input#name').val(),
       email = $('input#email').val(),
       comments = $('textarea#comments').val(),
       formData = 'name=' + name + '&email=' + email + '&comments=' + comments;

    $.ajax({
      type: 'post',
      url: 'js/sendEmail.php',
      data: formData,
      success: function(results) {
        $('ul#response').html(results);
      }
    });
});
21
function sendForm(){
    // all your code
    return false;
}
4
Samuel Cook

Haben Sie versucht, mit

function sendForm(event){
    event.preventDefault();
}
2
stf

Ich war auch ein bisschen damit beschäftigt, eine Lösung für dieses Problem zu finden, und bis jetzt war die beste Arbeitsmethode, die ich fand, diese:

Versuchen Sie, mithilfe von XHR eine Anfrage an eine beliebige URL zu senden, anstatt an $ .ajax ().
Beispiel-

<form method="POST" enctype="multipart/form-data" id="test-form">

var testForm = document.getElementById('test-form');
testForm.onsubmit = function(event) {
event.preventDefault();

var request = new XMLHttpRequest();
// POST to any url
request.open('POST', some_url, false);

var formData = new FormData(document.getElementById('test-form'));
request.send(formData);


Damit würden Ihre Daten erfolgreich gesendet ... ohne erneutes Laden der Seite.

2
Kaif Khan

So ging ich vor: Ich entfernte das gesamte form -Tag und platzierte alle Formularelemente wie Eingaben, Textfeld-Tags in einem div und verwendete eine Schaltfläche, um eine Javascript-Funktion aufzurufen. So was:

<div id="myform">
<textarea name="textarea" class="form-control">Hello World</textarea>
<button type="submit" class="btn btn-primary"
                            onclick="javascript:sendRequest()">Save
                            changes</button>
<div>

Javascript:

function sendRequest() {

        $.ajax({
            type: "POST",
            url: "/some/url/edit/",
            data: {
                data: $("#myform textarea").val()
            },
            success: function (data, status, jqXHR) {
                console.log(data);
                if (data == 'success') {
                    $(`#mymodal`).modal('hide');
                }
            }
        });

        return true;
}

Ich dachte mir, warum wir ein form verwenden, wenn wir die eigentliche Anfrage mit AJAX senden. Dieser Ansatz erfordert möglicherweise zusätzlichen Aufwand, um beispielsweise die Formularelemente zurückzusetzen, funktioniert jedoch bei mir.

Anmerkung: Die obigen Antworten sind eleganter als dies, aber mein Anwendungsfall war ein wenig anders. Meine Webseite hatte viele Formen und ich dachte nicht, dass es ein guter Weg wäre, Event-Listener für jeden Submit-Button zu registrieren. Also habe ich jede Submit-Schaltfläche dazu gebracht, die sendRequest () -Funktion aufzurufen.

0
Yashas

Eine andere Möglichkeit, das Senden des Formulars zu verhindern, besteht darin, die Schaltfläche außerhalb des Formulars zu platzieren. Ich hatte vorhandenen Code, der funktionierte und erstellte eine neue Seite basierend auf dem Arbeitscode und schrieb den HTML-Code wie folgt:

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
    <button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
</form>

Dieses Formular verursacht die oben beschriebene unerwünschte Weiterleitung. Durch Ändern des HTML-Codes in den unten gezeigten wurde das Problem behoben.

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
</form>
<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
0
John

Ich erwarte, dass jeder meine Idee sehr gut versteht, da es eine sehr einfache Idee ist.

  1. geben Sie Ihr gewünschtes Formular selbst ein ID oder Sie können es auf eine andere Weise erhalten, die Sie bevorzugen.

  2. rufen Sie in der Formulareingabe "submit" eine OnClick-Methode aus Ihrer Javascript-Datei auf.

  3. bei dieser Methode muss eine Variable auf den addEventListener von id verweisen und eine preventDefault-Methode für "submit" und nicht für "click" erstellt werden.
    Um dies zu verdeutlichen, siehe dies:

    // element refers to the form DOM after you got it in a variable called element for example:
    element.addEventListener('submit', (e) => {
       e.preventDefault();
       // rest of your code goes here
    });  
    

    Die Idee in Kürze ist, sich mit dem Formular nach Submit-Ereignis zu befassen, nachdem Sie mit Submit-Schaltfläche nach Click-Ereignis verfahren haben.

Was auch immer Sie in dieser Methode benötigen, sie funktioniert jetzt ohne Aktualisierung :)
Achte nur darauf, mit Ajax richtig umzugehen, und du wirst fertig sein.

Natürlich funktioniert es nur mit Formularen.

0
Ahmed Mabrouk

Einfacher und vollständiger Arbeitscode

<script>
    $(document).ready(function() {
        $("#contact-form").submit(function() {
            $("#loading").show().fadeIn('slow');
                $("#response").hide().fadeOut('slow');
                 var frm = $('#contact-form');
                 $.ajax({
                     type: frm.attr('method'),
                     url: 'url.php',
                     data: frm.serialize(),
                     success: function (data) {
                         $('#response').html(data);
                         $("#loading").hide().fadeOut('slow');
                         $("#response").slideDown();
               }, error: function(jqXHR, textStatus, errorThrown){
              console.log(" The following error occured: "+ textStatus, errorThrown );
            } });
           return false;
        });
    });
</script>

#loading kann ein Bild sein oder etwas, das angezeigt wird, wenn das Formular verarbeitet wird. Um den Code zu verwenden, erstellen Sie einfach ein Formular mit der ID contact-form.

0
firstmadcoding