AJAX not working submitting form - php

Question

I got some AJAX code, but it doesn't get response from server. I tried many things but can't figure out why this is not working. I am running on a localhost setup with XAMPP. I want the echo to be seen in the span with id status.
AJAX on index.php
$(document).ready(function() {
$("#registrationform").submit(function() {
$.ajax({
type: "POST",
url: "registration.php",
data: $("#registrationform").serialize(),
success: function(data) {
$("#status").html(data);
}
});
alert("Ajax not running")
});
});
FORM on index.php
<form id="registrationform" action="">
Voornaam: <input type="text" name="voornaam" /><br />
Tussenvoegsel: <input type="text" name="tussenvoegsel" /><br />
Achternaam: <input type="text" name="achternaam" /><br />
Geslacht: <?php include_once("parser/geslacht.php"); ?><br />
Land: <?php include_once("parser/land.php"); ?><br />
Geboortedatum: <?php include_once("parser/gebdatum.php"); ?><br />
E-mail: <input type="text" name="e-mail" /><br />
Wachtwoord: <input type="password" name="password" /><br />
Hertype wachtwoord: <input type="password" name="password2" /><br /><br />
De onderstaande vraag is nodig om uw wachtwoord terug te halen mocht u die vergeten zijn.<br />
Geheime vraag: <select name="geheimevraag" id="geheimevraag">
<option value="huisdier">Wat is de naam van jouw eerste huisdier?</option>
<option value="moedername">Wat is de meisjesnaam van je moeder?</option>
<option value="eerstebaas">Hoe heet je eerste baas?</option>
<option value="eigenvraag">Eigen vraag opstellen</option>
</select><br/>
<span id="anders" style="display:none;">Eigen vraag: <input type="text" name="eigen_vraag" style="width:300px;"/></span><br />
Antwoord: <input type="password" name="gantwoord" /><br />
</form>
<input type="submit" value="Submit"/>
<span id="status"></span>
registration.php
if(!empty($_POST)){
echo "There is a value";
}else{
echo "enter a value";
}
?>

Answer 1

write the <input type="submit" value="Submit"/> before </form> close tag
<form id="registrationform" action="">
Voornaam: <input type="text" name="voornaam" /><br />
Tussenvoegsel: <input type="text" name="tussenvoegsel" /><br />
Achternaam: <input type="text" name="achternaam" /><br />
Geslacht: <?php //include_once("parser/geslacht.php"); ?><br />
Land: <?php //include_once("parser/land.php"); ?><br />
Geboortedatum: <?php //include_once("parser/gebdatum.php"); ?><br />
E-mail: <input type="text" name="e-mail" /><br />
Wachtwoord: <input type="password" name="password" /><br />
Hertype wachtwoord: <input type="password" name="password2" /><br /><br />
De onderstaande vraag is nodig om uw wachtwoord terug te halen mocht u die vergeten zijn.<br />
Geheime vraag: <select name="geheimevraag" id="geheimevraag">
<option value="huisdier">Wat is de naam van jouw eerste huisdier?</option>
<option value="moedername">Wat is de meisjesnaam van je moeder?</option>
<option value="eerstebaas">Hoe heet je eerste baas?</option>
<option value="eigenvraag">Eigen vraag opstellen</option>
</select><br/>
<span id="anders" style="display:none;">Eigen vraag: <input type="text" name="eigen_vraag" style="width:300px;"/></span><br />
Antwoord: <input type="password" name="gantwoord" /><br />
<input type="submit" value="Submit"/>
</form>
<span id="status"></span>
Your jquery script script:
<script>
$(document).ready(function() {
$("#registrationform").submit(function(ev){
ev.preventDefault();
$.ajax ({
type: "POST",
url: "registration.php",
data: $("#registrationform").serialize(),
success: function(data) {
$("#status").html(data);
}
});
alert("Ajax not running")
});
});
</script>

Answer 2

Please try this code
$(document).ready(function() {
$("#registrationform").submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "registration.php",
data: $("#registrationform").serialize(),
success: function(data) {
$("#status").html(data);
}
});
alert("Ajax not running")
});
});

Answer 3

You have to prevent the default behavior of the submit button
$("#registrationform").submit(function(ev) {
ev.preventDefault();
...
Then you need to implement a proper failure handler, your current one will allways alert because that ajax is async
$.ajax({
type: "POST",
url: "registration.php",
data: $("#registrationform").serialize(),
success: function(data) {
console.log(data); // check your console to see if request is success and what it contains
$("#status").html(data);
}
}).fail(function () {
alert("oh noes");
});

Answer 4

You need to prevent the default behavior of the form so that the page won't change location, and so that JS can do the AJAX request.
$("#registrationform").submit(function(e) {
e.preventDefault(); //this one
$.ajax({
type: "POST",
url: "registration.php",
data: $("#registrationform").serialize(),
success: function(data) {
$("#status").html(data);
}
});
});