Umleitung nach erfolgreichem Senden des Formulars

Question

Ich habe ein Formular, das nach dem Drücken der Senden-Schaltfläche Daten senden sollte. Nachdem ich einige Eingabefelder nach Bedarf markiert habe, zeigt das Formular immer dann an, wenn nach dem Drücken der Senden-Taste keine Eingabe in das gewünschte Feld erfolgt ist - so weit, so gut.

Was ich gerne realisieren würde ist, dass es eine Umleitung zu einer anderen Seite gibt, wenn die Einreichung erfolgreich war. Wenn es einige leere Pflichtfelder gibt, sollte das Formular mich zeigen, ohne mich auf eine andere Seite umzuleiten.

Inzwischen habe ich den folgenden Code:

Submit-Button:

<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
    <button type="submit" name="submityes" id="submityes" class="btn btn-danger">Submit</button> 
     </div> 
    </div> 

Auch habe ich die folgende js Funktion, um das Formular abschicken und mich auf eine andere Seite zu umleiten:

$('document').ready(function() { 
"use strict"; 
$(function() { 
    $('#submityes').click(function() { 
     $.ajax({ 
      type: "POST", 
      /*url: "process.php", //process to mail 
      data: $('form.contact').serialize(),*/ 
      success: function (msg) { 
       window.location.replace("/submit_resolved.php"); 
      }, 
      error: function() { 
       alert("error"); 
      } 
     }); 
    }); 
}); 

});

Das Problem, das ich gerade habe, ist, dass ich immer auf die "submit_resolved.php" Seite weitergeleitet werde, ob alle erforderlichen Felder abgeschlossen sind oder nicht.

Wie kann ich dieses Problem lösen? Ich möchte nur umgeleitet werden, wenn alle Pflichtfelder nicht leer sind.

Answer 1

Sie an das submit Ereignis binden sollte, nicht click Ereignis:

AKTUALISIERT ZUBRINGEN DIE KOMMENTARE

$(function() { 

    var submityesClicked; 

    //catch the click to buttons 
    $('#submityes').click(function() { 
     submityesClicked = true; 
    }); 
    $('#submitno').click(function() { 
     submityesClicked = false; 
    }); 

    $('#webform').submit(function (e) { 
     e.preventDefault();//prevent the default action 

     $.ajax({ 
      type: "POST", 
      /*url: "process.php", //process to mail 
      data: $('form.contact').serialize(),*/ 
      success: function (msg) { 
       window.location.replace(submityesClicked ? "/submit_resolved_yes.php" : "/submit_resolved_no.php"); 
      }, 
      error: function() { 
       alert("error"); 
      } 
     }); 
    }); 
}); 

Das submit Ereignis ausgelöst wird nur, wenn die Form ist gültig.

Beachten Sie, dass das Ereignis submit durch das Formular ausgelöst wird, das Ereignis click jedoch vom Element input ausgelöst wird.

Answer 2

Umleitung auf komplett durchführen. Nicht auf Erfolg

$('document').ready(function() { 
"use strict"; 
$(function() { 
    $('#submityes').click(function() { 
     $.ajax({ 
      type: "POST", 
      /*url: "process.php", //process to mail 
      data: $('form.contact').serialize(),*/ 
      success: function (msg) { 
       //window.location.replace("/submit_resolved.php"); 
      }, 
      complete: function() { 
       window.location.replace("/submit_resolved.php"); 
      } 
      error: function() { 
       alert("error"); 
      } 
     }); 
    }); 
}); 

Answer 3

Ich nehme an, Sie validieren Formular in process.php, so müssen Sie Fehler zurückgeben, wenn Validierung von process.php wie folgt fehlschlagen.

header('HTTP/1.1 500 Internal Server Booboo'); 
header('Content-Type: application/json; charset=UTF-8'); 
die(json_encode(array('message' => 'ERROR', 'code' => 1337))); 

Check this link: Return errors from PHP run via. AJAX?

Hoffnung Ihnen dies sehr nützlich sein.

Answer 4

Die einfachste, was man tun kann, ist, „erforderlich“ Attribut Eingabe elements.Example hinzuzufügen:

<form action="/action_page.php"> 
    Username: <input type="text" name="usrname" required> 
    <input type="submit"> 
</form> 

Es ist ein HTML5-Attribut, so dass kein JavaScript erforderlich. Und es wird von allen gängigen Browsern unterstützt.Überprüfen Sie diesen Link:

http://caniuse.com/#search=required

Wie auch immer, sollten Sie nicht nur auf Front-End-Prüfung verlassen. Überprüfen Sie diese Eingänge auch am Back-End.

Answer 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <form action=""> 
      Username: <input type="text" id="usrname" required> 
      <button type="button" name="submityes" 
      id="submityes" class="btn btn-danger">Submit</button> 
     </form> 
    </div> 

function isValid(){ 
    var usrname = $("#usrname").val(); 
    if(usrname == ""){ 
     return false; 
    } 
    return true; 
} 
$(function() { 
    $('#submityes').submit(function() { 
    if(isValid() == true){ 
     $.ajax({ 
      type: "POST", 
      /*url: "process.php", //process to mail 
      data: $('form.contact').serialize(),*/ 
      success: function (msg) { 
       alert("success"); 
       window.location.replace("/submit_resolved.php"); 
      }, 
     }); 
     }else{ 
     alert("error"); 
     } 
    }); 
});