Bouton animé ne veux pas fonctionner
Posté : 29 juil. 2014, 15:09
Bonjour,
J'ai un petit soucis, je viens de créer une page en php afin d'inscrire des clients dessus. J'y ai insérer un bouton qui est sensé s'animer (l'animation fonctionne j'ai vérifier), et c'est la que commence le problème, je m'explique : j'ai introduit mon bouton dans mon fieldset qui regroupe tout mes champs à remplir, le bouton s'affiche sans soucis et est fonctionnel (enregistre les données dans la base) mais il refuse de s'animer. Alors que si je mets mon bouton hors du fieldset celui-ci s'anime sans soucis mais l'enregistrement des données dans la base ne se fait pas.
Voici le code de ma page de création de clients
J'ai un petit soucis, je viens de créer une page en php afin d'inscrire des clients dessus. J'y ai insérer un bouton qui est sensé s'animer (l'animation fonctionne j'ai vérifier), et c'est la que commence le problème, je m'explique : j'ai introduit mon bouton dans mon fieldset qui regroupe tout mes champs à remplir, le bouton s'affiche sans soucis et est fonctionnel (enregistre les données dans la base) mais il refuse de s'animer. Alors que si je mets mon bouton hors du fieldset celui-ci s'anime sans soucis mais l'enregistrement des données dans la base ne se fait pas.
Voici le code de ma page de création de clients
Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<title>Création clients</title>
</head>
<body>
<?php include("menus.php"); ?>
<div id="creation_clients">
<form action="creation_clients.php" method="POST">
<p> Création clients</p><br>
<div>
<fieldset id="civilite"><legend><b>Information client :</b></legend>
<label for="Nom">Nom :</label>
<input type="texte" name="Nom" size="10" style="width:300px; class="texte"" ><br>
<label for="Prenom">Prénom :</label>
<input type="texte" name="Prenom" sizes="200" style="width:300px; class="texte""><br>
<label for="DateDeNaissance">Date de naissance :</label>
<input type="texte" name="DateDeNaissance" size="20" style="width:300px; class="texte""><br>
<label for="Email">Adresse mail :</label>
<input type="texte" name="Email" size="20" style="width:300px; class="texte""><br>
<label for="Adresse1">Adresse 1 :</label>
<input type="texte" name="Adresse1" size="10" style="width:300px; class="texte""><br>
<label for="Adresse2">Adresse 2 :</label>
<input type="texte" name="Adresse2" sizes="200" style="width:300px; class="texte""><br>
<label for="Ville">Ville :</label>
<input type="texte" name="Ville" size="20" style="width:300px; class="texte""><br>
<label for="CodePostal">Code postal :</label>
<input type="texte" name="CodePostal" size="20" style="width:300px; class="texte""><br>
<label for="Pays">Pays :</label>
<input type="texte" name="Pays" size="20" style="width:300px; class="texte""><br>
<!-- bouton -->
<section class="container">
<div class="progress-button elastic">
<button><span>Créer client</span></button>
<svg class="progress-circle" width="70" height="70"><path d="m35,2.5c17.955803,0 32.5,14.544199 32.5,32.5c0,17.955803 -14.544197,32.5 -32.5,32.5c-17.955803,0 -32.5,-14.544197 -32.5,-32.5c0,-17.955801 14.544197,-32.5 32.5,-32.5z"/></svg>
<svg class="checkmark" width="70" height="70"><path d="m31.5,46.5l15.3,-23.2"/><path d="m31.5,46.5l-8.5,-7.1"/></svg>
<svg class="cross" width="70" height="70"><path d="m35,35l-9.3,-9.3"/><path d="m35,35l9.3,9.3"/><path d="m35,35l-9.3,9.3"/><path d="m35,35l9.3,-9.3"/></svg>
<script src="js/classie.js"></script>
<script src="js/uiProgressButton.js"></script>
<script>
[].slice.call( document.querySelectorAll( '.progress-button' ) ).forEach( function( bttn, pos ) {
new UIProgressButton( bttn, {
callback : function( instance ) {
var progress = 0,
interval = setInterval( function() {
progress = Math.min( progress + Math.random() * 0.1, 1 );
instance.setProgress( progress );
if( progress === 1 ) {
instance.stop( pos === 1 || pos === 3 ? -1 : 1 );
clearInterval( interval );
}
}, 150 );
}
} );
} );
</script>
</div>
</fieldset>
</form>
</div>
</div>
<?php
if(sizeof($_POST)>0){
// connection à la base
$con = mysqli_connect("localhost","root","","stage");
mysqli_select_db($con, 'clients');
// lecture des informations
$var_Nom=$_POST['Nom'];
$var_Prenom=$_POST['Prenom'];
$var_DateDeNaissance=$_POST['DateDeNaissance'];
$var_Email=$_POST['Email'];
$var_Adresse1=$_POST['Adresse1'];
$var_Adresse2=$_POST['Adresse2'];
$var_Ville=$_POST['Ville'];
$var_CodePostal=$_POST['CodePostal'];
$var_Pays=$_POST['Pays'];
// execution de la requête d'insertion
$query="INSERT INTO clients (Nom, Prenom, DateDeNaissance, Email, Adresse1, Adresse2, Ville, CodePostal, Pays) values ('$var_Nom', '$var_Prenom', '$var_DateDeNaissance', '$var_Email','$var_Adresse1', '$var_Adresse2', '$var_Ville', '$var_CodePostal', '$var_Pays');";
$test=mysqli_query($con, $query);
if($test)
echo "enregistrement OK";
else
echo "Pb av $query ". mysqli_error($con);
}
?>
</body>
</html>