Bonjour à tous et à toutes,
Je suis une jeune developpeur en stage et je lutte pour crer un formulaire de resèrvation un peu particulier, en faite il s'agit de selectionner la dates (weekend ou jour de la semaine) et selon la date certains choix apparaissent et d'autres non.
Je rencontre plusieurs problemes, dans un premier temp, je n'arrive pas a definir le weekend de maniere correct lors du choix de la date.
Ensuite , je suis censer recuperer la variable de la date selectionner et de l'inclure lors de l envoi de donne ( simple mailer ) voila si quelqu'un pouvais jeter un coup d'oeil a mon code ca serait super simpas merci à vous !
Voici mon code
Et voici le lien [url]http://www.levelsclub.com/booking/2/#[/url]
[code]<?php
$selected_date = '';
if( isset($_POST['date_selection']) )
{
$selected_date = $_POST['date_selection'];
}
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--Package picker-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/image-picker.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/image-picker.css">
<!--Package picker-->
</head>
<style>
body {
margin: 0 auto;
display: block;
width: 800px;
text-align: center;
font-family: arial;
background: #060606;
color: #fff;
}
select#date_selection {
height: 34px;
border-radius: 3px;
background: #2b2b2b;
color: #fff;
width: 140px;
text-align: center;
}
form.booking_form2 {
width: 100%;
}
.booking_form2 select {
float: left;
width: 51%;
margin: 5px 1px 5px 1px;
padding: 20px 8px 20px 8px;
border-radius: 3px;
background: #2b2b2b;
border: none;
color: #fff;
transition: all 200ms ease;
}
.booking_form2 select:hover {
background: #000;
transition: all 300ms ease;
}
.booking_form2 input {
float: left;
width: 49%;
margin: 5px 1px 5px 1px;
padding: 20px 8px 20px 8px;
border-radius: 3px;
background: #2b2b2b;
border: none;
color: #fff;
transition: all 200ms ease;
}
.booking_form2 input:hover {
background: #000;
transition: all 200ms ease;
}
textarea {
float: left;
width: 98%;
margin: 5px 1px 5px 1px;
padding: 8px;
height: 100px;
resize: none;
border-radius: 3px;
background: #2b2b2b;
border: none;
color: #fff;
transition: all 200ms ease;
font-family: arial;
}
textarea:hover {
background: #000;
transition: all 300ms ease;
}
button.button {
background: #e2e2e2;
border: 1px solid #c3c1c1;
padding: 8px 20px 8px 20px;
border-radius: 3px;
}
.button-reza {
background: #e2e2e2;
border: 1px solid #c3c1c1;
padding: 8px 20px 8px 20px;
border-radius: 3px;
float: left;
}
select#date_selection {
background: #2b2b2b;
color: #fff;
text-align: center;
height: 54px;
border-radius: 3px;
width: 28%;
padding: 7px;
font-size: 16px;
transition: all 200ms ease;
}
select#date_selection:hover {
background: #000;
transition: all 200ms ease;
}
.img-packages {
width: 101%;
text-align: center;
margin: 0 auto;
}
.img-packages img {
width: 49%;
display: inline-flex;
float: left;
text-align: center;
padding: 2px;
}
.thumbnail:hover {
opacity: 0.8;
transition: all 200ms ease;
}
.thumbnail {
opacity: 1;
transition: all 200ms ease;
}
.section {
width: 100%;
display: inline-flex;}
select.image-picker {
width: 30%;
}
span {
color: #e7e294;
font-weight: bold;
}
</style>
<p><span>Step 1:</span> Select your booking date.</p>
<form action="#" target="_self" method="POST">
<select name="date_selection" id="date_selection" onchange="this.form.submit()">
<option value="<?php echo date('l-d-M'); ?>" <?php if ( strtotime(date('l-d-m')) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M'); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+1 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+1 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+1 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+2 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+2 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+2 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+3 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+3 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+3 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+4 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+4 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+4 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+5 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+5 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+5 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+6 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+6 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+6 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+7 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+7 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+7 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+8 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+8 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+8 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+9 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+9 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+9 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+10 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+10 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+10 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+11 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+11 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+11 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+12 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+12 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+12 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+13 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+13 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+13 day')); ?></option>
<option value="<?php echo date('l-d-m', strtotime('+14 day')); ?>" <?php if ( strtotime(date('l-d-m', strtotime('+14 day'))) == strtotime($selected_date) ) { echo "selected=\"selected\""; } ?> ><?php echo date('D d M', strtotime('+14 day')); ?></option>
</select>
</form>
<p>
</p>
<?php
if (date('w', strtotime($selected_date)) == 6 or date('w', strtotime($selected_date)) == 1) {
/* C'est un samedi ou un dimanche */
?>
<?php /* HTML ZONE */ ?>
<!--debut du formulaire-->
<form class="booking_form2" action="#" target="_self" method="POST">
<p><?php echo "You have selected this date ".$selected_date.""; ?> </p>
<!--****************************Image picker*************************-->
<p><span>Step 2:</span> Select one of those following packages.</p>
<div class="picker">
<select class='image-picker'>
<option data-img-src='http://www.levelsclub.com/booking/2/VIP-Weekend-10,500-921x617.jpg' value='1'> Package selected : 10,500 THB </option>
<option data-img-src='http://www.levelsclub.com/booking/2/VIP-Weekend-14,700-921x617.jpg' value='2'> Package selected : 17,700 THB </option>
</select>
</div>
<script type="text/javascript">jQuery("select.image-picker").imagepicker({ hide_select: false,}); </script>
<!--****************************Image picker*************************-->
<br>
<p><span>Step 3:</span> Fill out the form and send your reservation.</p>
<br>
<div class="section">
<input type="text" name="fullname" placeholder="Full Name"><br>
<input type="text" name="tel" placeholder="Tel"><br>
</div>
<div class="section">
<input type="text" name="email" placeholder="Email"><br>
<select class="Nb of people">
<option value="">Nb of People</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="1">3</option>
<option value="2">4</option>
<option value="1">5</option>
<option value="2">6</option>
<option value="1">7</option>
<option value="2">8</option>
<option value="1">9</option>
<option value="2">10+</option>
</select>
</div>
<textarea type="textarea" name="textarea" placeholder="Special Requirements" /></textarea>
<button class="button-reza" type="submit" name="submit">Send reservation</button>
</div>
</form>
<!--fin du formulaire-->
<?php /* HTML ZONE */ ?>
<?php
} else {
/* C'est la semaine DIDON LA ! */
?>
<?php /* HTML ZONE */ ?>
<form class="booking_form2" action="#" target="_self" method="POST">
<p><?php echo "You have selected this date ".$selected_date.""; ?> </p>
<!--****************************Image picker*************************-->
<p><span>Step 2:</span> Select one of those following packages.</p>
<div class="picker">
<select class='image-picker'>
<option data-img-src='http://www.levelsclub.com/booking/2/VIP-weekday-7,000-921x617.jpg' value='1'> Package selected : 7,000 THB </option>
<option data-img-src='http://www.levelsclub.com/booking/2/VIP-weekday-9,800-921x617.jpg' value='2'> Package selected : 9,800 THB </option>
</select>
</div>
<script type="text/javascript">jQuery("select.image-picker").imagepicker({hide_select: false,}); </script>
<!--****************************Image picker*************************-->
<br>
<p><span>Step 3:</span> Fill out the form and send your reservation.</p>
<br>
<div class="section">
<input type="text" name="fullname" placeholder="Full Name"><br>
<input type="text" name="tel" placeholder="Tel"><br>
</div>
<div class="section">
<input type="text" name="email" placeholder="Email"><br>
<select class="Nb of people">
<option value="">Nb of People</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="1">3</option>
<option value="2">4</option>
<option value="1">5</option>
<option value="2">6</option>
<option value="1">7</option>
<option value="2">8</option>
<option value="1">9</option>
<option value="2">10+</option>
</select>
</div>
<textarea type="textarea" name="textarea" placeholder="Special Requirements" /></textarea>
<button class="button-reza" type="submit" name="submit">Send reservation</button>
</form>
<?php /* HTML ZONE */ ?>
<?php
}
?>
<body>
</body>
<script type="text/javascript">
//****************************Function JS to get selected option fron select tag*************************
function getDate() {
var selected_date= $("#date_selection").val();
console.log(selected_date);
location.href = "?selected_date="+selected_date;
}
</script>
</html>
[/code] :D
