How to add option value to url

Question

I am working on a calculator tax.

I wanted to receive the selected values of that was redirected to the url value, so that I could for example send someone a link to the values that I have chosen, so it does not have to set them again only to be had when you start link.

http://kalkulator.atrocki.pl/calculator/index.html

 <div class="styled-select">
        <h1>Vat</h1>
        <select id="vat">
      <option value='0'>0%</option>
      <option value='0.08'>8%</option>
      <option value='0.23'>23%</option>
      <option value="other">Add another VAT value..</option>
    </select>
        <input type="text" class="vatInput" id="vatInputId" placeholder="Vat w %">
    </div>
    <div class="styled-select">
        <h1>tax 2</h1>
        <select id="tax">
              <option value="0">0%</option>
              <option value='0.18'>18%</option>
              <option value='0.19'>19%</option>
              <option value='0.32'>32%</option>
              <option value="other">Add another TAX value..</option>
          </select>

Add the values as url parameters (`?value1=1`) and use javascript to automatically populate the form with the given values. — Antony, Jan 26 '17 at 18:41

score 1 · Answer 1 · edited May 23 '17 at 12:33

1

JavaScript has no built in function for handling query string parameters.

It's very easy to do this with whatever back-end language you are using in your server.

If you absolutely must do this with Javascript, check this question:

How to get the value from the GET parameters?

edited May 23 '17 at 12:33

Community

1
1

answered Jan 26 '17 at 20:25

Lucas Borges

140
2
13

Clearly we can access the query string in javascript using built in features. Do you mean that query string handling of this sort is usually done on the back end rather than the front end? Saying 'JS has nothing' for this is a bit misleading. – GantTheWanderer Jan 26 '17 at 20:32
1

@GantTheWanderer What I meant is that there is no built-in _function_ to handle query string parameters. You can construct your own function using built-in features, like in the question I mentioned or in your own answer. Sorry if I wasn't clear enough. – Lucas Borges Jan 26 '17 at 20:39

score 0 · Answer 2 · answered Jan 26 '17 at 20:29

You can parse the query string into a nice object, then look for the key value pair you want.

function parseQuery() {
    var query = {};

    var indexOfQ = window.location.href.indexOf("?");

    if (indexOfQ < 0)
        return null;

    var a = window.location.href.substr(indexOfQ + 1).split('&');
    for (var i = 0; i < a.length; i++) {
        var b = a[i].split('=');
        query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
    }
    return query;
}

function loadQueryString() {

    var query = parseQuery();

    if (!query) return;

    if (typeof query['val'] !== 'undefined') {
        var newSelection = $("<option>", { value: query['val'], text: (Math.floor(parseFloat(query['val']) * 100)) + '%'});
        $('select').prepend(newSelection);
    }
}

loadQueryString();

How to add option value to url

2 Answers2