Replace input value by variable and

Question

I'm trying to make a sort of questionnaire/quiz in javascript for my website. The questionnaire is spread on 5 pages, each page has a question. I want to use the GET method so the URL of each page looks something like that:

(I must keep the GET method because I want to use for something else).

First question: http://website.com/quiz/first?q=1
Second question: http://website.com/quiz/second?q=133
Third question: http://website.com/quiz/third?q=133
Fourth question: http://website.com/quiz/fourth?q=1332
Fifth question: http://website.com/quiz/fifth?q=13324

The user lands on the first page --> get a radio input form --> checks one --> gets redirected to the second page --> etc...

The ?q= is a variable containing the answers, for example ?q=133 means the user picked the following answers:

In the first question, he checked the radio input of the value 1
In the second question, he checked the radio input of the value 3
In the third question, he checked the radio input of the value 3

(so 133 means the user check the 1 for the first question, 3 for the second, 3 for the third.)

I managed to make the variables work:

answPre: gets the previous answer from the form GET (?q=1).
answCurrent: gets the radio input checked from the current page.
urlVal: an combination of the two (answPre+answCurrent)

so I'd like urlVal to be the value that gets transferred from a page to the other. But I don't want to have both urlVal and the "q" value (name of checked radio) in the url.

What's the right thing to do?

can I hide the "q" value from the URL?
or can I "overwrite" the q value and put instead urlVal?

I'm lost and would appreciate any help, thanks for your help and your time!

function displayRadioValue() {

 // var pageURL = window.location.href;
 var fakeURL="website.com/quiz/first?q=1"
  var answPre = fakeURL.substr(fakeURL.lastIndexOf('=') + 1);  //get the previous page's answer.

//get the current page's answer
    var ele = document.getElementsByName('q');
    for(j = 0; j < ele.length; j++) {
      if(ele[j].checked)
      var answCurrent= document.getElementById("demo2").innerHTML = ele[j].value;
    }

  var array = [answPre,answCurrent]; //combine answPre + answNew
  var urlVal = "";
  var i;
   for (i = 0; i < array.length; i++) {
     urlVal += array[i];
   }



document.getElementById("demo1").innerHTML = answPre;
document.getElementById("demo3").innerHTML = urlVal;


//document.getElementById("fquiz").submit();// Form submission

}

<html>
<body>
<h2>second.html</h2>

<b>answPre: </b><span id="demo1"></span><br>
<b>answCurrent: </b><span id="demo2"></span><br>
<b>urlVal: </b><span id="demo3"></span><br>
<!-- <b>final answNew: </b><span id="demo4"></span><br> -->

<hr>

<form id="fquiz" method="GET" action="third.html">

<p>Who are you going with?</p>
  <input type="radio" name="q" value="1" id="yes"
  onClick="javascript: displayRadioValue()">Solo<br>

  <input type="radio" name="q" value="2" id="no"
  onClick="javascript: displayRadioValue()">Couple<br>

  <input type="radio" name="q" value="3" id="no"
  onClick="javascript: displayRadioValue()">Family with kids<br>

  <input type="radio" name="q" value="4" id="no"
  onClick="javascript: displayRadioValue()">Group of friends<br>

<p>(then it takes you to third.html with hopefully this url: ../third.html?q=XX where XX is urlVal)
</form>

</body>
</html>

Not an answer, but note that you do not need to put javascript: before your function names in your onclick attributes. javascript: was only ever needed in href attributes on a tags. — Heretic Monkey
– Heretic Monkey, Commented Oct 1, 2019 at 14:36
I think the query string for your 2nd question is wrong in the example. — wazz
– wazz, Commented Oct 1, 2019 at 16:10
The question is confusing. You say "so I'd like urlVal to be the value that gets transferred from a page to the other. But I don't want to have both urlVal and the "q" value (name of checked radio) in the url." But i thought that's exactly what you want. Can you clarify, with examples? — wazz
– wazz, Commented Oct 1, 2019 at 16:18

Heretic Monkey · Accepted Answer · 2019-10-01 18:43:37Z

I've made a few changes to your code to modernize it a bit.

I moved the binding of the event handlers to the JavaScript from the HTML. Generally speaking I like to keep my HTML about the structure and the JavaScript about the behavior.
I added code to grab the step from the URL in addition to the previous answers.
I used querySelector to retrieve the selected radio button, using the :checked pseudo-selector.
I used join('') on the array of answers to make it easier to read.
In the HTML, I used <p> elements for everything that needed to be in one line, rather than tacking a <br> at the end of each line. That's just a personal preference.
I wrapped the radio buttons and their text in <label> elements. This helps in accessibility and to give a larger target for people to click on (clicking on the entire label checks the radio, rather than just the radio itself).

I also changed the name of the URL parameter to urlVal rather than q, but I'm not sure I understood that part of your question. I'm not using the form submission process at all with this code, relying instead on changing the location directly...

Do note that running the code here on Stack Overflow won't redirect correctly, since of course there's nothing at example.com/quiz/second listening, and Stack Snippets are sandboxed anyway. You'll need to adjust the code for your specific use in any case.

// Use JavaScript to attach event handlers to HTML elements.
document.querySelectorAll('input[name="q"]').forEach(el => el.addEventListener('click', displayRadioValue));

function displayRadioValue() {

  // var pageURL = window.location.href;
  var fakeURL = "example.com/quiz/first?q=1"
  var step = fakeURL.substring(fakeURL.lastIndexOf('/') + 1, fakeURL.indexOf('?'));
  var answPre = fakeURL.substr(fakeURL.lastIndexOf('=') + 1); //get the previous page's answer.

  //get the current page's answer
  // The :checked pseudo-class makes it easier to find the checked radio button
  var el = document.querySelector('input[name="q"]:checked');
  var answCurrent = document.getElementById("demo2").innerHTML = el.value;
  var array = [answPre, answCurrent]; //combine answPre + answNew
  // The join method is easier to use than looping.
  var urlVal = array.join('');

  document.getElementById("demo1").innerHTML = answPre;
  document.getElementById("demo3").innerHTML = urlVal;
  
  switch (step) {
    case 'first': step = 'second'; break;
    case 'second': step = 'third'; break;
    case 'third': step = 'final'; break;
    default: return;
  }
  
  location.href = `example.com/quix/${step}?urlVal=${urlVal}`;
}

.form-group { margin: 0; }

<h2>second.html</h2>

<!-- <br> is a presentational element; better just to split up lines with paragraphs -->
<p class="form-group"><b>answPre: </b><span id="demo1"></span></p>
<p class="form-group"><b>answCurrent: </b><span id="demo2"></span></p>
<p class="form-group"><b>urlVal: </b><span id="demo3"></span></p>
<!-- <p class="form-group"><b>final answNew: </b><span id="demo4"></span></p> -->

<hr>

<form id="fquiz" method="GET" action="third.html">

  <p>Who are you going with?</p>
<!-- <br> is a presentational element; better just to split up lines with paragraphs -->
<!-- Always use <label> elements to label form fields -->
<!-- IDs must be unique to a document. They did not appear relevant here. -->
  <p class="form-group"><label><input type="radio" name="q" value="1">Solo</label></p>
  <p class="form-group"><label><input type="radio" name="q" value="2">Couple</label></p>
  <p class="form-group"><label><input type="radio" name="q" value="3">Family with kids</label></p>
  <p class="form-group"><label><input type="radio" name="q" value="4">Group of friends</label></p>
  <p>(then it takes you to third.html with hopefully this url: ../third.html?q=XX where XX is urlVal)</p>
</form>

This is so clean, thank you so much for your time!! Your notes are valuable and make me realize how much I have to learn. Thanks again!!

Collectives™ on Stack Overflow

Replace input value by variable and

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related