formulaire de devis avec ajout de champs
bonjour , voila je suis en train de concevoir un formulaire de devis en jquery dans le genre formclone
mais je plante sur la recuperation des donnée et sur le calcul.
j ai les fonction separée mais j arrive pas a mettre le toute en oeuvre,
quelque un de meilleur que moi aurait un petit peut de temps a perdre pour me repondre ou me donnée un tuto sur le sujet .
ca fait 2 mois que je chercher :o(
si j ai bien capté le truc c est de mettre un increment sur mes id ... mais pas d' id ée comment faire ca ..
merci a vous
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" ; charset=utf-8" />
<title>relevé électricien</title>
<!-- attention aux versions !!! -->
<script type="text/javascript" src="lib/jquery-1.4.min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.core.min.js"></script>
<link type="text/css" rel="stylesheet" href="lib/jquery-ui-1.8.11.custom.css" />
<script type="text/javascript" src="lib/jquery.sheepItPlugin.js"></script>
<script type="text/javascript" src="lib/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.datepicker-fr.js"></script>
<link rel="stylesheet" href="class.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
$("#debut").datepicker();
$('#blocs').sheepIt({
separator: '',
allowRemoveLast: true,
allowAdd: true,
maxFormsCount: 20,
minFormsCount: 0,
iniFormsCount: 0,
indexFormat: ' __index1__'
});
});
function calcul(total,prix,surface)
{
x=document.getElementById(prix);p=(1*x.value); // le prix
x=document.getElementById(surface);s=(1*x.value); // le taux de TVA
t=(p*s); // On calcule
x=document.getElementById(total);x.value=t; // On affecte
};
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="testpost.php">
<p class="titre">Préparation</p>
<fieldset id="facture">
<div id="blocs">
<div id="blocs_template">
M ²<input name="surface" id="surface" onBlur="calcul('total','prix','surface')" value="0" size="10" />
Prix M ²<input name="prix" id="prix" onChange="calcul('total','prix','surface')" size="10" />
Total: <input name="total" id="total" readonly="true">
</div>
<div id="blocs_noforms_template"></div>
<div id="blocs_controls">
<button id="blocs_add">Ajouter</button>
<button id="blocs_remove_last">Supprimer</button>
</div>
</div>
<fieldset class="email">
<label>Envoyé a cet E-mail: </label><input type="text" name="destinataire-email" />
</fieldset>
<p id="buttons">
<input type="submit" value="Envoyer" />
<input type="reset" value="Recommencer" />
</p>
</form>
</body>
</html>
4 réponses
Voici ce que peut donner ton formulaire avec un clonage de tes 3 champs
faut que tu rajoutes la librairie fromclone <script type="text/javascript" src="lib/jquery.cloneform.js"></script>
Dans le fichier jquery.cloneform.js j'ai supprimé la partie "jquery setup" que j'ai mise dans le fichier principal
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" ; charset=utf-8" />
<title>relevé électricien</title>
<!-- attention aux versions !!! -->
<script type="text/javascript" src="lib/jquery-1.4.min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.core.min.js"></script>
<link type="text/css" rel="stylesheet" href="lib/jquery-ui-1.8.11.custom.css" />
<script type="text/javascript" src="lib/jquery.sheepItPlugin.js"></script>
<script type="text/javascript" src="lib/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript" src="js/jquery.cloneform.js"></script>
<link rel="stylesheet" href="class.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
$("#debut").datepicker();
$('#blocs').sheepIt({
separator: '',
allowRemoveLast: true,
allowAdd: true,
maxFormsCount: 20,
minFormsCount: 0,
iniFormsCount: 0,
indexFormat: '__index1__'
});
$("#blocs_add").click(function(){
var yourclass=".clone"; //The class you have used in your form
var clonecount = $(yourclass).length; //how many clones do we already have?
var newid = Number(clonecount) + 1; //Id of the new clone
$(yourclass+":first").fieldclone({//Clone the original elelement
newid_: newid, //Id of the new clone, (you can pass your own if you want)
target_: $("#blocs_controls"), //where do we insert the clone? (target element)
insert_: "before", //where do we insert the clone? (after/before/append/prepend...)
limit_: 4 //Maximum Number of Clones
});
return false;
});
//action sur le champ surface
$('input[name^="surface_"]').live('keyup',function(){
$(this).next().next().val(Number($(this).val())*Number($(this).next().val()))
});
//action sur le champ prix
$('input[name^="prix_"]').live('keyup',function(){
$(this).next().val(Number($(this).val())*Number($(this).prev().val()))
});
});
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="testpost.php">
<p class="titre">Préparation</p>
<fieldset id="facture" class="clone">
<div id="blocs">
<div id="blocs_template">
M ²<input name="surface_1" id="surface" value="0" size="10" />
Prix M ²<input name="prix_1" id="prix" value="0" size="10" />
Total:<input name="total_1" id="total" readonly="true">
</div>
<div id="blocs_noforms_template"></div>
</div>
</fieldset>
<div id="blocs_controls">
<input type="button" id="blocs_add" value="Ajouter">
<button id="blocs_remove_last">Supprimer</button>
</div>
<fieldset class="email">
<label>Envoyé a cet E-mail: </label><input type="text" name="destinataire-email" />
</fieldset>
<p id="buttons">
<input type="submit" value="Envoyer" />
<input type="reset" value="Recommencer" />
</p>
</form>
</body>
</html>
salut .. je repond un peut en retard ... prob de santé .. enfin bref ... merci pour ta reponse mais je ne trouve pas
la librairie fromclone je vais continuer a chercher ... on devrais l avoir sur le site jquery ? c est juste ?
merci