div select onlick button - Forum

Ivo P

16-08-2022 16:24 gewijzigd op 16-08-2022 16:24


<div id="div1" class="selectiediv" data-target="https://google.com">Google</div>
<div id="div2" class="selectiediv" data-target="https://spelletjes.nl">Spelletjes</div>

<button type="button" id="debutton">Go</button>

<script>
$('.selectiediv').on('click', function() {
   // eerst geen selectie:
   $('.selectiediv').removeClass('selected');
   // geklikte element WEL selected:
   $(this).addClass('selected');
});

$('#debutton').on('click', function(){
   var keuze = $('.selectiediv.selected');
   if(keuze.length == 1) {
      var target = $(keuze[0].data('target');
   
      window.location = target;

   }
   else {
      // doe niets of zeg dat ze 1 keuze moeten maken
  }

});
</script>

eventueel kun je ook in je script een lijstje opnemen en dan obv id=div1 de link naar google leggen.

[size=xsmall]Toevoeging op 16/08/2022 16:25:41:[/size]

en met CSS kun je dan zorgen dat de class "selected" optisch duidelijk maakt welke div gekozen is. Bijvoorbeeld met een rode rand er omheen.

h hendry huisman

16-08-2022 17:22 gewijzigd op 16-08-2022 17:25

ik heb het nu zo maar het werkt niet

 
<div _ngcontent-wnc-c85="" class="row basket-addiotional-option-box" style="cursor: pointer;" tabindex="0"> 
<div _ngcontent-wnc-c85="" class="w-100"> 
<div _ngcontent-wnc-c85="" class="selectiediv" data-target="https://google.com"> 
<p _ngcontent-wnc-c85="" class="basket-additional-title float-left">google</p></div> 
<div _ngcontent-wnc-c85="" class="float-right"> 
<span _ngcontent-wnc-c85="" class="right_arrow_basket float-right"></span></div> 
</div> 
</div>

<!---->
<!---->
<!---->
<!----> 
<div _ngcontent-wnc-c85="" class="row basket-addiotional-option-box"> 
<div _ngcontent-wnc-c85="" class="w-100"> 
<div _ngcontent-wnc-c85="" class="custom-padding-horizontal-align float-left basket-data-title-width"> 
<label _ngcontent-wnc-c85="" class="w-100 basket-additional-title float-left"> Graag een betalingsbewijs / factuur <span _ngcontent-wnc-c85="" data-toggle="modal" data-target="#ProofOdPaymentModal" class="weight-tooltip"></span></label> 
</div>  
<div _ngcontent-wnc-c85="" class="float-right"> 
<label _ngcontent-wnc-c85="" for="proofOfPaymentOrInvoice" class="checkbox basket-checkbox-padding"> 
<span _ngcontent-wnc-c85="" class="basket-checkbox-unchecked"></span> 
<input _ngcontent-wnc-c85="" id="proofOfPaymentOrInvoice" type="checkbox" formcontrolname="proofOfPaymentOrInvoice" name="proofOfPaymentOrInvoice" class="select ng-untouched ng-pristine ng-valid"></label> 
</div> 
</div> 
<!----> 
</div> 
<!---->
 </div> 
 </div> 
 <div _ngcontent-wnc-c85="" class="row order-summary my-3"> 
 <div _ngcontent-wnc-c85="" class="col-lg-12 custom-padding"> 
 <p _ngcontent-wnc-c85="" class="summary-label">Overzicht bestelling</p> 
 <p _ngcontent-wnc-c85="" class="summary-padding summary-item w-100 float-left"> 
 <span _ngcontent-wnc-c85="" class="float-left" style="width: 80%;"> België (x1) </span> 
 <span _ngcontent-wnc-c85="" class="float-right basket-order-summary-price"> €6,90 </span> 
 </p> 
 <!----> 
 <!----> 
 <!----> 
 <!----> 
 <p _ngcontent-wnc-c85="" class="summary-padding summary-item w-100 float-left"> btw <span _ngcontent-wnc-c85="" class="float-right basket-order-summary-price">€0,00</span> 
 </p> 
 <!----> 
 <p _ngcontent-wnc-c85="" class="summary-padding summary-total w-100 float-left"> Totaal <span _ngcontent-wnc-c85="" class="order-total float-right">€6,90</span> 
 </p> 
 </div> 
 <!----> 
 <div _ngcontent-wnc-c85="" class="order-confirm-box col-lg-12 padding-order-confirm"> 
 <div _ngcontent-wnc-c85="" class="col-lg-12 custom-padding"> 
 <div _ngcontent-wnc-c85="" class="row m-0"> 
 <div _ngcontent-wnc-c85="" class="confirm-basket-check-width"> 
 <label _ngcontent-wnc-c85="" for="confirm_check_pay" class="checkbox"> 
<span _ngcontent-wnc-c85="" class="basket-confirm-checked"></span> 
<input _ngcontent-wnc-c85="" id="confirm_check_pay" type="checkbox" formcontrolname="acceptedTermsAndConditions" name="acceptedTermsAndConditions" class="select ng-untouched ng-pristine ng-invalid"></label> 
</div> 
<div _ngcontent-wnc-c85="" class="confirm-basket-message-width"> 
<label _ngcontent-wnc-c85="" class="confirm-message-text-basket"> Ik aanvaard de  <a _ngcontent-wnc-c85="" href="javascript:;" class="confirm-message-redtext-basket">algemene voorwaarden voor</a>  pakjes en werd geïnformeerd over de verwerking van mijn persoonsgevens zoals beschreven in de <a _ngcontent-wnc-c85="" href="javascript:;" class="confirm-message-redtext-basket"> privacy beleid</a>  , zoals het gebruik ervan door bpost om mij te informeren over gelijkaardige diensten en acties van bpost (door sociale medien inbegrepen). Je kan je op elk moment via elke e-mail uitschrijven. </label><label _ngcontent-wnc-c85="" class="confirm-message-text-basket"> Eenmaal aangemaakt kan een verzendetiket niet meer worden aangepast, geannuleerd of terugbetaald. Door uw bestelling te bevestigen, gaat u hiermee akkoord en ziet u af van uw <a _ngcontent-wnc-c85="" data-toggle="modal" data-target="#RighttoWithdraw" class="confirm-message-redtext-basket-withdraw"> herroepingsrecht. </a></label> 
</div> 
</div> 
<!----> 
</div> 
</div> 
<!----> 
<!----> 
<div _ngcontent-wnc-c85="" class="col-lg-12 custom-padding"> 
<button _ngcontent-wnc-c85="" id="debutton" type="submit" class="btn btn-large btn-block submit-button button-enabled bastet-pay-button-width">Betaal</button> 
</div> 
</div> 
</div> 
<script>
$('.selectiediv').on('click', function() {
   // eerst geen selectie:
   $('.selectiediv').removeClass('selected');
   // geklikte element WEL selected:
   $(this).addClass('selected');
});

$('#debutton').on('click', function(){
   var keuze = $('.selectiediv.selected');
   if(keuze.length == 1) {
      var target = $(keuze[0].data('target');
  
      window.location = target;

   }
   else {
      // doe niets of zeg dat ze 1 keuze moeten maken
  }

});
</script>

- Ariën -

16-08-2022 17:37

Laad jij überhaupt wel jQuery in?

h hendry huisman

16-08-2022 17:47 gewijzigd op 16-08-2022 18:07


<form method="post" action="">
<div _ngcontent-wnc-c85="" class="row basket-detail-formpadding"> 
<div _ngcontent-wnc-c85="" class="col-lg-8 col-xg-8 col-sm-12 col-md-12"> 
<!----> 
<!----> 
<!----> 
<div _ngcontent-wnc-c85="" tabindex="1"> 
<div _ngcontent-wnc-c85="" class="shadow-box pb-4" id="parcelid-UIFeiBAmRLgtETBDdNO5"> 
<div _ngcontent-wnc-c85="" class="row mx-0 cursor-pointer"> 
<div _ngcontent-wnc-c85="" class="w-100"> 
<input _ngcontent-wnc-c85="" class="d-none" id="up-parcel1"> 
<div _ngcontent-wnc-c85="" class="float-left p-0 fixed-width-heading-basket"> 
<label _ngcontent-wnc-c85="" class="recipient-name-basket"> test de test </label>
 <!----> 
<label _ngcontent-wnc-c85="" class="recipient-address-basket"> 
<span _ngcontent-wnc-c85="" class="diplay-bar-in-small-device">|</span> België <span _ngcontent-wnc-c85=""> (Adres)</span><!----><!----></label><!----></div><div _ngcontent-wnc-c85="" class="float-right p-0"><h5 _ngcontent-wnc-c85="" class="total-price-basket"> €6,90 </h5></div></div></div><!----><div _ngcontent-wnc-c85="" id="basket-item" class="collapse show"><div _ngcontent-wnc-c85="" class="basket-divider"></div><div _ngcontent-wnc-c85="" class="row m-0"><div _ngcontent-wnc-c85="" class="basket-reciever-sender"><div _ngcontent-wnc-c85="" class="form-group pb-3 basket-vertical-grey-line"><div _ngcontent-wnc-c85="" class="row m-0"><label _ngcontent-wnc-c85="" class="basket-title-label float-left">Ontvanger</label><a _ngcontent-wnc-c85="" href="/nl/recipient-detail/parcelid-UIFeiBAmRLgtETBDdNO5"><span _ngcontent-wnc-c85="" class="edit_arrow_sender"></span></a><!----></div><div _ngcontent-wnc-c85="" class="basket-data-description"><p _ngcontent-wnc-c85="" class="word-break">test de test</p><!----><!----><p _ngcontent-wnc-c85="" class="word-break"> KETSSTRAAT 12<br _ngcontent-wnc-c85=""><!----><!----> 2018 ANTWERPEN </p><!----><!----><p _ngcontent-wnc-c85="" style="word-break: break-all;">[email protected]</p><!----><!----><!----></div><!----><!----><!----></div></div><div _ngcontent-wnc-c85="" class="basket-reciever-sender"><div _ngcontent-wnc-c85="" class="form-group pb-3 basket-vertical-grey-line"><div _ngcontent-wnc-c85="" class="row m-0"><label _ngcontent-wnc-c85="" class="basket-title-label float-left">Verzender</label><a _ngcontent-wnc-c85="" href="/nl/sender-detail/parcelid-UIFeiBAmRLgtETBDdNO5"><span _ngcontent-wnc-c85="" class="edit_arrow_sender"></span></a><!----></div><div _ngcontent-wnc-c85="" class="basket-data-description"><p _ngcontent-wnc-c85="" class="word-break">de rikie </p><!----><!----><!----><p _ngcontent-wnc-c85="" class="word-break"> LANGE KIEVITSTRAAT 23<br _ngcontent-wnc-c85=""> 2018 ANTWERPEN </p><!----><p _ngcontent-wnc-c85="" style="word-break: break-all;">[email protected]</p><!----><!----></div></div></div><div _ngcontent-wnc-c85="" class="basket-parcel-summary-main"><div _ngcontent-wnc-c85="" class="form-group basket-summay-main-margin-mobile"><div _ngcontent-wnc-c85="" class="row m-0"><label _ngcontent-wnc-c85="" class="basket-title-label float-left">Overzicht pakje</label><a _ngcontent-wnc-c85="" href="/nl/parcel-detail/parcelid-UIFeiBAmRLgtETBDdNO5"><span _ngcontent-wnc-c85="" class="edit_arrow_sender"></span></a><!----></div><div _ngcontent-wnc-c85="" class="basket-data-description"><div _ngcontent-wnc-c85="" class="row m-0"><p _ngcontent-wnc-c85="" class="basket-data-title-width float-left word-break"><!----><span _ngcontent-wnc-c85=""> België <span _ngcontent-wnc-c85=""> (Adres)</span><!----><!----></span><!----></p><label _ngcontent-wnc-c85="" class="basket-data-cost float-right">€5,70</label></div><div _ngcontent-wnc-c85="" class="row m-0"><p _ngcontent-wnc-c85="" class="basket-data-title-width float-left"> Gewicht: 5-10 kg</p><label _ngcontent-wnc-c85="" class="basket-data-cost float-right">€1,20</label></div><!----><!----><!----><div _ngcontent-wnc-c85="" class="row m-0 mobile-basket-total-margin"><label _ngcontent-wnc-c85="" class="basket-items-total basket-data-title-width float-left">Totaal</label><label _ngcontent-wnc-c85="" class="basket-items-total-cost float-right">€6,90</label></div></div></div></div></div><div _ngcontent-wnc-c85="" class="row weight-block mt-3"><span _ngcontent-wnc-c85="" class="up_arrow_icon cursor-pointer"></span></div><input _ngcontent-wnc-c85="" class="d-none" id="bottom-parcel1"></div><!----></div></div><!----><!----></div><div _ngcontent-wnc-c85="" class="col-lg-4 col-sm-12 col-md-12 margin-basket-match"><div _ngcontent-wnc-c85="" class="row basket-information"> 
  <span _ngcontent-wnc-c85="" class="basket-additiona-button-text">Kies uw bank:</span>
<div _ngcontent-wnc-c85="" class="col-lg-12 custom-padding-basket custom-width-basket"> 
<div _ngcontent-wnc-c85="" class="row basket-addiotional-option-box" style="cursor: pointer;" tabindex="0"> 
<div _ngcontent-wnc-c85="" class="w-100"> 
<div _ngcontent-wnc-c85="" class="float-left basket-data-title-width"> 
<p _ngcontent-wnc-c85="" class="basket-additional-title float-left">Argenta</p></div> 
<div _ngcontent-wnc-c85="" class="float-right"> 
<span _ngcontent-wnc-c85="" class="right_arrow_basket float-right"> 
</span> 
</div> 
</div> 
</div> 
<div _ngcontent-wnc-c85="" class="row basket-addiotional-option-box" style="cursor: pointer;" tabindex="0"> 
<div _ngcontent-wnc-c85="" class="w-100"> 
<div _ngcontent-wnc-c85="" class="selectiediv" data-target="https://google.com"> 
<p _ngcontent-wnc-c85="" class="basket-additional-title float-left">KBC</p></div> 
<div _ngcontent-wnc-c85="" class="float-right"> 
<span _ngcontent-wnc-c85="" class="right_arrow_basket float-right"></span></div> 
</div> 
</div>

<!---->
<!---->
<!---->
<!----> 
<div _ngcontent-wnc-c85="" class="row basket-addiotional-option-box"> 
<div _ngcontent-wnc-c85="" class="w-100"> 
<div _ngcontent-wnc-c85="" class="custom-padding-horizontal-align float-left basket-data-title-width"> 
<label _ngcontent-wnc-c85="" class="w-100 basket-additional-title float-left"> Graag een betalingsbewijs / factuur <span _ngcontent-wnc-c85="" data-toggle="modal" data-target="#ProofOdPaymentModal" class="weight-tooltip"></span></label> 
</div>  
<div _ngcontent-wnc-c85="" class="float-right"> 
<label _ngcontent-wnc-c85="" for="proofOfPaymentOrInvoice" class="checkbox basket-checkbox-padding"> 
<span _ngcontent-wnc-c85="" class="basket-checkbox-unchecked"></span> 
<input _ngcontent-wnc-c85="" id="proofOfPaymentOrInvoice" type="checkbox" formcontrolname="proofOfPaymentOrInvoice" name="proofOfPaymentOrInvoice" class="select ng-untouched ng-pristine ng-valid"></label> 
</div> 
</div> 
<!----> 
</div> 
<!---->
 </div> 
 </div> 
 <div _ngcontent-wnc-c85="" class="row order-summary my-3"> 
 <div _ngcontent-wnc-c85="" class="col-lg-12 custom-padding"> 
 <p _ngcontent-wnc-c85="" class="summary-label">Overzicht bestelling</p> 
 <p _ngcontent-wnc-c85="" class="summary-padding summary-item w-100 float-left"> 
 <span _ngcontent-wnc-c85="" class="float-left" style="width: 80%;"> België (x1) </span> 
 <span _ngcontent-wnc-c85="" class="float-right basket-order-summary-price"> €6,90 </span> 
 </p> 
 <!----> 
 <!----> 
 <!----> 
 <!----> 
 <p _ngcontent-wnc-c85="" class="summary-padding summary-item w-100 float-left"> btw <span _ngcontent-wnc-c85="" class="float-right basket-order-summary-price">€0,00</span> 
 </p> 
 <!----> 
 <p _ngcontent-wnc-c85="" class="summary-padding summary-total w-100 float-left"> Totaal <span _ngcontent-wnc-c85="" class="order-total float-right">€6,90</span> 
 </p> 
 </div> 
 <!----> 
 <div _ngcontent-wnc-c85="" class="order-confirm-box col-lg-12 padding-order-confirm"> 
 <div _ngcontent-wnc-c85="" class="col-lg-12 custom-padding"> 
 <div _ngcontent-wnc-c85="" class="row m-0"> 
 <div _ngcontent-wnc-c85="" class="confirm-basket-check-width"> 
 <label _ngcontent-wnc-c85="" for="confirm_check_pay" class="checkbox"> 
<span _ngcontent-wnc-c85="" class="basket-confirm-checked"></span> 
<input _ngcontent-wnc-c85="" id="confirm_check_pay" type="checkbox" formcontrolname="acceptedTermsAndConditions" name="acceptedTermsAndConditions" class="select ng-untouched ng-pristine ng-invalid"></label> 
</div> 
<div _ngcontent-wnc-c85="" class="confirm-basket-message-width"> 
<label _ngcontent-wnc-c85="" class="confirm-message-text-basket"> Ik aanvaard de  <a _ngcontent-wnc-c85="" href="javascript:;" class="confirm-message-redtext-basket">algemene voorwaarden voor</a>  pakjes en werd geïnformeerd over de verwerking van mijn persoonsgevens zoals beschreven in de <a _ngcontent-wnc-c85="" href="javascript:;" class="confirm-message-redtext-basket"> privacy beleid</a>  , zoals het gebruik ervan door bpost om mij te informeren over gelijkaardige diensten en acties van bpost (door sociale medien inbegrepen). Je kan je op elk moment via elke e-mail uitschrijven. </label><label _ngcontent-wnc-c85="" class="confirm-message-text-basket"> Eenmaal aangemaakt kan een verzendetiket niet meer worden aangepast, geannuleerd of terugbetaald. Door uw bestelling te bevestigen, gaat u hiermee akkoord en ziet u af van uw <a _ngcontent-wnc-c85="" data-toggle="modal" data-target="#RighttoWithdraw" class="confirm-message-redtext-basket-withdraw"> herroepingsrecht. </a></label> 
</div> 
</div> 
<!----> 
</div> 
</div> 
<!----> 
<!----> 
<div _ngcontent-wnc-c85="" class="col-lg-12 custom-padding"> 
<button _ngcontent-wnc-c85="" id="debutton" type="submit" class="btn btn-large btn-block submit-button button-enabled bastet-pay-button-width">Betaal</button> 
</div> 
</div> 
</div>  
 </form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('.selectiediv').on('click', function() {
   // eerst geen selectie:
   $('.selectiediv').removeClass('selected');
   // geklikte element WEL selected:
   $(this).addClass('selected');
});

$('#debutton').on('click', function(){
   var keuze = $('.selectiediv.selected');
   if(keuze.length == 1) {
      var target = $(keuze[0].data('target');
  
      window.location = target;

   }
   else {
      // doe niets of zeg dat ze 1 keuze moeten maken
  }

});
</script>

- Ariën -

16-08-2022 18:06

Ja

h hendry huisman

16-08-2022 18:10

misschien zie je de code hier beter

https://pastebin.com/2kjiQs75

? Onbekende gebruiker

16-08-2022 20:58

Wat is er mis met de anchor-tag?

h hendry huisman

16-08-2022 21:02

anchor-tag is niet meer in gebruik

? Onbekende gebruiker

16-08-2022 23:24

Owh ja joh? Volgens wie dan wel?

Ozzie PHP

17-08-2022 00:04

>> ik wil zeg maar een div ellement linken naar een andere pagina

En waarom wil je dat per se zeg maar met een div en een formulier doen? Waarom niet gewoon via een normale link?