Question 420701 in Html Question posted in
Some basic documentation can be found here.

HTML a href onlick and parameter substitution without JQuery

I have the following HTML:

<a href="https://datasite.com/data/?search=Datapoints+3-4%3B+Datapoints+4-5&version="
  onclick="location.href=this.href + selectedVersion; return false;">Datapoints 3-4; Datapoints 4-5</a>

A <select> tag returns a string for "selectedVersion".

This is working. I need to add another OPTIONAL parameter to the url when a CheckBox is checked.

I added an <input type="checkbox" onclick="printClick()"> which returns a string for "printableVersion"

  var printableVersion;
  function printClick() {
    var checkBox = document.getElementById("printCheckbox");
    if (checkBox.checked == true){
      printableVersion = "&interface=print";
    } else {
      printableVersion = "";
    }
  }
</script>

I modified the href as follows:

<a href="https://datasite.com/data/?search=Datapoints+3-4%3B+Datapoints+4-5"
  onclick="location.href=this.href + printableVersion + "&version=" + selectedVersion; return false;">Datapoints 3-4; Datapoints 4-5</a>

But neither parameter are added. On this site, I can only use Javascript, not JQuery, ajax, etc.

Tags:

2

Answers


  1. 0

    Try this solution to fix :-
    Update the onclick logic in your tag to use single quotes (‘) for the onclick attribute’s value, as you’re already using double quotes (") inside it.

        <a href="https://datasite.com/data/?search=Datapoints+3-4%3B+Datapoints+4-5"onclick='location.href=this.href + printableVersion + "&version=" + selectedVersion; return false;'>
   Datapoints 3-4; Datapoints 4-5
</a>
    Login or Signup to reply.
  2. 0

    It is generally not a good idea to use inline event handlers.

    You can use event delegation to handle everything you want to handle in a document.

    I would suggest you don’t use a HTMLAnchorElement-element. You can use a simple span or div and use the handler to create location.href from both the version selector and the print checkbox. The basic href can be stored in a data-attribute on the clickable element.

    So, something like:

    document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.dataset.basicHref) {
    let href = evt.target.dataset.basicHref;
    const version = `&version=` + document.querySelector(`#version`).value;
    const printable = document.querySelector(`#printCheckbox`).checked 
      ? `&interface=print` : ``;
    href += version + printable;
    
    // for demo, show actual href
    const result = document.querySelector(`#hrefReport`);
    result.textContent = ``;
    result.insertAdjacentHTML(`beforeend`, `<b>your link</b>:<br>${href}`);
    
    // now you can change location.href to [href];
  }
}
    body { 
  line-height: 1.5rem; 
  label, #searchDatapoints { cursor: pointer; }

  #searchDatapoints:not(#printCheckbox) {
    color: blue;
  
    &:hover {
      text-decoration: underline;
    }
  }
  #hrefReport {
    font: normal 12px monospace, sans-serif;
    white-space: pre;
  }
}
    <div>
  <select id="version">
    <option value="1.0" >version 1.0</option>
    <option value="1.3" >version 1.3</option>
    <option value="1.5" selected>version 1.5</option>
    <option value="2.0">version 2.0 (beta)</option>
  </select>
</div>

<div>
  <span 
    data-basic-href="https://datasite.com/data/?search=Datapoints+3-4;+Datapoints+4-5"
    id="searchDatapoints">
    Datapoints 3-4; Datapoints 4-5
  </span>
  <input type="checkbox" id="printCheckbox">
  <label for="printCheckbox">printable</label>
</div>

<div id="hrefReport"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search