i am having trouble sending data in PHP using a form i made up. For some reason nothing happens when i click the submit button.
I think the problem may be in my Jquery.main in the submit click area, or in the submit of the HTML form, or the use of $_SERVER[‘PHP_SELF’].
I am testing using localhost, apache and using my own computer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Create New Account</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.inputfocus-0.9.min.js"></script>
<script type="text/javascript" src="js/jquery.main.js"></script>
</head>
<body>
<?php
/**
* @author Emile Jobity
* @copyright 2012
* @abstract displays a form, inserts data from the form to the database
* @example http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/
*/
if (isset($_POST['submit'])):
$username = "root";
$password = "xxxx";
//connection to the database
try {
$pdo = new PDO('mysql:host=localhost;dbname=cwalcott_ei2', $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
$username = $_POST['username'];
$password = $_POST['password'];
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$company = $_POST['company'];
$phone = $_POST['phone'];
$country = $_POST['country'];
try{
$stmt = $pdo->prepare('INSERT INTO user (username, password,firstname,lastname,email,company,phone,country,register_date)
VALUES(:username,:password,:firstname,:lastname,:email,:company,:phone,:country,:register_date)');
$stmt->execute(array(
':username' => $username,
':password' => $password,
':firstname' => $firstname,
':lastname' => $lastname,
':email' => $email,
':company' => $company,
':phone' => $phone,
':country' => $country,
':register_date' => NOW()
));
# Affected Rows?
echo $stmt->rowCount(); // 1
} catch(PDOException $e) {
echo 'Error: ' . $e->getMessage();
}
?>
<p><a href="<?=$_SERVER['PHP_SELF']?>">Create an Account</a></p>
<?php
else: // Allow the user to enter a new data
?>
<div id="container">
<form action="<?=$_SERVER['PHP_SELF']?>" method="post">
<!-- #first_step -->
<div id="first_step">
<h1>SIGN UP FOR A FREE <span>GOLDENICON</span> ACCOUNT</h1>
<div class="form">
<input type="text" name="username" id="username" value="username" />
<label for="username">At least 4 characters. Uppercase letters, lowercase letters and numbers only.</label>
<input type="password" name="password" id="password" value="password" />
<label for="password">At least 4 characters. Use a mix of upper and lowercase for a strong password.</label>
<input type="password" name="cpassword" id="cpassword" value="password" />
<label for="cpassword">If your passwords aren’t equal, you won’t be able to continue with signup.</label>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!-- #second_step -->
<div id="second_step">
<h1>SIGN UP FOR A FREE <span>GOLDENICON</span> ACCOUNT</h1>
<div class="form">
<input type="text" name="firstname" id="firstname" value="first name" />
<label for="firstname">Your First Name. </label>
<input type="text" name="lastname" id="lastname" value="last name" />
<label for="lastname">Your Last Name. </label>
<input type="text" name="email" id="email" value="email address" />
<label for="email">Your email address. We send important administration notices to this address. </label>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input class="submit" type="submit" name="submit_second" id="submit_second" value="" />
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!-- #third_step -->
<div id="third_step">
<h1>SIGN UP FOR A FREE <span>GOLDENICON</span> ACCOUNT</h1>
<div class="form">
<input type="text" name="company" id="company" value="company" />
<label for="company">Your Comapny Name. </label>
<input type="text" name="phone" id="phone" value="phone" />
<label for="phone">Your Phone No.#. </label>
<select id="country" name="country">
<option>Trinidad and Tobago</option>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Caribbean</option>
</select>
<label for="country">Your country. </label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input class="submit" type="submit" name="submit_third" id="submit_third" value="" />
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<!-- #fourth_step -->
<div id="fourth_step">
<h1>SIGN UP FOR A FREE <span>GOLDENICON</span> ACCOUNT</h1>
<div class="form">
<h2>Summary</h2>
<table>
<tr><td>Username</td><td></td></tr>
<tr><td>Password</td><td></td></tr>
<tr><td>Email</td><td></td></tr>
<tr><td>Name</td><td></td></tr>
<tr><td>Company</td><td></td></tr>
<tr><td>Phone</td><td></td></tr>
<tr><td>Country</td><td></td></tr>
</table>
</div> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
<input class="send submit" type="submit" name="submit" id="submit" value="" />
</div>
</form>
</div>
<div id="progress_bar">
<div id="progress"></div>
<div id="progress_text">0% Complete</div>
</div>
<?php endif; ?>
</body>
</html>
Jquery.main
$(function(){
//original field values
var field_values = {
//id : value
'username' : 'username',
'password' : 'password',
'cpassword' : 'password',
'firstname' : 'first name',
'lastname' : 'last name',
'company' : 'company',
'phone' : 'phone',
'email' : 'email address'
};
//inputfocus
$('input#username').inputfocus({ value: field_values['username'] });
$('input#password').inputfocus({ value: field_values['password'] });
$('input#cpassword').inputfocus({ value: field_values['cpassword'] });
$('input#lastname').inputfocus({ value: field_values['lastname'] });
$('input#firstname').inputfocus({ value: field_values['firstname'] });
$('input#company').inputfocus({ value: field_values['company'] });
$('input#phone').inputfocus({ value: field_values['phone'] });
$('input#email').inputfocus({ value: field_values['email'] });
//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');
//first_step
$('form').submit(function(){ return false; });
$('#submit_first').click(function(){
//remove classes
$('#first_step input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var fields = $('#first_step input[type=text], #first_step input[type=password]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<4 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
if( $('#password').val() != $('#cpassword').val() ) {
$('#first_step input[type=password]').each(function(){
$(this).removeClass('valid').addClass('error');
$(this).effect("shake", { times:3 }, 50);
});
return false;
} else {
//update progress bar
$('#progress_text').html('33% Complete');
$('#progress').css('width','113px');
//slide steps
$('#first_step').slideUp();
$('#second_step').slideDown();
}
} else return false;
});
$('#submit_second').click(function(){
//remove classes
$('#second_step input').removeClass('error').removeClass('valid');
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields = $('#second_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
//update progress bar
$('#progress_text').html('66% Complete');
$('#progress').css('width','226px');
//slide steps
$('#second_step').slideUp();
$('#third_step').slideDown();
} else return false;
});
$('#submit_third').click(function(){
//update progress bar
$('#progress_text').html('100% Complete');
$('#progress').css('width','339px');
//prepare the fourth step
var fields = new Array(
$('#username').val(),
$('#password').val(),
$('#email').val(),
$('#firstname').val() + ' ' + $('#lastname').val(),
$('#company').val(),
$('#phone').val(),
$('#country').val()
);
var tr = $('#fourth_step tr');
tr.each(function(){
//alert( fields[$(this).index()] )
$(this).children('td:nth-child(2)').html(fields[$(this).index()]);
});
//slide steps
$('#third_step').slideUp();
$('#fourth_step').slideDown();
});
/*
$('#submit').click(function(){
//send information to server
alert('Submitting Data press Ok');
});
*/
});
i got it work right using this in the Jquery main