Html form is not working with Php, Ajax request

Question

Hello following is my html form which I want to validate with Ajax. So that Browser do not load the page. If user enter First Name, It's should show the first name above the html form. But It doesn't showing...

Html form:

<form id="validation"/>
<table width="500" border="0" cellspacing="10" cellpadding="0">
  <tr>
    <td>First Name</td>
    <td><input type="text" name="fname" value="<?php if(isset($_POST['fname'])) echo $_POST['fname']; ?>" class="tr" placeholder="First Name"/></td>
  </tr>

  <tr>
    <td></td>
    <td><input type="reset" name="reset" value="Clear" class="submit"/>&nbsp;&nbsp;<input type="submit" name="Submit" id="submit" value="Registration" class="submit"/></td>
  </tr>
</table>    
</form>
<script>
    $('#validation').submit(function(event) {
        event.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'regProcess.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function (data) {                    
            }
        });
    });
</script>

Php code:

<?php
if(isset($_POST['Submit']) && $_POST['Submit'] == "Registration"){
    $fname =  $_POST['fname'];
    echo $fname;        
    }
?>

Answer 1

Near the bottom of your code, you have this:

            success: function (data) {                    
        }

That's your problem. You're not doing anything with the returned "data" - you need to use javascript or jquery to insert it into the DOM somewhere. EDIT: UPDATE

To use jquery to insert the data into the dom, do something like this:

            success: function (data) {                    
                $("#id of the element where you want the data").innerHTML+=data
            }

That will append the "data" retrieved from the AJAX into the element with the specific ID. You can use any CSS selector inside the $("HERE") I believe.