Bonjour,
Voilà, je ne sais pas si je suis dans la bonne rubrique mais je pense que mon problème est certainement dû à un bout de code qui gère le responsive.
J'ai utilisé un module pour afficher un calendrier dynamique "datedropper" dans un champ de formulaire mais le bouton qui valide la date ne fonctionne pas.
Sur une page vierge cela fonctionne et dans ma page contact rien à faire. je pense que cela viendrait de la fonction submit du formulaire mais pas sûre.
je vous met mon code:
je vous met le lien de la page si vous voulez voir ce que ça fait. (www.cenotech.fr/danslepetrin/index-4.html)
merci
Modifié par lakawet (27 Aug 2015 - 16:55)
Voilà, je ne sais pas si je suis dans la bonne rubrique mais je pense que mon problème est certainement dû à un bout de code qui gère le responsive.
J'ai utilisé un module pour afficher un calendrier dynamique "datedropper" dans un champ de formulaire mais le bouton qui valide la date ne fonctionne pas.
Sur une page vierge cela fonctionne et dans ma page contact rien à faire. je pense que cela viendrait de la fonction submit du formulaire mais pas sûre.
je vous met mon code:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Contact</title>
<meta charset="utf-8">
<meta name = "format-detection" content = "telephone=no" />
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/contact-form.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="datedropper-master/datedropper.css">
<script src="js/jquery.js"></script>
<script src="datedropper-master/datedropper.js"></script>
<script src="js/jquery-migrate-1.2.1.js"></script>
<script src="js/jquery.equalheights.js"></script>
<script src="js/TMForm.js"></script>
<script src="js/modal.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/wow/wow.js"></script>
<script>
$(document).ready(function () {
if ($('html').hasClass('desktop')) {
new WOW().init();
}
});
</script>
<!--<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<div id="ie6-alert" style="width: 100%; text-align:center;">
<img src="http://beatie6.frontcube.com/images/ie6.jpg" alt="Upgrade IE 6" width="640" height="344" border="0" usemap="#Map" longdesc="http://die6.frontcube.com" />
<map name="Map" id="Map"><area shape="rect" coords="496,201,604,329" href="http://www.microsoft.com/windows/internet-explorer/default.aspx" target="_blank" alt="Download Interent Explorer" /><area shape="rect" coords="380,201,488,329" href="http://www.apple.com/safari/download/" target="_blank" alt="Download Apple Safari" /><area shape="rect" coords="268,202,376,330" href="http://www.opera.com/download/" target="_blank" alt="Download Opera" /><area shape="rect" coords="155,202,263,330" href="http://www.mozilla.com/" target="_blank" alt="Download Firefox" />
<area shape="rect" coords="35,201,143,329" href="http://www.google.com/chrome" target="_blank" alt="Download Google Chrome" />
</map>
</div>
<![endif]-->
</head>
<body>
<div class="big-wrapper">
<!--========================================================
HEADER
=========================================================-->
<header id="header">
<div class="container">
<div class="row">
<div class="grid_12">
<h1 class="wow fadeInDown" data-wow-duration="1s" data-wow-delay="0.1s"><a href="index.html">Bread</a></h1>
<nav class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s">
<ul class="sf-menu">
<li><a href="index.html">Home</a></li>
<li><a href="index-1.html">About us</a></li>
<li><a href="index-2.html">Blog</a>
<ul>
<li><a href="#">dictum elementu</a></li>
<li><a href="#">Fusce euismo</a>
<ul>
<li><a href="#">dictum elementu</a></li>
<li><a href="#">Fusce euismo</a></li>
<li><a href="#">consequat ante</a></li>
</ul>
</li>
<li><a href="#">consequat ante</a></li>
</ul>
</li>
<li><a href="index-3.html">Products</a>
<ul>
<li><a href="#">dictum elementu</a></li>
<li><a href="#">Fusce euismo</a>
<ul>
<li><a href="#">dictum elementu</a></li>
<li><a href="#">Fusce euismo</a></li>
<li><a href="#">consequat ante</a></li>
</ul>
</li>
<li><a href="#">consequat ante</a></li>
</ul>
</li>
<li class="current"><a href="index-4.html">Mail</a></li>
</ul>
<div class="clearfix"></div>
</nav>
<ul class="socials1">
<li class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s"><a href="#"><img src="images/tumblr.png" alt=""/></a></li>
<li class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s"><a href="#"><img src="images/facebook.png" alt=""/></a></li>
<li class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s"><a href="#"><img src="images/face.png" alt=""/></a></li>
</ul>
</div>
</div>
</div>
</header>
<!--========================================================
CONTENT
=========================================================-->
<section id="content" class="common">
<div class="container">
<div class="row">
<div class="grid_12">
<div class="heading1">
<h2>Formulaire de contact</h2>
</div>
<div class="img-wrapper1 img-wrapper1__offset1">
<div class="responsive-iframe-container big-container">
<iframe src="https://www.google.com/calendar/embed?showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=400&wkst=2&bgcolor=%23cccccc&src=guignol72000%40gmail.com&color=%23711616&ctz=Europe%2FParis" style=" border-width:0 " width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</div>
<div class="responsive-iframe-container small-container">
<iframe src="https://www.google.com/calendar/embed?showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=400&wkst=2&bgcolor=%23cccccc&src=guignol72000%40gmail.com&color=%23711616&ctz=Europe%2FParis" style=" border-width:0 " width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</div>
</div>
<div class="address-blocks-wrapper1">
<div class="row">
<div class="grid_4">
<div class="address-block maxheight wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s">
<h3>Address 1</h3>
<address><span>8901 Marmora Road,</span><span>Glasgow, D04 89GR.</span></address>
</div>
</div>
<div class="grid_4">
<div class="address-block maxheight wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s">
<h3>Telephones</h3>
<address><span>+1 800 559 6580</span><span>+1 959 603 6035</span></address>
</div>
</div>
<div class="grid_4">
<div class="address-block maxheight wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">
<h3>Address 2</h3>
<address><span>9863 - 9867 Mill Road,</span><span>Cambridge, MG09 99HT</span></address>
</div>
</div>
</div>
</div>
<div class="heading1">
<h2>Dates souhaitées</h2>
</div>
<form id="contact-form">
<div class="contact-form-loader"></div>
<fieldset>
<div class="row">
<div class="grid_4">
<label class="name wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s">
<input type="text" id="departure" name="date_debut" placeholder="Date de début"/>
<span class="empty-message">*Ce champ est obligatoire.</span>
</label>
</div>
<div class="grid_4">
<div class="demo">
<label class="name wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s">
<input type="text" id="datepicker2" name="date_fin" placeholder="Date de fin"/>
<span class="empty-message">*Ce champ est obligatoire.</span>
</label>
</div>
</div>
<div class="grid_4">
<label class="name wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">
<input type="text" name="name" placeholder="Nom*" data-constraints="@Required @JustLetters"/>
<span class="empty-message">*Ce champ est obligatoire.</span>
</label>
</div>
<div class="grid_4">
<label class="email wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s">
<input type="text" name="email" placeholder="E-mail*" value=""
data-constraints="@Required @Email"/>
<span class="empty-message">*Ce champ est obligatoire.</span>
<span class="error-message">*Ceci n'est pas une adresse email valide.</span>
</label>
</div>
<div class="grid_4">
<label class="phone wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">
<input type="text" name="phone" placeholder="Téléphone*" value=""
data-constraints="@Required @JustNumbers"/>
<span class="empty-message">*Ce champ est obligatoire.</span>
<span class="error-message">*Ceci n'est pas un numéro de téléphone valide.</span>
</label>
</div>
</div>
<div class="row">
<div class="grid_12">
<label class="message wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s">
<textarea name="message" placeholder="Message*"
data-constraints='@Required @Length(min=20,max=999999)'></textarea>
<span class="empty-message">*Ce champ est obligatoire.</span>
<span class="error-message">*Le message est trop court.</span>
</label>
</div>
</div>
<!-- <label class="recaptcha"><span class="empty-message">*This field is required.</span></label> -->
<div class="contact-form-buttons wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.7s">
<a href="#" data-type="submit" class="btn-default">Envoyer</a>
</div>
</fieldset>
<div class="modal fade response-message">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
You message has been sent! We will be in touch soon.
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!--========================================================
FOOTER
=========================================================-->
<footer id="footer">
<div class="wrapper">
<div class="container">
<div class="row">
<div class="grid_12">
<div class="privacy-block wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.1s">
<a href="index.html">Bread</a> © <span id="copyright-year"></span> <a
href="index-5.html">Privacy policy</a>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<script>$( "#departure" ).dateDropper({ lang:"fr", color:"#930014", minYear:"2015", maxYear:"2020" });</script>
<script src="js/script.js"></script>
</body>
</html>
je vous met le lien de la page si vous voulez voir ce que ça fait. (www.cenotech.fr/danslepetrin/index-4.html)
merci
Modifié par lakawet (27 Aug 2015 - 16:55)