Passing parameters from one HTML page to another

Question

I've 2 pages; notes.html and symptoms.html. In symptoms.html, I've got some sort of rating system. Suppose that user selects 1 out of 0 to 2 scale, then it should be passed to calendar.html. I've at least 10 such ratings in symptoms page.

Code for symptoms page:

<div style="position: absolute; top: 10px; left: 23px;">Acne:</div>

<div class="starbox ghosting autoupdate" style="position: absolute; right: 16px; top: 3px;" id="acne"></div>

<div style="position: absolute; top: 42px; left: 23px;">Backaches:</div>

<div class="starbox ghosting autoupdate" style="position: absolute; right: 16px; top: 38px;" id="back"></div>
<script>
  function saveSymptoms() {
    var a = document.getElementById("acne");
    var b = document.getElementById("back");
    switch (classname = starbox ghosting autoupdate) {
      case 0:
        var one = low;
        break;
      case 1:
        var two = medium;
        break;
      case 2:
        var three = high;
        break;
    }
    var url = "notes.html?Agne=" + a,
      "back=" + b;
    window.location.href = url;
    console.log(url);
    document.getElementById("myButton").onclick = function() {
      location.href = "notes.html";
    }
  }
</script>

Problem faced: The parameters aren't getting passed to the url when clicked on save button.

Expected Result: The output should be something like this: file:///C:/Users/AjayKumar/TizenWorkspace/PTracker/notes.html?acne=low;back=high

My Result: I'm getting this: file:///C:/Users/AjayKumar/TizenWorkspace/PTracker/notes.html?acne=;back=

Firstly, is it a typo in question: `Agne=` ??? And what are you trying to pass? Because `var a = document.getElementById("acne")` returns a DOM node element — A. Wolff, Jan 02 '15 at 16:27

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

var a = document.getElementById("acne");

will return a DOM object – in your case it will return a DIV. The DIV is a collection of a whole bunch of properties – it's like a box with a bunch of useful stuff in it. Right now you're assigning the box itself to the variables a and b; you want to find one of the items in the box (the text of the DIV, I think) and use that instead.

If you expect the text of the DIV to be the string "low", for example, you need to access the innerText property of the DIV. In other words, you'd want something like

var url = "notes.html?Acne=" + a.innerText + "&back=" + b.innerText

You can read about the properties of HTML elements, including the DIV, here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

Your notes.html file is going to need to parse the query string, presumably with javascript; for that, you may want to check out How to get the value from the GET parameters?.

However:

I'd like to suggest that you're going about this with a non-standard, and thus more difficult, approach. It looks like you want the user to make a decision, e.g. whether a value is low, medium, or high. Typically, you'd do something like this:

<form method="post" action="notes.html">
<label>Acne Severity: 
  <select type=select>
    <option value="low">Low</option>
    <option value="medium">Medium</option>
    <option value="high">High</option>
  </select>
</label>
<p><input type="submit" value="Submit"></p>
</form>

This way, you can use the HTML / Javascript FORM object; it's much easier to use for this sort of thing, as it's designed for user inputs, values, and submitting them to other pages.

You might want to check out http://www.quirksmode.org/js/forms.html and https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript for more info.

HTH!

Passing parameters from one HTML page to another

1 Answers1