I'm new in web development. I've a html page where a popup registration form is appear after click on "Register button". In this registration form I validate all error with Php (regProcess.php) page . In html form i set action attribute = "regProcess.php" so that. it's validating the form to that php page and showing error message on this same page. BUT I want to showing all php error message on this popup html form. I don't know how can i do this. could you please give me a solution or tell me how can i do this job ?
Html form:
<form id="form1" method="post" action="regProcess.php">
<table width="500" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>Title</td>
<td><select name="title">
<option value="">--Select--</option>
<option value="mr">Mr.</option>
<option value="ms">Ms.</option>
<option value="mrs.">Mrs</option>
</select></td>
</tr>
<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>Last Name</td>
<td><input type="text" name="lname" value="<?php if(isset($_POST['lname'])) echo $_POST['lname']; ?>" class="tr" placeholder="Last Name"/></td>
</tr>
<tr>
<td>Company Name</td>
<td><input type="text" name="company" value="<?php if(isset($_POST['company'])) echo $_POST['company']; ?>" class="tr" placeholder="Company Name"/></td>
</tr>
<tr>
<td>Position In Company</td>
<td><input type="text" name="position" value="<?php if(isset($_POST['position'])) echo $_POST['position']; ?>" class="tr" placeholder="Position In Company"/></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text" name="email" value="<?php if(isset($_POST['email'])) echo $_POST['email']; ?>" class="tr" placeholder="Email Address"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" class="tr" placeholder="Password"/></td>
</tr>
<tr>
<td>Terms & Conditions</td>
<td><input type="checkbox" name="terms" id="terms"/> I agree to your <a href="">terms and conditions</a>.</td>
</tr>
<tr>
<td></td>
<td><input type="reset" name="reset" value="Clear" class="submit"/>
<input type="submit" name="submit" id="submit" value="Registration" class="submit"/>
</td>
</tr>
</table>
</form>
Php Page:
<?php
ob_start();
require_once("include/config.php");
if(isset($_POST['submit']) && $_POST['submit'] == "Registration")
{
$title = mysql_real_escape_string($_POST['title']);
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$company = $_POST['company'];
$position = $_POST['position'];
$email = $_POST['email'];
$password = $_POST['password'];
$random_salt = hash('sha512', uniqid(mt_rand(1, mt_getrandmax()), true));
$pass = hash('sha512', $password.$random_salt);
$exitemail = mysql_query("SELECT email FROM members WHERE email = '$email'");
$numemail = mysql_num_rows($exitemail);
$err = array();
if(isset($title) && isset($fname) && isset($lname) && isset($company) && isset($position) && isset($email) && isset($password))
{
if(empty($title) && empty($fname) && empty($lname) && empty($company) && empty($position) && empty($email) && empty($password))
$err[] = "All field require";
else
{
if(empty($title))
$err[] = "Your title require";
if(empty($fname))
$err[] = "Your first name require";
}
// error checking...
if(!empty($err))
{
echo "<div class='error'>";
foreach($err as $er)
{
echo "<font color=red>$er.</font><br/>";
}
echo "</div>";
echo "<br/>";
}
else
{
echo "Everything is ok.....";
}
}
}
?>
You can use ajax to achieve this:
$(document).on('submit', '#form1', function(e){ // event delegation way to submit
e.preventDefault(); // stops the form to submit.
var $this = $(this);
$.ajax({
url: $this.attr('action');
type: $this.attr('method');
data : $this.serialize(); // sends the data to your php
success: function(data){
$('body').append(data); // this will append your error div
},
error: function(xhr){
console.log(xhr.responseText);
}
});
}); // end submit.
To show errors on your form you have to write some css for this like:
.error{
width:400px;
height: 300px;
padding:10px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -200px; /* <--to center the div use half of width/height*/
z-index: 99999; // put this higher to show above all elems on page.
}
There's a lot to it, so it's hard to give you all the code and send you on your way. It's better to teach you where to fish, so if you'd open up a Google tab. In order of priority:
2.Split your php into two, as though you're writing for two completely different browsers. The one you have now takes form information and responds with HTML. The one you haven't made yet takes form information and responds with JSON. That's another word that scares people, but JSON is SO much simpler than HTML. Since your users don't actually have to look at it, you don't have to worry about styling it. You don't event have to worry about syntax, because php has json_encode() which does that part for you. All it takes is regular arrays and objects and turns them into JSON. How does your php know which to send back, HTML or JSON? That depends on which "browser" is asking for it. I'll explain.
Put JavaScript in your form to talk back and forth between this php "handler", as it's called. It sends the form (also as JSON), and listens for JSON in return. It overrides your 'submit' button and says "You stay here web page. Let me take care of this." It's like having a miniature browser within your giant, slow browser. When it's done talking to the handler, it decides what to do with that in what's known as a callback function, which usually does the work of highlighting stuff in red, shows error/success messages, telling the big fat browser to get up and move to another page, etc. This is what they call AJAX, which means asynchronous JavaScript. That's just a fancy way of saying the little browser is able to work independently of the big one.
Hopefully that gets you on the right track.