Bonjour a tous
je suis toujours la avec mon panier
il y a encore une chose qui m ennuie un peu
en effet l utilisateur doit choisir la quantité dans un select et ensuite la valider par ajouter dans le panier
dans mon code j'ai un onchange et un onclick
j'ai essaye de mettre ces deux valeurs dans le select mais cela se comporte de façon bizarre
J'ai enlever le onclick et tout ce passe bien ...
Comment je pourrais bien faire pour utiliser le onclick dans mon code
voici le code de départ
voici ce que j'ai fait et qui ne fonctionne pas bien a causs du onclick
et le code du onclick
je suis toujours la avec mon panier
il y a encore une chose qui m ennuie un peu
en effet l utilisateur doit choisir la quantité dans un select et ensuite la valider par ajouter dans le panier
dans mon code j'ai un onchange et un onclick
j'ai essaye de mettre ces deux valeurs dans le select mais cela se comporte de façon bizarre
J'ai enlever le onclick et tout ce passe bien ...
Comment je pourrais bien faire pour utiliser le onclick dans mon code
voici le code de départ
<div class="row mt-12">
<div class="col-md-12">
<p class="card-text centrer_titre_texte">Perle de 2 mm</p>
<div class="centrer_titre_texte">
<p> 3 perles identiques</p>
<p> 1 euro</p>
</div>
</div>
<div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
<div class="col-md-12" style="padding-right: 5px;padding-left: 5px;padding-top: 5px;background-color: #1fdd4e;">
<select class="form-select" aria-label="2001" onchange="changeQte(this);" style="padding-top: 0.375rem; padding-right: 0rem; padding-bottom: 0.375rem; padding-left: 0rem; ">
<option selected value="1">1 sachet</option>
<option value="2">2 sachets</option>
<option value="3">3 sachets</option>
<option value="4">4 sachets</option>
<option value="5">5 sachets</option>
<option value="6">6 sachets</option>
<option value="7">7 sachets</option>
<option value="8">8 sachets</option>
<option value="9">9 sachets</option>
<option value="10">10 sachets </option>
</select>
<p style ="font-size: 1rem;background-color: #1fdd4e;"><strong>dans le panier</strong></p>
</div>
<div class="row mt-4">
<div class="form-check">
<input class="form-check-input 2001" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>
<label class="form-check-label" for="case_01"> remise de 50% </label>
</div>
</div>
</div>
<div class="col-md-12 text-end">
<a style="cursor:pointer;" data-nom="2001" data-prix="1.00" data-qte="1" data-checkbox="2001" class="btn btn-primary ajouter-panier" onclick="ouvreMaJolieAlert(event);">ajouter au panier</a>
</div>
</div>
voici ce que j'ai fait et qui ne fonctionne pas bien a causs du onclick
<div class="row mt-12">
<div class="col-md-12">
<p class="card-text centrer_titre_texte">Perle de 2 mm</p>
<div class="centrer_titre_texte">
<p> 3 perles identiques</p>
<p> 1 euro</p>
</div>
</div>
<div class="row mt-12" style="display: block;margin-left: auto;margin-right: auto;padding-left: 0px;padding-right: 0px;">
<div class="col-md-12" style="padding-right: 5px;padding-left: 5px;padding-top: 5px;background-color: #1fdd4e;">
<select class="form-select btn btn-primary ajouter-panier" aria-label="2001" onchange="changeQte(this);" style="cursor:pointer;" data-nom="2001" data-prix="1.00" data-qte="1" data-checkbox="2001" onclick="ouvreMaJolieAlert(event);"style="padding-top: 0.375rem; padding-right: 0rem; padding-bottom: 0.375rem; padding-left: 0rem; ">
<option selected value="1">1 sachet</option>
<option value="2">2 sachets</option>
<option value="3">3 sachets</option>
<option value="4">4 sachets</option>
<option value="5">5 sachets</option>
<option value="6">6 sachets</option>
<option value="7">7 sachets</option>
<option value="8">8 sachets</option>
<option value="9">9 sachets</option>
<option value="10">10 sachets </option>
<option value="11">11 sachets</option>
<option value="12">12 sachets</option>
<option value="13">13 sachets</option>
<option value="14">14 sachets</option>
<option value="15">15 sachets</option>
<option value="16">16 sachets</option>
<option value="17">17 sachets</option>
<option value="18">18 sachets</option>
<option value="19">19 sachets</option>
<option value="20">20 sachets</option>
</select>
<p style ="font-size: 1rem;background-color: #1fdd4e;"><strong>dans le panier</strong></p>
</div>
<div class="row mt-4">
<div class="form-check">
<input class="form-check-input 2001" type="checkbox" data-nom="Option 1" data-prix="-0.50" id="case_01" checked>
<label class="form-check-label" for="case_01"> remise de 50% </label>
</div>
</div>
</div>
<div class="col-md-12 text-end">
</div>
</div>
et le code du onclick
<script type="text/javascript">
function fermeMaJolieAlert(event) {
event.target.parentNode.parentNode.remove();
}
function ouvreMaJolieAlert(event) {
let m;
m = "L'article \"";
m += event.target.getAttribute("data-nom");
m += "\" a bien été ajouté au panier";
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
let e = document.createElement('div');
let s = "";
e.classList.add("maJolieAlert");
s += '<div><p>' + m + '</p>';
s += '<button type="button" onclick="fermeMaJolieAlert(event)">OK</button></div>';
e.innerHTML = s;
insertAfter(e, event.target);
}
</script>