Bonjour,
J'ai le grand projet de créer un panier en Javascript car mon éditeur WEB n'accepte pas la PHP. Comme j'ai déjà fait tout mon catalogue, cela m'embêterais de tout refaire. Malheureusement je ne suis pas bon en Javascript, mais j'ai vu que c'était possible :
Tuto
Ma question est la suivante :
J'aimerais ajouter un fonction onClick ou onSubmit que lorsqu'on clique sur le bouton, "Ajouter panier", ce qui est dans value pour le titre, la quantité et le prix de mon catalogue se mettent automatiquement dans les cases Titre, quantité et prix de mon panier. J'aimerais aussi intégrer un fonction que si la première ligne est prise, que cela se remplisse à la deuxième.
Est-ce que quelqu'un peut m'aider en faisant une ébauche de code car je n'y arrive pas ?
Merci
Nouveau :
J'ai composé le code suivant pour le premier champ du formulaire. Mais malheureusement, cela ne fait que copier le texte et cela ne vérifie pas si c'est déjà rempli.
<input type="button" value="Ajouter au Panier" onClick="copier();"/>
<script type="text/javascript">
function copier(){
document.ajout.title1.value = document.ajout.Titre1.value;
document.ajout.quantite1.value = document.ajout.field12.value;
document.ajout.prix1.value = document.ajout.field1.value;
}
</script>
Le problème est que je ne vois pas comment dire que si les camps ccTitre1, field12, field1 sont remplit, que cela aille se copier vers Titre 2, field13, field2 ou Titre 3, field14, field3.
Merci
Voici mes deux codes.
J'ai volontairement simplifier le code en réduisant le nombre de champs (10 à l'origine pour la panier, 30 pour la catalogue), en enlevant les couleurs, les disabled, les espaces, les images et les titres, pour que vous vous en sortiez plus facilement dans le code. Je peux mettre à la demande le code complet.
Mon catalogue :
<html>
<body>
<form method=post >
<code type="html"><code type="html">
<br>Titre:<input type="text" value="Jeux 1" name="Titre" id="title1">
Quantité:
<select id="quantite1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Prix:<input type="texte" value="15" name="Prix" id="prix1">€
<input type="submit" value="Ajouter au panier"/></br>
</form>
<form method=post >
<code type="html"><code type="html">
<br>Titre:<input type="text" value="Jeux 1" name="Titre" id="title2">
Quantité:
<select id="quantite2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Prix:<input type="texte" value="15" name="Prix" id="prix2">€
<input type="submit" value="Ajouter au panier"/></br>
</form>
</body>
</html>
Mon panier :
<html>
<head>
<title>Panier</title>
<script type="text/javascript">
function computeResult() {
var result = document.getElementById('result');
var value1 = document.getElementById('field1').value;
var value2 = document.getElementById('field2').value;
var quantity1 = document.getElementById('field12').value;
var quantity2 = document.getElementById('field22').value;
if (value1 && value2 && quantity1 && quantity2) {
var A = value1 * quantity1;
var B = value2 * quantity2;
result.value = parseInt(A) + parseInt(B)
}
}
function testInt(value) {
return value == parseInt(value);
}
</script>
</head>
<body>
<form method=post>
<br>Titre<input type="text" id="Titre1">Quantité<input type="text" id="field12" onChange="computeResult();" value="0">Prix<input type="text" id="field1" onChange="computeResult();" value="0">€</br>
<br>Titre<input type="text" id="Titre2">Quantité<input type="text" id="field22" onChange="computeResult();" value="0">Prix<input type="text" id="field2" onChange="computeResult();" value="0">€</br>
<br>Prix Total :<input type="text" id="result" value="0"></input>€</br>
</form>
</body>
</html>