div select onlick button

<button _ngcontent-wnc-c85="" id="debutton" type="submit"


Jouw button is een submit-button. De primaire actie van die button zal zijn om zijn Form te submitten. Dus dat gebeurt en ongeveer gelijktijdig kan hij nog starten met zijn javascript. Maar waarschijnlijk is de browser dan al onderweg naar <form method="post" action=""> (dus een submit naar zichzelf.)

Oplossing: button moet van type=button zijn.

Verder zie ik maar 1x een div met class="selectiediv"?

@ivop ik heb deze script nu appart in php bestand gedaan maar daar werkt die ook niet

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

Reageer eens op mijn vraag:

Ozzie PHP op 17/08/2022 00:04:01

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

Ik deel je ergernis Ozzie.

Aan de andere kant, hoe kan je iemand serieus nemen als die zegt dat HTML niet meer wordt gebruikt?

Er mist een haakje op regel 17.
Dat had je gezien als je in je browser in de console meekijkt. (Meeste browsers is die te vinden via de button F12.

<style>
.selected {
  border: 1px solid #f00;
}
</style>
<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 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>

Zo zonder verdere uitleg, zou het voor de hand liggen om gewoon een <a href="google.com"></a> om je div te zetten.
Maar ik kan me ook voorstellen dat het een layout dingetje is, om een radio button te simuleren en dan na 3 keuzes pas door te linken ovv. de andere opties.

Als niet, dan ligt gewoon de old <a href> voor de hand.