Fixing PHP not showing on the website it self

Question

Currently i have a simple way of doing this by using client side validation.

 <form id="mail" action="form.php" method="post">
    <label for="name">Username</label><input type="text" id="name" name="name" />
      <label for="pwd">Password</label><input type="password" id="pwd" name="pwd" />
      <label for="email">Email</label><input type="email" id="email" name="email" />
    <input type="submit" value="submit">
</form>

and on the server side

<?php 
echo "Thanks for joining, " . $_POST["name"] . "!<br />";
echo "A confirmation email might have been sent to: " . $_POST["email"] . " if this were a real site.";?>

What i have tried so far in javascript

 $('#mail').on('submit', function(e) {           // When form is submitted
  e.preventDefault();                               // Prevent it being sent
  var details = $('#mail').serialize();         // Serialize form data
  $.post('form.php', details, function(data) {  // Use $.post() to send it
    $('#mail').html(data);                    // Where to display result
  });
});

When clicked submit the whole page turns into php's echo message. Is there a way to just show it on the website?

Answer 1

This should handle that:

$('#mail').on('submit', function(e) {
e.preventDefault();
    $.get(
        "submit_page.php",
        {
            mail: document.getElementById('mail').value,
            other: document.getElementById('other').value //Some other value
        },
        function(data) {
            $('#mail').html(data);
        }); });

Answer 2

It looks like you are already using the jQuery library, you can use its ajax function to post data asynchronously and receive a JSON answer from your server without changing your current page:

 $('#mail').on('submit', function(e) { e.preventDefault(); $.ajax( { data:{"fieldName":fieldValue}, type:"POST", dataType: "json", url: "destination.php", success: successFunction }); } function successFunction(result) { alert(result.message); } 

Your php may look something like this:

 <?php //Some php stuff $json['message'] = "A confirmation email might have been sent..."; header('Content-type: application/json; charset=utf-8'); echo json_encode($json, JSON_FORCE_OBJECT); ?>