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
- 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?
- 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.
- 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.