Stay on same page, don't reload

Question

Here are two forms fregister and register. In first form I am taking input of name,username and checking the availability of username by clicking on Check user id button.If username is not available I am displaying message with the help of php and want to show this message to user with the fields he filled before.

<?php RegFormCrAndValid($name,$username,$email) {?>
    <form name="fregister"  method="post">
        <table>
        <tr><td>Name</td>
        <td><input type="text" id="name" name="name" value ="<?php echo $name;?>" onChange="ValidAllAlpha()" required></td>
        <td><span id="ErrorName"></span></td></tr>
        <tr><td>Username</td>
        <td><input type="text" id="user" name="UsrText" value="<?php echo $user;?>" required onblur="SetNextElement()"></td>
        <td><?php  echo $_SESSION['ErrorUserMsg']?></td> <td><input type="submit" name="CheckUsr" value="Check User ID"></td> </tr> </form>

In second form, the user will register here first checking the availability and then submission will take place by clicking on register.In this form too if user has not registered successfully then I want to show message with fill fields.

<form name="register" method="post">
    <td style="display:none"><input type="text" id="fname" name="fname" required></td>
    <td style="display:none"><input type="text" id="fuser" name="fuser" required></td>
    <tr><td>Email</td>
    <td><input type="email" id="email" name="email" value="<?php echo $email;?>" onChange="ValidateEmail()" required></td>
    <td><span id="ErrorEmail"></span></td></tr>
    <tr><td><input type="submit" name="submitForm" value="Submit" onClick="ValidationCheckOnSubmit('register');return false;"></td></tr>
    </form>
</body>
</html>

Two rows are not displayed here because they are taking the values of name and username from the form fregister with the help of javascript and then displaying them.

JavaScript Codes // validations are there, here I am mentioning the code for passing values to fname and fuser

 function SetNextElement()
                {           
                         document.getElementById('fname').value = document.getElementById('name').value;

                document.getElementById('fuser').value = document.getElementById('user').value;
                }
<?php }?> //RegFormCrAndValid($name,$username,$email) this function getting closed over here

php coding

if(isset($_POST['CheckUsr']))
    {
        if(IsUsernameAvail($_POST['UsrText'])) //IsUsernameAvai checking for the username availabilty return true if available as false
        {   
            $_SESSION['ErrorUserMsg']="<font color=red>This Username Is Available</font>";
        }
        else
        { 
            $_SESSION['ErrorUserMsg']="<font color=red><--Username is not available</font>";
        }

    }

    if(isset($_POST['submitForm']))
    {
        if(IsUsernameAvail($_POST['fuser']))
        {   
            echo 'You have been successfully registered'; 
        }
        else
        { 
            $_SESSION['ErrorUserMsg']="<font color=red><--Username is not available</font>";
            RegFormCrAndValid($_POST['fname'],$_POST['fuser'],$_POST['email']);
        //RegFormCrAndValid($name,$username,$email) is the function in which whole html and javascript code is there to create and validate the form.
        }

    }
    else{   if(isset($_POST['CheckUsr']))
            {

                RegFormCrAndValid($_GET['name'],$_POST['UsrText'],'');

            }
            else  RegFormCrAndValid('','','');

        }

My problems

1. While on clicking CheckUserId button I want the page to stay over there only, why after clicking it doesnt stay on same page with all field fill as they were filled by user. It should just perform the check, why does page reloads?
2. If I am able to stay over the same page then I dont need to call RegFormCrAndValid($name,$username,$email) this function again to rebuild my form, is it possible to stay there with filled fills and not calling function.
3. I want to eradicate the use of fake columns to show username and name again because in real registration form there are going to be lot of fields and I cant have fake calling or assignment for all of them.

I dont want to use ajax or jquery, want to achieve everything through javascript,php and html.

Answer 1

Answer for (a)

You are using form submit action

Default behaviour of form submit is it will reload the page. You have to suppress the default behaviour of form submit by using return false .But it is not recommended.. you can use AJAX

Sample Code

$('#yourFormId').submit(function () {
 //business logics here
 return false;//to avoid page reload
});

You don't need any more the onclick event on the submit button:

<input class="submit" type="submit" value="Send" />

Answer 2

When you are clicking on <input type="submit" name="CheckUsr" value="Check User ID"> the form is being submitted, because thats what clicking on submit buttons do, unless you have javascript to block it and do something else.

When a page is being submitted back to the server, the page will reload.

Now, over to your basic goal : you must understand that the actual checking which you are doing to determine whether username is available or not, is on the server side, that is, the logic resides on the server. Whereas, the form which the user is typing the username on, is on the client side, that is residing on the users computer, being displayed through the browser. Now once the user types the name, you somehow need to pass that data over to the server side for it to do the checking and perform actions accordingly. Therefore you have two options:

a) Submit the form as you are now, and use server side php code to collect all the data filled by the user and populate them back again

b) donot submit the form, just make an ajax request to a php script, which will take as input the username and return to you either a true or false response which you can catch using javascript, and accordingly allow the form to be submitted or not submitted.

In that case either on the submit buttons onclick event or the forms onsubmit event trigger set a javascript function to make the ajax request and "return false" if the ajax request returns false or "return true" if the ajax request returns true. Also in the "false case" you can use getElementById to set the error message for the user.