Get response text back from php after ajax request

Question

I want to add data to my database, and get back the response from php which accesses the database.

javascript code:

var request = $.ajax({
type: "POST",
url: "nieuwDuel.php",
data: dataString,
success: function(response)
{
    var responseText = "onbekend";
    responseText = jQuery(response);
    document.getElementById("duelToegevoegd").innerHTML=responseText;
    $( "#openstaandeDuels" ).load( "getOpenstaandeDuels.php" );
}
});

So when the a name isn't valid or is already in existence, I can add this message to a span element in my html.

This is my php code:

<?php
if($_POST)
{
    // Create connection
    $con=mysqli_connect("localhost","root","root","websitedb");

    // Check connection
    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $date = getdate();
    $date_time = $date['year'] . "-" . $date['mon'] . "-" . $date['mday'] . " " . $date['hours'] . ":" . $date['minutes'] . ":" . $date['seconds'];

    $uitdagerArray = mysqli_query($con,"SELECT id FROM deelnemers WHERE naam='" . $_POST['uitdager'] . "'");
    $uitgedaagdeArray = mysqli_query($con,"SELECT id FROM deelnemers WHERE naam='" . $_POST['uitgedaagde'] . "'");

    $uitdager = mysqli_fetch_array($uitdagerArray);
    $uitgedaagde = mysqli_fetch_array($uitgedaagdeArray);

    $uitdagerId = $uitdager['id'];
    $uitgedaagdeId = $uitgedaagde['id'];

    $sql="INSERT INTO duels (uitdager, uitgedaagde, aanmaakdatum, gespeeld) VALUES ('" . $uitdagerId . "','" . $uitgedaagdeId . "','" . $date_time . "','" .  "0" . "')";

    if(!mysqli_query($con,$sql)) {
        echo mysql_errno() . ": " . mysql_error() . "\n";
    }
    else {
        echo "Duel Toegevoegd";
    }
    mysqli_close($con);
}
?>

So is it possible that the text from echo in my php code will be passed to the 'response' from the succes function?

edit:

this is my html code

<div id="nieuwDuel">
            <h2>Nieuw Duel</h2>
            <form name="form" method="post">
                Uitdager: <input type="text" id="naamUitdager" placeholder="naam uitdager">
                Uitgedaagde: <input type="text" id="naamUitgedaagde" placeholder="naam uitgedaagde">
                <input type="submit" class="nieuwDuelToevoegen">
            </form>
            <span id="duelToegevoegd" style="display:none"></span>
            <a href="index.php#home">Home</a>
        </div>

Answer 1

Yes it should work. Try changing your JS to

var request = $.ajax({
    type: "POST",
    url: "nieuwDuel.php",
    data: dataString,
    success: function(response)
    {
        console.log(response);//This will output the response you are getting to the console so you can check it
        $("#duelToegevoegd").html(response);
        $( "#openstaandeDuels" ).load( "getOpenstaandeDuels.php" );
    }
});

Also I wouldn't echo out any errors you get back to the client

echo "Failed to connect to MySQL: " . mysqli_connect_error();

Although it depends who the user is, but you don't want anyone unauthorised to see these errors

Answer 2

I assume that your PHP code is right. then what you need to change is your jQuery code.

just change the following code :

responseText = jQuery(response);
document.getElementById("duelToegevoegd").innerHTML=responseText;

into following :

responseText = response;
$('#duelToegevoegd').html(responseText);

I don't know what you are going to do with

$( "#openstaandeDuels" ).load( "getOpenstaandeDuels.php" );

So, I leave it out for now

hope it helps