Я не могу заставить datepicker (jquery) работать на моей странице регистрации начальной загрузки. Я попытался щелкнуть, но ничего не случилось. я пропустил что-нибудь? Посмотрите на код ниже!
datepicker из jquery> http://jqueryui.com/datepicker/
<?php
require("config.php");
if(!empty($_POST))
{
// Ensure that the user fills out fields
if(empty($_POST['username']))
{ die("Please enter a username."); }
if(empty($_POST['password']))
{ die("Please enter a password."); }
if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL))
{ die("Invalid E-Mail Address"); }
if(empty($_POST['name']))
{ die("Please enter your name."); }
if(empty($_POST['gender']))
{ die("Please enter your gender."); }
if(empty($_POST['dateofbirth']))
{ die("Please enter your Date of Birth."); }
if(empty($_POST['nric']))
{ die("Please enter your NRIC."); }
if(empty($_POST['address']))
{ die("Please enter your address."); }
if(!filter_var($_POST['postalcode'], FILTER_SANITIZE_NUMBER_INT))
{ die("Invalid Postal Code"); }
if(!filter_var($_POST['mobilenumber'], FILTER_SANITIZE_NUMBER_INT))
{ die("Invalid Mobile Number"); }
if(empty($_POST['profession']))
{ die("Please enter your profession."); }
// =====================================================
// Check if the username is already taken
$query = "
SELECT
1
FROM users
WHERE
username = :username
";
$query_params = array( ':username' => $_POST['username'] );
try {
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); }
$row = $stmt->fetch();
if($row){ die("This username is already in use"); }
$query = "
SELECT
1
FROM users
WHERE
email = :email
";
$query_params = array(
':email' => $_POST['email']
);
try {
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage());}
$row = $stmt->fetch();
if($row){ die("This email address is already registered"); }
$query = "
SELECT
1
FROM users
WHERE
nric = :nric
";
$query_params = array( ':nric' => $_POST['nric'] );
try {
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); }
$row = $stmt->fetch();
if($row){ die("This NRIC is already in use"); }
$query = "
SELECT
1
FROM users
WHERE
mobilenumber = :mobilenumber
";
$query_params = array( ':mobilenumber' => $_POST['mobilenumber'] );
try {
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); }
$row = $stmt->fetch();
if($row){ die("This Mobile Number is already in use"); }
//---------------------------------------------------- Add row to database
$query = "
INSERT INTO users (
username,
password,
salt,
email,
name,
gender,
dateofbirth,
nric,
address,
postalcode,
mobilenumber,
profession
) VALUES (
:username,
:password,
:salt,
:email,
:name,
:gender,
:dateofbirth,
:nric,
:address,
:postalcode,
:mobilenumber,
:profession
)
";
// Security measures
$salt = dechex(mt_rand(0, 2147483647)) . dechex(mt_rand(0, 2147483647));
$password = hash('sha256', $_POST['password'] . $salt);
for($round = 0; $round < 65536; $round++){ $password = hash('sha256', $password . $salt); }
$query_params = array(
':username' => $_POST['username'],
':password' => $password,
':salt' => $salt,
':email' => $_POST['email'],
':name' => $_POST['name'],
':gender' => $_POST['gender'],
':dateofbirth' => $_POST['dateofbirth'],
':nric' => $_POST['nric'],
':address' => $_POST['address'],
':postalcode' => $_POST['postalcode'],
':mobilenumber' => $_POST['mobilenumber'],
':profession' => $_POST['profession'],
);
try {
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); }
header("Location: successful.php");
die("Redirecting to successful.php");
}
?>
<!-- Author: Michael Milstead / Mode87.com
for Untame.net
Bootstrap Tutorial, 2013
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Sign Up -</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php if (empty($_SESSION[ 'user'])) { include_once( "header.php"); } else { include_once( "header2.php"); }?>
<div class="page-header">
<div class="container">
<h1> Register </h1>
<form action="register2.php" method="post" role="form">
<div class="form-group">
<label>Username:</label>
<input type="text" name="username" value="" maxlength="20" />
</div>
<div class="form-group">
<label>Email: <strong style="color:darkred;">*</strong>
</label>
<input type="text" name="email" value="" maxlength="20" />
</div>
<div class="form-gtroup">
<label>Password:</label>
<input type="password" name="password" value="" maxlength="20" />
<br />
<br />
</div>
<div class="form-group">
<label>Name:</label>
<input type="text" name="name" value="" maxlength="20" />
</div>
<div class="form-group">
<label>Gender:</label>
<div class="radio">
<label>
<input type="radio" name="gender" id="male" value="male">Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" id="female" value="female">Female
</label>
</div>
</div>
<div class="form-group">
<label>Date of Birth:</label>
<input type="text" name="dateofbirth" value="" />
</div>
<div class="form-group">
<label>NRIC:</label>
<input type="text" name="nric" value="" maxlength="9" />
</div>
<div class="form-group">
<label>Address:</label>
<input type="text" name="address" value="" maxlength="50" />
</div>
<div class="form-group">
<label>Postal Code:</label>
<input type="text" name="postalcode" value="" maxlength="6" />
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">+65</span>
<input type="text" name="mobilenumber" value="" class="form-control" placeholder="Mobile Number" maxlength="8">
</div>
</div>
<div class="form-group">
<label>Profession:</label>
<input type="text" name="profession" value="" maxlength="20" />
</div>
<div class="form-group">
<label>Date:</label>
<input type="text" name="dateofbirth" id="datepicker" value="" />
</div>
<input type="submit" class="btn btn-info" value="Register" />
</form>
</div>
</div>
<?php include_once( "footer.php");?>
</body>
</html>
У вас зондирование с JQuery Conflict... вы можете сделать..
1. Declare jquery at header
2. Other Js at footer.
поэтому, когда вы инициализируете свой datepicker, он может иметь jQuery, который после инициализации перезаписывается bootsstrap jquery в нижнем колонтитуле.
Или
You can have $.noconflict
Вы звоните
$(function () {
$("#datepicker").datepicker();
});
У вас есть 2 поля даты, поле " Date of Birth
поле " Date
, только один из которых имеет идентификатор datepicker
. Кроме того, если вы хотите несколько, вы должны использовать селектор классов, а не селектор идентификаторов.
Я предполагаю, что вы хотите, чтобы поля " Date
Date of Birth
и " Date
использовали параметр datepicker.
Измените свой javascript на это:
$(function () {
$(".datepicker").datepicker();
});
И добавьте класс datepicker
к любым входам, которые вы хотите включить, например. Также я изменил его, так что оба поля не имеют одинакового имени dateofbirth
<div class="form-group">
<label>Date of Birth:</label>
<input class="datepicker" type="text" name="dateofbirth" value="" />
</div>
и это:
<div class="form-group">
<label>Date:</label>
<input class="datepicker" type="text" name="date" value="" />
</div>
См. Этот рабочий скрипт JS с кодом, который я опубликовал. http://jsfiddle.net/AES54/
Вот еще одна скрипка с использованием тех же jquery ui js и css ссылок: http://jsfiddle.net/AES54/1/
datepicker
к первому. Просто разместил скрипку с моим кодом, все работает.
Попробуйте добавить скрипт внутри функции готовности документа, как показано ниже.
$(document).ready(function() {
$(function() {
$( "#datepicker" ).datepicker();
});
});
$(function(){});
сокращение от $(document).ready(function(){});
... даже если это действительно бессмысленно для меня