Member Avatar for tipsydesign

I have a small javascript program that basically asks a user 60 questions. Each question answer a or b, and right now it has it set up for an onclick, the variables associated with each answer increase one. The problem I have obviously, is if the person clicks on one, then changes the answer, both variables are increased. I want to change it to become an onsubmit type situation if that is possible. Is it? or what is the alternative?

btw. im new to javascript if you couldn't tell :cheesy:

-Tipsy-

  • 3 Contributors
  • 2 Replies
  • 185 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by beckerc

Dani AI

Generated

Short answer: yes — don’t increment counters on each click. Either record each question’s current value and compute totals when the user submits, or track previous selections so changing an answer adjusts the counts instead of double-counting.

As described, the problem comes from treating clicks as final events. As noted you can call form.submit() from a click handler, but — as warned — submitting after every click is bad UX and wasteful. The usual, simple fixes are:

  • Recommended (simplest): use radio inputs (one named group per question) and count the checked values only when the form is submitted. Example pattern:
<form id="quiz">
  <!-- radio groups named q1..q60 with values "a" or "b" -->
</form>

<script>
const form = document.getElementById('quiz');
form.addEventListener('submit', function (e) {
  e.preventDefault();
  let a = 0, b = 0;
  const fd = new FormData(form);
  for (let i = 1; i <= 60; i++) {
    const v = fd.get('q' + i);
    if (v === 'a') a++;
    else if (v === 'b') b++;
  }
  alert('A: ' + a + '  B: ' + b);
});
</script>
  • Alternative (live tally): listen for change on the form, keep an answers array (length 60) and update that question’s slot. When a new choice is made, decrement the old choice’s counter (if any) and increment the new one:
const answers = Array(60).fill(null);
const counts = { a: 0, b: 0 };

form.addEventListener('change', function (e) {
  const el = e.target;
  if (!el.name || !el.name.startsWith('q')) return;
  const idx = parseInt(el.name.slice(1), 10) - 1;
  const prev = answers[idx];
  if (prev) counts[prev]--;
  counts[el.value]++;
  answers[idx] = el.value;
  // update UI with counts
});

Quick tips: use proper name groups for radios, pair each input with a <label> for accessibility, and only send the final results to your server (unless you intentionally want incremental saves).

Recommended Answers

All 2 Replies

Member Avatar for jwenting

you can in your javascript (which is triggered on onclick in your case) do a submit of the form by simply calling the submit() function on the form.

Member Avatar for beckerc

that would work, but it will cause the form to submit after each answer and depending on the users connectin, that could be very time consumeing.

Are you using any backend processing? If so, I would simply name all your form elements so that you know what question they relate to and then process the completed form once submitted.

Other than that, you could use some sort of string concantenation and then try to process the string by loading into an array (each time someone chnges thier mind, your string would contain a second or 3rd entry for that question, you only want the last answer for any given question, so you set the array with an equal number of elements and use the question number to know what element to set (rememebr arrays often start at 0 so you many need question number -1) then process your array....

hope that helps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.