div select onlick button

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Back End Developer

Als Back End developer bij KUBUS houd je je bezig met het ontwikkelen van de (web)applicatie en services van BIMcollab. Je hebt een focus op de back end van onze software, daarvoor werken wij hoofdzakelijk met C# en .NET. Wij hanteren een full-stack benadering, wat betekent dat je naast de back-end ook meehelpt bij andere onderdelen van de code. Als softwarebedrijf bevindt KUBUS zich in een unieke positie. We bouwen aan onze eigen producten die wereldwijd door tienduizenden gebruikers worden gebruikt. Ons bedrijf heeft precies de juiste grootte: groot genoeg om echt impact te maken in de markt, maar klein

Bekijk vacature »

.NET Developer te Naarden

Bedrijfsomschrijving Voor mijn klant ben ik op zoek naar een .NET Developer om het huidige team te komen versterken. Deze organisatie bevindt zich in de logistieke sector, en zij hebben een eigen ERP systeem ontwikkeld dat zij inzetten ter optimalisatie van de logistieke processen van haar eindklanten. Deze organisatie bestaat inmiddels al ruim 20 jaar, waarbij zij een duidelijke missie hebben, namelijk: het werk van de eindklant makkelijker maken door de systemen die zij leveren. Ze werken over heel de wereld, wat deze organisatie een echte internationale speler maakt. Binnen de organisatie kenmerken ze zich door een dynamische en professionele

Bekijk vacature »

Front-end developer (Medior/Senior)

Functie Het front-end team bestaat momenteel uit 4 collega’s en is hard aan het groeien! Samen leveren jullie een essentiële bijdrage aan de applicaties die ze voor hun klanten realiseren. Je werkt in het front-end team samen met de back-end teams en product owners om te zorgen dat de applicaties een fijne gebruikerservaring opleveren. Jouw expertise zorgt ervoor dat de juiste keuzes gemaakt worden qua techniek en ontwerp, van back-end tot aan gebruiker. In samenspraak met je team bepalen jullie de beste keuze voor techniek. Ook is er altijd ruimte om nieuwe technieken te ontdekken. Eisen • Je hebt gedegen

Bekijk vacature »

Applicatieontwikkelaar Java EE

Bedrijfsomschrijving De IV- organisatie van de Belastingdienst is verantwoordelijk voor en verzorgt de ICT- voorzieningen. Het merendeel van de applicaties wordt op dit moment door de IV- organisatie zelf ontwikkeld, onderhouden en beheerd in het eigen data center. Naast de zorg voor continuïteit op de massale heffing- en inningsprocessen die plaatsvinden binnen een degelijke, stabiele omgeving, wordt er tevens volop gewerkt aan modernisering van het IV- landschap. Dit gebeurt deels intern door gebruik te maken van de expertise die intern aanwezig is, maar ook door het aantrekken van (kant-en-klaar) oplossingen en expertise uit de markt. Functieomschrijving De afdeling IV –

Bekijk vacature »

.NET developer

Functie Als junior .NET Developer start jij in een team met 15 developers. In het team is er genoeg senioriteit om ervoor te zorgen dat jij de juiste begeleiding krijgt. Jij begint als eerst alle software pakketten en processen eigen te maken. Vervolgens ga jij deze software programmeren, onderhouden en testen. Ook ga jij research doen naar nieuwe mogelijkheden en zoek jij uit hoe je dit kan implementeren. Jullie werken intern op project basis en afhankelijk van het project werken jullie wel of niet iedere ochtend met een standup. 50% van jullie werkzaamheden is maatwerk en de overige 50% is

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

Senior Front-end developer

Functie Als front-end developer ga je aan de slag voor verschillende klanten, waarbij veel rekening wordt gehouden met waar je woont (dit is altijd binnen het uur), en word er gezocht naar een organisatie die past bij jou. Zowel qua persoonlijke ambities als de technische aansluiting. De opdrachten duren gemiddeld 1 à 2 jaar maar dit hangt ook af van je wensen. Je werkt in een teamverband voor een klant en zult nauw samenwerken met zowel eigen collega’s als die bij de klant werkzaam zijn. Ze zijn op zoek naar een technische front-end developer die ruime ervaring heeft in één

Bekijk vacature »

High level C++ QT Developer

Vacature details Vakgebied: Software/IT Opleiding: Senior Werklocatie: Eindhoven Vacature ID: 13486 Introductie Would you like to be involved in every aspect of software development for our exceptional products, from specification and design to testing and integration? If you're passionate about software development and eager to apply your programming skills to create customer-focused deliverables, then this is the perfect chance for you to expand your expertise. You can become a member of our Machine Control department's data-driven development team, where you'll design and build software solutions that optimize machine productivity. As a senior software design engineer, you'll participate in all phases

Bekijk vacature »

Front end developer React

Functie Wij zijn van origine een wordpress bureau, maar sinds 2006 zijn wij dit wel redelijk ontgroeid. Naar mate de jaren verstreken zijn we gegroeid in omvang, maar ook in de complexiteit van opdrachten waarin wij onze klanten kunnen bedienen. Momenteel bestaat onze organisatie uit 4 front end developers, 12 back end developer 3 projectmanagers en een 2 koppig management. Wij zijn een hele informele, bijna familiaire organisatie. Geen strak pak of overhemd, nee gewoon dragen waar jij je prettig bij voelt. De gemiddelde leeftijd ligt tussen de 25 en 30 en wij doen er veel aan om onze hechte

Bekijk vacature »

.NET developer

Wat ga je doen als Full stack .NET developer Microsoft 365? Je stelt je op als sparringpartner voor het team en PO over toekomstige functionaliteiten, architectuur en mogelijke nieuwe producten. Je bent mede-verantwoordelijk voor het vertalen en omzetten van een user story in een passend technisch design. Je implementeert functionaliteiten op basis van een technisch design en user story. Je bent mede-verantwoordelijk voor het beheer van Azure DevOps, waaronder het beheer van GIT, Build Pipelines, Release Pipelines en geautomatiseerde testen. Hier herken jij jezelf in Hbo werk- en denkniveau of hoger aangevuld met relevante certificeringen en/of cursussen; Minimaal 3 jaar

Bekijk vacature »

.NET developer

Functie Voor jou als junior .NET ontwikkelaar staat er een flinke uitdaging klaar bij dit bedrijf waar jij veel van kan gaan leren. Zo willen zij een flinke uitbreiding doen op het webbased gedeelte dat zij nu hebben en willen zij het standaard deel gaan moderniseren. Jouw team is dan ook op zoek naar een junior .NET ontwikkelaar die het leuk vindt om op basis van research en development aan de slag te gaan. Jouw mening telt mee als het gaat om hoe en met wat deze applicaties gebouwd en herschreven gaan worden. Jouw functie bij dit bedrijf gaat dan

Bekijk vacature »

Java Developer

Java Developers opgelet! Bij Luminis zijn ze opzoek naar jou. Lees de vacature en solliciteer direct. Luminis is een software- en technologiebedrijf met meerdere vestigingen. Vanuit deze vestigingen werken 200 professionals aan technisch hoogwaardige oplossingen voor klanten zoals KLM, Nike en Bol.com. Ook ontwikkelt Luminis eigen oplossingen op het gebied van cloud, Internet of Things, data intelligence, e-sports en e-learning. Luminis onderscheidt zich door aantoonbaar voorop te lopen in technologie en innovatie. Luminis heeft drie kernpunten die verankerd zitten in alles wat we doen: het omarmen van nieuwe technologie, meesterschap en kennis delen. Functiebeschrijving First things first! Het is belangrijk

Bekijk vacature »

Junior .NET developer

Functie Als junior .NET ontwikkelaar start jij in een ontwikkelteam met 7 .NET developers. In ons team werken er drie senior .NET developer, twee medior .NET developers en twee junior .NET developers. Er is dan ook genoeg senioriteit in ons team om jou te kunnen bieden wat jij nodig hebt! Wij werken in scrum en hebben drie wekelijkste sprints. Daarnaast doen wij minimaal vier keer per jaar een release. Ons platform is ontzettend complex en groot. Het is dan ook in het begin belangrijk dat jij de processen gaat begrijpen. Jij krijgt dan ook een cursus om beter te begrijpen

Bekijk vacature »

Back end developer PHP

Functie Met een complex en uitgebreid e-commerce platform, een eigen PIM-systeem en eigen scan applicatie – krijg jij dagelijks te zien hoe jouw werk gebruikt wordt door miljoenen gebruikers. En we staan qua development pas in de startblokken, aangezien er nog meerdere projecten op de plank liggen te wachten! Ons huidige development team bestaat uit 8 programmeurs. Er wordt dagelijks gereflecteerd op geschreven code, Scrum taken en kennisdelen onderling is een must. Onze voertaal binnen ons team is Engels, dit omdat wij twee internationale collega’s hebben. Ons huidige “IT Landschap” bestaat voornamelijk uit allerlei losse onderdelen die individueel, maar ook

Bekijk vacature »

Embedded Software Developer

Functie omschrijving Ben jij een Embedded Software Developer die affiniteit heeft met de allernieuwste technieken? Voor een mooi softwarebedrijf in omgeving Gouda zijn wij op zoek naar een Embedded Software developer. Binnen deze rol houdt jij je bezig met alle werkzaamheden die nodig zijn om een functionaliteit te bouwen. Denk aan ontwerpen, architectuur, programmeren en algoritmes. Je voert test en validatie werkzaamheden uit bij de implementatie bij de klant. Ben jij enthousiast en een echte team player? Lees dan snel verder en laat wat van je horen! Bedrijfsprofiel Onze opdrachtgever bestaat uit een groot aantal creatieve en ambitieuze ontwikkelaars. Ze

Bekijk vacature »
Hendry huisman

hendry huisman

16/08/2022 15:27:10
Quote Anchor link
Hallo ik heb een vraagje,

ik wil zeg maar een div ellement linken naar een andere pagina
dus heb zeg maar meerdere divs keuze wanneer ik er op klik selecteert die hem en wanneer ik op de submit knop drukt linkt die me naar de andere pagina

div1 gaat naar google.nl
div2 gaat naar spelletjes.nl

enzo enzo nu ben ik aan het kijken jquery maar er kom er niet over uit alleen met de option select kan ik dingen vinden iemand een idee en me er mee kunt helpen ??
 
PHP hulp

PHP hulp

22/07/2024 19:06:11
 
Ivo P

Ivo P

16/08/2022 16:24:30
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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.

Toevoeging op 16/08/2022 16:25:41:

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.
Gewijzigd op 16/08/2022 16:24:53 door Ivo P
 
Hendry huisman

hendry huisman

16/08/2022 17:22:00
Quote Anchor link
ik heb het nu zo maar het werkt niet

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<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 genformeerd 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>
Gewijzigd op 16/08/2022 17:25:19 door hendry huisman
 
- Ariën  -
Beheerder

- Ariën -

16/08/2022 17:37:18
Quote Anchor link
Laad jij überhaupt wel jQuery in?
 
Hendry huisman

hendry huisman

16/08/2022 17:47:06
Quote Anchor link
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

deze bedoel je ?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<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 genformeerd 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>
Gewijzigd op 16/08/2022 18:07:59 door hendry huisman
 
- Ariën  -
Beheerder

- Ariën -

16/08/2022 18:06:51
Quote Anchor link
Ja
 
Hendry huisman

hendry huisman

16/08/2022 18:10:04
Quote Anchor link
misschien zie je de code hier beter

https://pastebin.com/2kjiQs75
 
Ad Fundum

Ad Fundum

16/08/2022 20:58:28
Quote Anchor link
Wat is er mis met de anchor-tag?
 
Hendry huisman

hendry huisman

16/08/2022 21:02:22
Quote Anchor link
anchor-tag is niet meer in gebruik
 
Ad Fundum

Ad Fundum

16/08/2022 23:24:43
Quote Anchor link
Owh ja joh? Volgens wie dan wel?
 
Ozzie PHP

Ozzie PHP

17/08/2022 00:04:01
Quote Anchor link
>> 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?
 
Ivo P

Ivo P

17/08/2022 09:18:59
Quote Anchor link
<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"?
 
Hendry huisman

hendry huisman

17/08/2022 23:55:04
Quote Anchor link
@ivop ik heb deze script nu appart in php bestand gedaan maar daar werkt die ook niet

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>
 
Ozzie PHP

Ozzie PHP

18/08/2022 01:15:27
Quote Anchor link
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?
 
Ad Fundum

Ad Fundum

18/08/2022 16:10:31
Quote Anchor 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?
 
Ivo P

Ivo P

18/08/2022 16:23:30
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.