5545 sujets

Sémantique web et HTML

[Résolu] Comment modifier l'action d' un select

bonjour a tous
après plusieurs essais je me rends compte que la mise dans le panier avec ajouter
n'est pas très clair pour l utilisateur et qu il doit exécuter deux opérations pour mettre un article dans le panier
d'abord choisir la quantité puis appuyer sur ajouter au panier

j'aurais souhaiter que la mise au panier se réalise juste au moment du choix du select

qui pour m'aider svp merci ou me donner une piste 

<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>

Modifié par flexi2202 (24 Jan 2022 - 10:23)
je viens de faire encore un essai de cette manière
mais cela ne fonctionne pas trop bien
j'ai l impression que le select est un peu perdu 


<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>
	           	            </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>
Sujet clos
Aller à