Change URL based on input

Question

I've made a calculation (in danish), where the user can see how much they save by moving their insurances to a new company.

However, I need to look into how I can sent the user to the webshop with the products they've clicked on. So if the user clicks on "Car" (in danish "Bil") and "Family" (in danish "Indbo"), the URL in the CTA should change from the static https://www.if.dk/privat/forsikringer to https://www.if.dk/privat/webshop?ifdkws_new=familie,bil . So the parameters after ? should be depend on what the user have clicked. Each product has a name that can be assigned in ifdkws_new.

I'm pretty new to JavaScript, so I'm still learning. However, I need som guideance in what to do, as I find it e bit confusing where to start.

BR Martin

Link to solution: https://codepen.io/madsenfc/pen/ePJGzR

<link rel="stylesheet" href="//cdnsc.azureedge.net/resources/global-css.arc.min-sha2jDVdOjGrwZU6aSsKp-yS9_lE418.css"/>

<div id="fordelApp">
  <div id="container">
    <h1 class="ecmt-text-fat">Hvor meget kan du spare?</h1>
    <strong class="ecmt-text-handwriting">Når du samler dine forsikringer hos os.</strong>

    <div class="toggleRow">
      <button class="toggle" value=10>Bil<span class="togglePlus">+</span></button>
      <button class="toggle" value=5>Indbo<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Hund<span class="togglePlus">+</span></button>
      <button class="toggle" value=5>Hus<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Rejse<span class="togglePlus">+</span></button>
      <button class="toggle" value=1>Ulykke<span class="togglePlus">+</span></button>
      <button class="toggle" value=1>Børn<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Båd<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Campingvogn<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Sommerhus<span class="togglePlus">+</span></button>
      <button class="toggle" value=1>Liv<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>MC<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Trailer<span class="togglePlus">+</span></button>
      <button class="toggle" value=1>Voksen<span class="togglePlus">+</span></button>
      <button class="toggle" value=0>Knallert<span class="togglePlus">+</span></button>
    </div>
    <br/><br/>

    <div id="outcome">
      <div class="containerValue" id="selvrisiko">
        <h1 class="ecmt-text-fat">
          <div id="selvrisikoValue">0 kr.</div>
        </h1>
        <strong class="ecmt-text-handwriting">Selvrisikoopsparing</strong>
      </div>
      <div class="containerValue" id="rabat">
        <h1 class="ecmt-text-fat">
          <div id="rabatValue">0 %</div>
        </h1>
        <strong class="ecmt-text-handwriting">Rabat på alle forsikringer</strong>
      </div>
      <div class="containerValue" id="forsikringstjek">
        <h1 class="ecmt-text-fat">
          <div id="forsikringstjekValue">Årlig</div>
        </h1>
        <strong class="ecmt-text-handwriting">Forsikringssservice</strong>
      </div>

    </div>

  </div>
  <div class="fordelAppCTA ecmt-text-centered" id="2535ce2e-c361-4c1c-878a-182a33bc1245">
    <a href="/privat/forsikringer" target="" class="ecmt-button theme-bg-green">Beregn pris på forsikringer</a>
  </div>
</div>

var totalAmount = 0;
$(document).ready(function() {
  $(".toggle").on("click", function() {
    var value = $(this).val();
    if ($(this).hasClass("selected")) {
      $(this).removeClass("selected");
      totalAmount = parseInt(totalAmount) - parseInt(value);
    } else {
      $(this).addClass("selected");
      totalAmount = parseInt(totalAmount) + parseInt(value);
    }

    console.log(totalAmount);

    if (totalAmount >= 16 && totalAmount !== 20) {
      document.getElementById("selvrisikoValue").innerHTML = "500 kr.";
      document.getElementById("selvrisiko").style.color = "#ffffff";
    } else if (totalAmount === 20) {
      document.getElementById("selvrisikoValue").innerHTML = "200 kr.";
      document.getElementById("selvrisiko").style.color = "#ffffff";
    } else if (totalAmount === 15) {
      document.getElementById("selvrisikoValue").innerHTML = "200 kr.";
      document.getElementById("selvrisiko").style.color = "#ffffff";
    } else if (totalAmount > 4 && totalAmount < 15) {
      document.getElementById("selvrisikoValue").innerHTML = "100 kr.";
      document.getElementById("selvrisiko").style.color = "#ffffff";
    } else {
      document.getElementById("selvrisikoValue").innerHTML = "0 kr.";
      document.getElementById("selvrisiko").style.color = "#9fd0c9";
    }

    if (totalAmount >= 16 && totalAmount !== 20) {
      document.getElementById("rabatValue").innerHTML = "15 %";
      document.getElementById("rabat").style.color = "#ffffff";
    } else if (totalAmount === 20) {
      document.getElementById("rabatValue").innerHTML = "15 %";
      document.getElementById("rabat").style.color = "#ffffff";
    } else if (totalAmount === 15) {
      document.getElementById("rabatValue").innerHTML = "15 %";
      document.getElementById("rabat").style.color = "#ffffff";
    } else if (totalAmount > 4 && totalAmount < 15) {
      document.getElementById("rabatValue").innerHTML = "10 %";
      document.getElementById("rabat").style.color = "#ffffff";
    } else {
      document.getElementById("rabatValue").innerHTML = "0 %";
      document.getElementById("rabat").style.color = "#9fd0c9";
    }

    if (totalAmount >= 16 && totalAmount !== 20) {
      document.getElementById("forsikringstjek").style.color = "#ffffff";
    } else if (totalAmount === 20) {
      document.getElementById("forsikringstjek").style.color = "#9fd0c9";
    } else {
      document.getElementById("forsikringstjek").style.color = "#9fd0c9";
    }
  });
});

Answer 1

First add IDs to the things you want clicked:

<button class="toggle" value=10 id="bil">Bil<span class="togglePlus">+</span></button>
<button class="toggle" value=5 id="indbo">Indbo<span class="togglePlus">+</span</button>

Then add this JavaScript:

var bil = false;
var indbo = false;

document.getElementById("bil").addEventListener("click", function() {
    bil = !bil;
    if (bil && indbo) {
        window.location = "https://www.if.dk/privat/webshop?ifdkws_new=familie,bil";
    }
    else if (bil) {
        window.location = window.location.split("familie,").join("");
    }
    else if (indbo) {
        window.location = window.location.split("car").join("");
    }
})

document.getElementById("indbo").addEventListener("click", function() {
    indbo = !indbo;
    if (bil && indbo) {
        window.location = "https://www.if.dk/privat/webshop?ifdkws_new=familie,bil";
    }
    else if (bil) {
        window.location = window.location.split("familie,").join("");
    }
    else if (indbo) {
        window.location = window.location.split("car").join("");
    }
})

Answer 2

You can easily change the URL in JavaScript with the window.location attribute:

window.location = 'https://www.if.dk/privat/webshop?ifdkws=familie,bil';