jQuery $.ajax doesn't show anything

Question

I'm going to work with a HTML form using AJAX and a PHP file to manage data but neither success message or error message work. I tried firebug but it's like it waits something when occur the $.ajax statement then it "crashes".

<form id="alcoholic-form" name="alcoholic-form" method="post">
    <fieldset>
        <input type="submit" id="submit" value="Invia">
    </fieldset>
</form><!-- form -->

<div id="risultato"></div>
<div id="errore"></div>

The controller.js file:

$(document).ready(function(){
    $("#submit").click(function(){

    //var formData = $("#alcoholic-form").serialize();
    var nome = "nico";
    var cognome = "basi";


    $.ajax({
        type: "POST",
        url: "prova.php", //data manager
        data: "nome=" + nome + "&cognome=" + cognome, //data to server
        dataType: "html", //return value format
        success:function(msg){
            $("#risultato").html(msg);
            alert(msg);
        },//success
        error: function(xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
            }
    });//ajax
});//submit click
});//document ready

And then the prova.php file:

<?php /* questionario.php */ ?>

<?php

$nome = $_POST['nome'];
$cognome = $_POST['cognome'];

echo "nome = " . $nome . " cognome = " . $cognome;

?>

Thank you in advance

score 5 · Accepted Answer · answered May 27 '15 at 13:54

You have a form with a submit button, when you click on the submit button the default action is to submit the form.

Since you are using ajax request you need to prevent the default form submit. You can call event.preventDefault() to do that.

$(document).ready(function () {
    $("#submit").click(function (e) {
        //prevent the default form submit
        e.preventDefault();

        //var formData = $("#alcoholic-form").serialize();
        var nome = "nico";
        var cognome = "basi";


        $.ajax({
            type: "POST",
            url: "prova.php", //data manager
            data: "nome=" + nome + "&cognome=" + cognome, //data to server
            dataType: "html", //return value format
            success: function (msg) {
                $("#risultato").html(msg);
                alert(msg);
            }, //success
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        }); //ajax
    }); //submit click
}); //document ready

But since you have a form and a submit button, it will be better to handle the submit event of the form that the click event of the button

$(document).ready(function () {
    $("#alcoholic-form").submit(function (e) {
        //prevent the default form submit
        e.preventDefault();

        //var formData = $("#alcoholic-form").serialize();
        var nome = "nico";
        var cognome = "basi";


        $.ajax({
            type: "POST",
            url: "prova.php", //data manager
            data: "nome=" + nome + "&cognome=" + cognome, //data to server
            dataType: "html", //return value format
            success: function (msg) {
                $("#risultato").html(msg);
                alert(msg);
            }, //success
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        }); //ajax
    }); //submit click
}); //document ready

Thank you Arun, but I can't get improvements. Can't figure it out — Trez, May 27 '15 at 14:04
@Trez check your browser console to see if there is any error... also when the submit button is clicked whether the page is getting refreshed — Arun P Johny, May 27 '15 at 14:08
So it works! Thank to your suggestion about checking i fthe page got refreshed I found out that prova.php URL was missed. — Trez, May 27 '15 at 14:15

score 0 · Answer 2 · answered May 27 '15 at 13:56

i think it's with ajax data

$.ajax({
    type: "POST",
    url: "prova.php", //data manager
    data: { nome: nome, cognome: cognome}, //data to server
    dataType: "html", //return value format
    success:function(msg){
        $("#risultato").html(msg);
        alert(msg);
    },//success
    error: function(xhr, status, error) {
        var err = eval("(" + xhr.responseText + ")");
        alert(err.Message);
        }
});//ajax

jQuery $.ajax doesn't show anything

2 Answers2

Linked