One submit button works on my form the other one refreshes the website while updating the url

user_17903185 0
Viewed 19

Im trying to make a quiz using forms and the top submit button works perfectly while the bottom button does not work it ends up refreshing the page and it says the field selected in the address bar this is for a project for college and im a beginner to JavaScript if someone could help me out and explain how it works that would be great I understand how the script works with one from and one button and what the code does but im confused when it comes to 2 forms

var form = document.querySelector("form");
var log = document.querySelector("#log");
var points = 0;
var q1QuizAns = 0;
var q2QuizAns = 0;

form.addEventListener("submit", function(event) {
  var data = new FormData(form);
  var output = "";
  for (const entry of data) {
    output = output + entry[0] + "=" + entry[1] + "\r";
    q1QuizAns = entry[1];
    q2QuzAns = entry[1];
  };
  log.innerText = output;
  event.preventDefault();
  pointsAdd();
}, false);

function pointsAdd() {
  if (q1QuizAns == 1) {
    points = points + 1;
    logPoints.innerText = points;
  } else if (q2QuizAns == 1) {
    points = points + 1;
    logPoints.innerText = points;
  }
}
<header>
  <ul class="navbar">
    <li><a href="Home.html">Home</a></li>
    <li><a href="Poland.html" class="active">Poland</a></li>
    <li><a href="Russia.html">Russia</a></li>
    <li><a href="Uzbekistan.html">Uzbekistan</a></li>
  </ul>
</header>

<div class="testBody">
  <div class="bodyText">
    <h1>Poland Test</h1>

    <form>
      <p>Please select your preferred contact method:</p>
      <div>
        <input type="radio" id="contactChoice1" name="question1" value="1">
        <label for="contactChoice1">Warsaw</label>
        <input type="radio" id="contactChoice2" name="question1" value="2">
        <label for="contactChoice2">Krakow</label>
        <input type="radio" id="contactChoice3" name="question1" value="3">
        <label for="contactChoice3">Straszyn</label>
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
    <!-------------------------------------------------------------------------->
    <form>
      <p>What is the national animal of Poland</p>
      <div>
        <input type="radio" id="Question2Choice1" name="question2" value="1">
        <label for="Question2Choice1">White-Tailed Eagle</label>
        <input type="radio" id="Question2Choice2" name="question2" value="2">
        <label for="Question2Choice1">Black-Tailed Eagle</label>
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
    <!-------------------------------------------------------------------------->
    <pre id="log">
        </pre>
    <pre id="logPoints"></pre>
    <!-------------------------------------------------------------------------->

  </div>
</div>

forms html javascript
1 Answers
  1. You have TWO forms. so you need an event handler for each
  2. You have ONE log element so I suggest you might want to append the result
  3. Move the preventDefault to the top of the handler to not have a later error submit the form

NOTE: Header ALSO goes in the body (but is irrelevant to your question).

var forms = document.querySelectorAll("form");
var log = document.querySelector("#log");
var points = 0;
var q1QuizAns = 0;
var q2QuizAns = 0;

forms.forEach(form => form.addEventListener("submit", function(event) {
  event.preventDefault();
  var data = new FormData(form);
  var output = "";
  for (const entry of data) {
    output = output + entry[0] + "=" + entry[1] + "\r";
    q1QuizAns = entry[1];
    q2QuzAns = entry[1];
  };
  log.innerText += output;
  pointsAdd();
}))

function pointsAdd() {
  if (q1QuizAns == 1) {
    points = points + 1;
    logPoints.innerText = points;
  } else if (q2QuizAns == 1) {
    points = points + 1;
    logPoints.innerText = points;
  }
}
<div class="testBody">
  <div class="bodyText">
    <h1>Poland Test</h1>

    <form>
      <p>Please select your preferred contact method:</p>
      <div>
        <input type="radio" id="contactChoice1" name="question1" value="1">
        <label for="contactChoice1">Warsaw</label>
        <input type="radio" id="contactChoice2" name="question1" value="2">
        <label for="contactChoice2">Krakow</label>
        <input type="radio" id="contactChoice3" name="question1" value="3">
        <label for="contactChoice3">Straszyn</label>
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
    <!-------------------------------------------------------------------------->
    <form>
      <p>What is the national animal of Poland</p>
      <div>
        <input type="radio" id="Question2Choice1" name="question2" value="1">
        <label for="Question2Choice1">White-Tailed Eagle</label>
        <input type="radio" id="Question2Choice2" name="question2" value="2">
        <label for="Question2Choice1">Black-Tailed Eagle</label>
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
    <!-------------------------------------------------------------------------->
    <pre id="log"></pre>
    <pre id="logPoints"></pre>
    <!-------------------------------------------------------------------------->

  </div>
</div>

user_2957830
Related