3 checkbox to update parameters differently-CodePudding

I have a series of if statements to determine location.href parameters. I have never set up something like this before.

I want throughput=, userNum=, and conEff= to update as parameters in the URL. but for some reason, my userNum breaks the JS.

Here is my example:

function goPBFour(event) {
  //something wrong with number of users updating the url
  event.preventDefault();
  const formData = new FormData(event.target);
  const userNum = formData.get("userNum");

  if (document.querySelector("input[name=throughput]").checked) {
    if (document.querySelector("input[name=user]").checked) {
      if (document.querySelector("input[name=conEff]").checked) {
        window.location.href = "evalportalb4.html"   location.search   "&throughput=true"   "&userNum="   userNum   "&conEff=true";
      } else {
        window.location.href = "evalportalb4.html"   location.search   "&throughput=true"   "&userNum="   userNum;
      }
    } else if (document.querySelector("input[name=conEff]").checked) {
      window.location.href = "evalportalb4.html"   location.search   "&throughput=true"   "&conEff=true";
    }
  } else if (document.querySelector("input[name=user]").checked) {
    if (document.querySelector("input[name=conEff]").checked) {
      window.location.href = "evalportalb4.html"   location.search   "&userNum="   userNum   "&conEff=true";
    } else {
      window.location.href = "evalportalb4.html"   location.search   "&userNum="   userNum;
    }
  } else if (document.querySelector("input[name=conEff]").checked) {
    window.location.href = "evalportalb4.html"   location.search   "&conEff=true";
  } else {
    window.location.href = "evalportalb4.html"   location.search;
  }
}

<form id="myForm" onsubmit="goPBFour(event)" method="get">
  <div id="pBFContainer" >
    <div id="bodyFOption1">
      <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
      <p></p>
    </div>
    <div id="bodyFOption2">
      <input type="checkbox" name="user" value="yes" onsubmit="goPBFour(event)" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2"
        max="12" disabled required/> (Evaluate limits 2-12 users)
      <p></p>
    </div>
    <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
  </div>
  <input type="submit" id="subButton" value="Next..." />
</form>
<script type="text/javascript" src="evalportalp1.js"></script>

CodePudding user response：

There are many issues, I tried to rewrite it. This is where I am

Your logic is overcomplicated, AND not DRY (Don't Repeat Yourself)

The more I looked at this, I wondered why not just have the form?

document.getElementById("myForm").addEventListener("submit", function(event) {
  const userNum = document.getElementById("numberUsers").value;
  let loc = "evalportalb4.html"   location.search;
  const throughput = document.querySelector("input[name=throughput]").checked;
  const userChecked = document.querySelector("input[name=user]").checked;
  const conEff = document.querySelector("input[name=conEff]").checked;

  if (userChecked) loc  = "&userNum="   userNum;
  if (throughput)  loc  = "&throughput=true"
  if (conEff)      loc  = "&conEff=true";
  alert(loc); // for debugging
  event.action = loc; // go to the URL
})

<form id="myForm" method="get">
  <div id="pBFContainer" >
    <div id="bodyFOption1">
      <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
      <p></p>
    </div>
    <div id="bodyFOption2">
      <input type="checkbox" name="user" value="yes" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/>      (Evaluate limits 2-12 users)
      <p></p>
    </div>
    <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
  </div>
  <input type="submit" id="subButton" value="Next..." />
</form>
<script type="text/javascript" src="evalportalp1.js"></script>

Just the form should work

<form id="myForm" method="get" action="evalportalb4.html"
  <div id="pBFContainer" >
    <div id="bodyFOption1">
      <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
      <p></p>
    </div>
    <div id="bodyFOption2">
      <input type="checkbox" name="user" value="yes" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/>      (Evaluate limits 2-12 users)
      <p></p>
    </div>
    <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
  </div>
  <input type="submit" id="subButton" value="Next..." />
</form>

CodePudding user response：

There were a few issues with your js, I made it somewhat simpler using less repetition

function goPBFour(event) {
    //something wrong with number of users updating the url
    event.preventDefault();
    const formData = new FormData(event.target);
    const userNum = formData.get("userNum");

    let new_link = "evalportalb4.html"   window.location.search;

    if (document.querySelector("input[name=throughput]").checked) {
      new_link  = "&throughput=true";
    }
    if (document.querySelector("input[name=user]").checked) {
      new_link  = "&userNum="   userNum;
    }
    if (document.querySelector("input[name=conEff]").checked) {
      new_link  = "&conEff=true";
    }

    window.location.href = new_link;
}

There was a missing </div> and I moved the <script></script> to the inside of <body>.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
  <body>
    <form id="myForm" onsubmit="goPBFour(event)" method="get">
      <div id="pBFContainer" >
        <div id="bodyFOption1">
          <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
          <p></p>
        </div>
        <div id="bodyFOption2">
          <input type="checkbox" name="user" value="yes" onsubmit="goPBFour(event)" />Would you like to test capacity performance (concurrent users)?<br />
          How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/> (Evaluate limits 2-12 users)
          <p></p>
        </div>
        <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
        </div>
        <input type="submit" id="subButton" value="Next..." />
       </div>
    </form>
    <script type="text/javascript" src="evalportalp1.js"></script>
  </body>
</html>

While reading about location.href, I came about this https://developer.mozilla.org/en-US/docs/Web/API/Location, maybe it would be better to use location.replace()?

CodePudding user response：

You can make this significantly easier and dynamic by combining the FormData with an URLSearchParams object.

In your example FormData extracts all the values from the form and does that in a smart way by omitting inputs that are either disabled or not checked, so you can already use that instead of checking every individual input.

Get the current URL params by passing location.search to a new URLSearchParams instance. Then loop over the FormData object and pass every key and value to the URLSearchParams object. The result should be the current params in the URL overwritten by the values from the form.

const form = document.querySelector('form');
form.addEventListener('submit', event => {
  event.preventDefault();
  
  const formData = new FormData(event.target);
  const params = new URLSearchParams(location.search);
  
  // Overwrite the params with values from the form.
  for (const [key, value] of formData) {
    params.set(key, value);
  }
  
  // Construct a new URL with the params.
  const url = new URL(location.origin);
  url.pathname = '/evalportalb4.html';
  url.search = params;
  
  // location.href = url;
  console.log(url);
});

// Enabling and disabling of number of users field.
const testUserPerformance = document.querySelector('#testUserPerformance');
const numberOfUsers = document.querySelector('#numberOfUsers');
testUserPerformance.addEventListener('change', event => {
  numberOfUsers.disabled = !event.target.checked;
});

.as-console-wrapper { max-height: 38px; }

<form>
  <div>
    <label>
      <input type="checkbox" name="throughput" value="yes" />
      Would you like to test the user experience throughput?
    </label>
  </div>
  
  <div>
    <label>
      <input id="testUserPerformance" type="checkbox" name="user" value="yes" />
      Would you like to test capacity performance (concurrent users)?
    </label>
  </div>
  
  <div>
    <label>
      How many Users:
      <input id="numberOfUsers" type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/>
    </label>
  </div>
  
  <div>
    <label>
      <input type="checkbox" name="conEff" value="yes" />
      Would you like to test connection efficiency?
    </label>
  </div>
  
  <button>submit</button>
</form>