This is my first question here on Stack Overflow. I have all my code below and am hoping someone can help me with this. My PHP form sends fine and is working, however my goal is to have the message after sending being placed into a Div on the HTML page. I can't figure out why this isn't working on my staging site.
Here is my JS/HTML
$(function () {
$('#contact-form').validator();
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "connect.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div style="border: 1px solid #c8c8c8; background-color: #282828; color: #c8c8c8; font-weight: 400" class="alert ' + messageAlert + ' alert-dismissable"><button style="color: #c8c8c8; top: -5px; right: 5px" type="button" class="message close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
<div class="container">
<form id="contact-form" method="post" action="connect.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="form-group">
<label for="form_name">Name *</label>
<input id="form_name" type="text" name="name" class="form-control" required="required"
data-error="Please Include Your Name">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="form-group">
<label for="form_lastname">Company *</label>
<input id="form_lastname" type="text" name="company" class="form-control" required="required"
data-error="Please Include Your Company">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" required="required"
data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" rows="4" required="required"
data-error="Please Include A Message"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 sm-2 md-2 lg-2 mx-auto">
<input type="submit" class="button" value="Send Message">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
I hope this is enough for someone to help me on this one. My apoligies for any issues with how it was presented, as I mentioned, first time poster. The good news is the PHP sending is fine. It's a matter of why it's not being injected into the Messages Div.
Related
I am trying to put the form back after 2 seconds of success message, for that I've sent the form html code along with API response, can someone help me to put the form code inside <div class="custom-popup-form-wrapper"> div after 2 seconds success message?
Also the response getting as html form is same form <form class="custom-popup-form">
jQuery:
jQuery( ".custom-popup-form" ).on( "submit", function( event ) {
event.preventDefault();
let sdata = jQuery( this ).serialize();
jQuery.ajax({
url: my_ajax_object.ajax_url,
type: "post",
cache: false,
async: false,
data: {
action: "submit_huspot_dynamic_form",
data: sdata
},
beforeSend: function () {
var img_loading =
'<div class="posts-page-links"><img src="' +
my_ajax_object.loading_gif_url +
'"></div>';
jQuery(".loading_gif").html(img_loading);
},
success: function (res) {
console.log(res);
jQuery(".loading_gif").hide();
jQuery(".custom-popup-form-wrapper").html('<p>We have received your request. We will get in touch with you shortly.</p>');
}
});
});
Response received:
{"inlineMessage":"<p>We have received your request. We will get in touch with you shortly.</p>"}
<style>
.custom-popup-form input#phone_number,.custom-popup-form input#first_name,.custom-popup-form input#last_name,.custom-popup-form input#email,.custom-popup-form textarea#message,.custom-popup-form input#company_name,.custom-popup-form input#designation{
background-color: #f5f8fa !important;
border: 1px solid #c9c9c9 !important;
color: #000000 !important;
border-radius: 10px !important;
}
.custom-popup-form .message_css{
padding: 0 !important;
font-size: 15px !important;
}
</style>
<div class="custom-popup-form-wrapper">
<form class="custom-popup-form">
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="email">Email*</label>
<input type="email" class="form-control" id="email" name="email" required>
<span id="email_msg" style="display:none;"></span>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="phone_number">Phone Number*</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" required>
<span id="phone_number_msg" style="display:none;"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="first_name">First Name*</label>
<input type="text" class="form-control" id="first_name" name="first_name" required>
<span id="first_name_msg" style="display:none;"></span>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="last_name">Last Name*</label>
<input type="text" class="form-control" id="last_name" name="last_name" required>
<span id="last_name_msg" style="display:none;"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="company_name">Company name*</label>
<input type="text" class="form-control" id="company_name" name="company_name" required>
<span id="company_name_msg" style="display:none;"></span>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6">
<div class="form-group">
<label for="designation">Designation*</label>
<input type="text" class="form-control" id="designation" name="designation" required>
<span id="designation_msg" style="display:none;"></span>
</div>
</div>
</div>
<div class="col-12 message_css">
<div class="form-group">
<label for="message">Message*</label>
<textarea rows="3" id="message" name="message" required></textarea>
<span id="message_msg" style="display:none;"></span>
</div>
</div>
<input type="hidden" class="form-control" id="section" name="section" value="" required>
<input type="hidden" class="form-control" id="pageUrl" name="pageUrl" value="" required>
<input type="hidden" class="form-control" id="pageTitle" name="pageTitle" value="" required>
<div class="col-12">
<div class="form-group">
<label for="acceptance">GDPR / Privacy Declaration*</label>
<div class="checkbox">
<label><input type="checkbox" name="remember" required> I accept the GDPR / Privacy Declaration of Test Inc</label>
</div>
<span id="acceptance_msg" style="display:none;"></span>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button><div class="loading_gif"></div>
</form>
</div>`
{"inlineMessage":"We have received your request. We will get in
touch with you shortly."}
This part of response is from API which is doing a post request and received this as success.
I am using bootstrap validation in my form when i give autofocus in my form field it worked correctly but i need to focus the text box field which doesnot have value on page load ....
I tried this but not working for me
$(document).ready(function(){
if($(':input:visible:first').val() != "")
{
$(this).next("input").focus();
}
});
Html Code:
#extends('layouts.app')
#section('content')
<div class="container">
#if(Session::has('success'))
<div class="alert alert-success" data-dismiss="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
{{ Session::get('success') }}
</div>
#endif
<div class="alert alert-warning alert-dismissible" id="confrence-info" role="alert" style="display:none">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="conferenceHTML"></div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading"><b>New Conference Request</b></div>
<div class="panel-body">
<div class="row">
<div class="col-md-10">
{{ Form::open(['route'=>'addnew.store', 'class' => 'form-horizontal', 'data-toggle'=>'validator']) }}
<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
<input type="hidden" name="user_id" value="{{Cookie::get('uid')}}"/>
<div class="form-group">
<label class="control-label col-md-6" for="email">Your Email<span> *</span></label>
<div class="col-md-6">
<input type="text"
class="form-control"
pattern="^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,100}(?:\.[a-z]{6})?)$"
data-error="Please enter your email address"
data-pattern-error="Please enter valid email address"
id="email"
name="email"
required
value="{{ Cookie::get('uemail') }}" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="conferencename">Conference Name<span> *</span></label>
<div class="col-md-6">
<input type="text" class="form-control conference-name typeahead tt-query" data-error="Please enter the conference name" maxlength="350" id="conferencename" name="conferencename" required />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="firstname">Your First Name<span> *</span></label>
<div class="col-md-6">
<input type="text" maxlength="25" value="{{ Cookie::get('ufn') }}" id="firstname" data-error="Please enter your first name" class="form-control" name="firstname" required/>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="lastname">Your Last Name<span> *</span></label>
<div class="col-md-6">
<input type="text" maxlength="25" value="{{ Cookie::get('uln') }}" id="lastname" data-error="Please enter your last name" name="lastname" class="form-control" required/>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="conferenceurl">Conference Website<span> *</span></label>
<div class="col-md-6">
<input type="url" pattern="((http|https)://)?[\w-]+(\.[\w-]+)+([\w.,#?^=%&:/~+#-]*[\w#?^=%&/~+#-])?" placeholder="http://www.nrg.com" data-error="Please enter in correct format eg: http://www.nrg.com" class="form-control" id="conferenceurl" name="conferenceurl" required />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="description">Conference Description<span> *</span></label>
<div class="col-md-6">
<textarea class="form-control" id="description" name="description" data-error="Please enter the description" rows="3" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="industry">Industry Conference primarily applies to?<span> *</span></label>
<div class="col-md-6">
<textarea class="form-control" maxlength="500" data-error="Please enter this field" id="industry" name="industry" cols="10" rows="2" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="business">Why is this conference relevant to the business?<span> *</span></label>
<div class="col-md-6">
<textarea class="form-control" id="business" name="business" data-error="Please enter this field" maxlength="2000" rows="3" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="notes">Conference Notes</label>
<div class="col-md-6">
<textarea class="form-control" id="notes" name="notes" rows="4"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-6" for="frequency">Conference Frequency<span> *</span></label>
<div class="col-md-6">
<select class="form-control" id="frequency" name="frequency" data-error="Please select anyone of this fields" required="required">
<option value="">Select</option>
<option value="LOY">Less than once a Year</option>
<option value="OAY">Once a Year</option>
<option value="MTY">Multiple times a Year</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group text-center pull-right">
<div class="col-md-12">
Cancel
{{ Form::submit('Submit',['class' => 'btn btn-success']) }}
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var ele = $('input').filter(':visible:first');
if(ele.val() != "")
{
ele.parents('.form-group').next().find('input').trigger('focus');
}
});
</script>
#endsection
In this I want to focus the cursor on next input field if the previous text box have value...Please help me how to achieve this?
this will focus any one field so you have to make one similar style in class for rest blank fields.
check below code and live snippet
$('.main input[type="text"]').each(function(i){
var chec = $('.main input[type="text"]').eq(i).val();
if(chec==""){
$(this).addClass("custom-outline");
$(this).focus();
}
})
$(document).ready(function(){
$('.main input[type="text"]').each(function(i){
var chec = $('.main input[type="text"]').eq(i).val();
if(chec==""){
$(this).addClass("custom-outline");
$(this).focus();
}
})
});
.custom-outline {
outline: #438aff;
outline-width: thin;
outline-style: solid
}
.custom-outline:focus {
outline: #438aff;
outline-width: thin;
outline-style: solid;
padding: 3px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
<input type="text" value="Something here">
<input type="text">
<input type="text">
<input type="text" value="">
<input type="text" value="ok">
<input type="text" value="">
</div>
$(document).ready(function() {
var ele = $('input').filter(':visible:first');
if (ele.val() != "") {
ele.parents('.form-group').next().find('.col-md-
6').children().trigger('focus');
}
});
Please try this one.
Well, this project came to my mind cause of this problem:
When I hit the register button, the PHP script is gonna process it and it displays error but the page is gonna be at the login form.
The interface:
The idea now:
If the url has some parameter in it, process it into the jQuery, and display the requested page from the url.
Example: someurl.com/#login - then display the Login Page
someurl.com/#register - then display the Register Page
Tried solution (jQuery):
$(function() {
// get the `hash` from the url
var url = window.location.hash;
// display the page
$(url).show();
}
My codes right now:
The script:
$(function() {
var url = window.location.hash;
$(url).show();
$('#login-form-link').click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$('#register-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
$(document).prop('title', 'Login | Prospekt');
});
$('#register-form-link').click(function(e) {
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$('#login-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
$(document).prop('title', 'Register | Prospekt');
});
});
The forms:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
Login
</div>
<div class="col-xs-6">
Register
</div>
</div>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="login-form" action="http://phpoll.com/login/process" method="post" role="form" style="display: block;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
Forgot Password?
</div>
</div>
</div>
</div>
</form>
<form id="register-form" action="http://phpoll.com/register/process" method="post" role="form" style="display: none;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
</div>
</div>
</div>
</form>
</div>
</div>
<!--
<hr>
<div class="alert alert-warning alert-dismissible">
×
Username is required! <br>
Password is required!
</div>
-->
</div>
</div>
</div>
</div>
</div>
After you get your hash from the url, call the click() event corresponding to that hash after declaring the click handlers.
$(function() {
$('#login-form-link').click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$('#register-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
$(document).prop('title', 'Login | Prospekt');
});
$('#register-form-link').click(function(e) {
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$('#login-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
$(document).prop('title', 'Register | Prospekt');
});
var url = window.location.hash;
$(url + '-form-link').click();
});
I have 2 forms log in and sign up written on same index.php and they toggle according to the users need.The log in form appears when you open index.php while the sign up form is hidden and appears only when you click on signup here link.
Now my issue is that while signing up if there is any error(validation,database error) then the page refreshes when submit button is clicked obviously and returns to my login form which appears when you open/refresh index.php.Again I have to click on signup here link to solve the errors.
I just want to stay on signup form when errors appear that means I dont want the page to be refreshed when clicked on submit but want the errors to appear and solve them then and there.
$.ajax({
type: "POST",
url: "phpindex.php",
data: $("#signUpForm").serialize(),
success:function(data)
{
if ("#error".val(data))
{
e.preventDefault();
}
}
});
});
My validation and database code is written in phpindex.php
***************signup form************************
<form method="post" id="signUpForm">
<div class="container" id="signupContainer">
<h1>Sign Up</h1>
<div id="error"><?php if ($error!="") {
echo '<div class="alert alert-danger" role="alert">'.$error.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Your name">
<span class="fa fa-user"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address1</label>
<div class="col-sm-10">
<input type="text" id="address1" class="form-control" name="address1" placeholder="Home address">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address2</label>
<div class="col-sm-10">
<input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode....">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="Email Address">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="Password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-5 col-sm-10">
<input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit">
</div>
</div>
<p><a class="toggleForms">Back to Log in</a></p>
</div>
</form>
***************login form*****************
<form method="post" id="logInForm">
<div class="container" id="logInContainer">
<h1>Log In</h1>
<div id="success"><?php if ($success!="") {
echo '<div class="alert alert-success" role="alert">'.$success.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Emai</label>
<div class="col-sm-8">
<input type="email" class="form-control" placeholder="Email" name="email">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" placeholder="Password" name="password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-4 col-sm-10">
<input type="hidden" name="signUp" value="0">
<input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit">
</div>
</div>
<p><a class="toggleForms">Sign Up Here</a></p>
</div>
</form>
Firstly, there are numerous errors in the code you have submitted. I believe they are mainly due to clumsy copy and pasting, but there is one that I think you just have in your code, and it is the missing jQuery reference for "#error".
"#error".val(data)
I think you wanted to write something like this
$("#error").val(data)
This error would stop "preventDefault" from happening.
Secondly, I wonder where is your submit handler for those forms and how it looks like. If you have none, then there is you answer. You just do not catch the submit event.
Lastly, I would consider calling, instead of preventDefault:
return false
Please see this thread as for the reasons why
event.preventDefault() vs. return false
Im trying to create my register page that posting the data to PHP File using Ajax and then the PHP file Check the Error of the form and return some error
My Form
<head>
<script type="text/javascript" src="assets/extra/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var fname=$('#firstname').val();
var lname=$('#lastname').val();
var displayname=$('#displayname').val();
var password=$('#password').val();
var cpassword=$('#cpassword').val();
var email=$('#email').val();
var terms=$('#terms').val();
$.ajax({
type: "POST",
url: "register.php",
data: "firstname="+fname+"&lastname="+lname+"&displayname="+displayname+"&password="+password+"&cpassword="+cpassword+"&email="+email+"&term="+terms ,
success: function(html){
$("#load").css('display','block');
$("#signupform").css('display','none');
$("#box").css('display','none');
$("#loading").fadeOut('500', function(){
$("#loading").css('display','none');
$("#box").html(html).show('slow');
});
}
});
return false;
});
});
</script>
</head>
<style type="text/css">
#loading
{
display:none;
width:500px;
height:500px;
background:url(img/loading.gif) no-repeat;
}
</style>
</head>
<div id="loading" style="">
</div>
<div id="box">
</div>
<div class="form-group">
<label for="firstname" class="col-md-3 control-label">Fistname</label>
<div class="col-md-9">
<input type="text" name="firstname" id="firstname" class="form-control inp" placeholder="Fistname" minlength="3" maxlength="50" value="" required>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Lastname</label>
<div class="col-md-9">
<input type="text" name="lastname" id="lastname" class="form-control inp" placeholder="Lastname" minlength="3" maxlength="50" value="" required>
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Displayname</label>
<div class="col-md-9">
<input type="text" name="displayname" id="displayname" class="form-control inp" placeholder="Displayname" minlength="3" maxlength="50" value="" required>
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-3 control-label">Email</label>
<div class="col-md-9">
<input type="email" name="email" id="email" class="form-control inp" value="" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" name="password" id="password" class="form-control inp" value="" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Confirm Password</label>
<div class="col-md-9">
<input type="password" name="cpassword" id="cpassword" class="form-control inp" value="" placeholder="Confirm Password" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<label><input type="checkbox" name="terms" id="terms" value="yes" checked> Accept Term</label><div id="err_terms" class="err"></div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<button id="btn-signup" type="submit" class="btn btn-info signup-bt" id="submit" name="submit">   <i class="fa fa-user-plus"></i> Register</button>
</div>
</div>
</form>
And Here it's My PHP
if(isset($_POST['fistname']) && isset($_POST['lastname']) && isset($_POST['email']) && isset($_POST['displayname'])) {
$fname = mysql_real_escape_string($_POST['firstname']);
$lname = mysql_real_escape_string($_POST['lastname']);
$email = mysql_real_escape_string($_POST['email']);
$password = mysql_real_escape_string($_POST['password']);
$cpassword = mysql_real_escape_string($_POST['cpassword']);
$displayname = mysql_real_escape_string($_POST['displayname']);
$checkemail = mysql_query("SELECT `email` FROM `users` WHERE email='$email'");
$checkname = mysql_query("SELECT `displayname` FROM `users` WHERE displayname='$displayname'");
if(mysql_num_rows($checkemail) != 0){
echo '<span class="message error">Something</span>';
}
if(mysql_num_rows($checkname) != 0){
echo '<span class="message error">Something</span>';
}
if($terms!="yes"){
echo '<span class="message error">Something</span>';
}
if($password!=$cpassword){
echo '<span class="message error">Something</span>';
}
if($displayname==""){
echo '<span class="message error">Something</span>';
}
if($password==""){
echo '<span class="message error">Something</span>';
}
if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)){
echo '<span class="message error">Something</span>';
}
if($terms != "yes"){
echo '<span class="message error">Something</span>';
}
else{
// QUERY
}
}
When I click Submit, And I try to check HTTP Header, It's doesnt send data to register.php
So.. How can I fix it?
Thank you
The browser is, for lack of better description, "confused" change your button type from submit to button so it wont' try to submit:
<button id="btn-signup" type="button" class="btn btn-info signup-bt" id="submit" name="submit">   <i class="fa fa-user-plus"></i> Register</button>
You should be passing an object and not a string for post ajax:
$.ajax({
type: "POST",
url: "register.php",
data: {
"firstname": fname,
"lastname": lname,
"displayname": displayname,
"password": password,
"cpassword": cpassword,
"email": email,
"term": terms
},
success: function(html){ /* you success function here*/
});
You have a typo here:
if(isset($_POST['fistname']) && ...
Should be 'firstname'.