この代替アプローチの利点を考慮してください。予約フォームは、ユーザーにはページとしてのみ表示される複数の「ページ」を使用してセットアップできます。
jsFiddle の例
つまり、ユーザーにとっては、ある画面から次の画面に移動することになりますが、それは javascript (jQueryUI タブなど) によって作成された錯覚にすぎません。実際には、jsFiddle のように、すべてのフィールドが同じページ/同じフォームにあります。次に、ユーザーが送信ボタンを押したときにすべての情報を収集できます。
- すべてのフィールドが入力されていることを確認します。
- フィールド内のデータの正しい形式を確認します。
- 何か問題がある場合は、(1)
alert()または jQueryUI ダイアログを介してメッセージを表示し、(2) を介してユーザーをフォームに送り返します。return false;
- 問題がなければ、次の方法でフォームを送信してください。
$('#IdOfForm').submit();
すべてのデータ収集と検証をクライアント側で行うことにより、PHP コードを大幅に簡素化できます。また、ユーザーが見逃したフィールドを完了するために送り返された場合、それまでに入力したすべてのデータがまだそこにあります...
SQL インジェクションを防ぐために、PHP 側でデータを検証する必要があることに注意してください。詳細については、この記事とこの SO 投稿を参照してください。
スタンドアロンで動作するコード例:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
var arrFormFields = ['cn','ca','ce','cp','dd','rd'];
$("#tabs").tabs();
$("#theMsg").dialog({
autoOpen: false,
});
$('#doit').click(function() {
for (var fld in arrFormFields) {
if ( $('#' + arrFormFields[fld]).val() == ''){
console.log('Var ' +arrFormFields[fld]+ ' has value: ' + $('#'+arrFormFields[fld]).val() );
$('#' + arrFormFields[fld]).css({'border':'1px solid red','background':'yellow'})
$('#ui-id-1').trigger('click');
$('#' + arrFormFields[fld]).focus();
alert('Please complete all fields'); //For some reason the alert isn't displaying
return false;
}else{
//Submit form to "dothebooking.php", like this:
//$('#TripForm').submit();
$('#theMsg').html('<h2>Form was successfully submitted</h2>');
$('#theMsg').dialog({'title':'Notice'}).dialog('open');
}
}
});
$('input:text').blur(function() {
$("input:not(:button)").css({'border':'1px solid grey','background':'white'});
});
}); //END $(document).ready()
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Customer Details</a></li>
<li><a href="#tabs-2">Trip Details</a></li>
<li><a href="#tabs-3">Trip Options</a></li>
</ul>
<form id='TripForm' action="dothebooking.php" method="POST">
<div id="tabs-1">
Customer Name: <input type='text' id="cn"><br>
Customer Address: <input type='text' id="ca"><br>
Customer Email: <input type='text' id="ce"><br>
Customer Phone: <input type='text' id="cp"><br>
</div><!-- #tabs-1 -->
<div id="tabs-2">
Departure Date: <input type='text' id="dd"><br>
Return Date: <input type='text' id="rd"><br>
</div><!-- #tabs-2 -->
<div id="tabs-3">
Guided Tour option <input type='checkbox' id="gt"><br>
Presidential Suite <input type='checkbox' id="ps"><br>
Bed and Breakfast <input type='checkbox' id="bb"><br>
<input type='button' id="doit" value="Submit Trip"><br>
</div><!-- #tabs-3 -->
</form><!-- #TripForm -->
</div><!-- #tabs -->
<div id="theMsg"></div>
</body>
</html>
jQuery 検証プラグインも興味深いかもしれません。
これらのデモをチェックして、簡単に見てみましょう。