0

I have my form set to run a function and this function will change the href to the next page based on the Radio buttons selection. for some reason, the value is not being submitted, and when it does submit it's only coming up as VoIP.

evalportalp1.html:

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        <form id="myForm" onsubmit="goPThree(event)" method="get">
            <div id="pBFContainer">
                <div id="bodyFOption1">
                    <label for="email">Enter email address for service confirmation:<p></label>
                    <input type='email' id='inputEmail' name='email' minlength="10" size="70" required></input>
                </div>
                <div id="bodyFOption2">
                    <label for="testType">Choose the test theme for your evaluation:<p></label>
                    <input class="optionT" type='radio' name='testType' value='voip' checked>VoIP Readiness<p>
                    <input class="optionT" type='radio' name='testType' value='bandwidth'>Bandwidth quality, user experience, throughput, and capacity.<br><br>
                </div>
            </div>
            <input type="submit" id="subButton" value="Next..." />
        </form>
    </body>
    <script type="text/javascript" src="evalportalp1.js"></script>
</html>

evalportalp1.js:

var ls = window.location.search;
var qs = new URLSearchParams(ls);
var testType = qs.get("testType");

function goPThree(event) {
    event.preventDefault();

    switch (testType) {
        case "voip":
            console.log("testtype is voip");
            window.location.href = "evalportalv3.html" + ls;
        case "bandwidth":
            console.log("testtype is bandwidth");
            window.location.href = "evalportalb3.html" + ls;
        default:
            alert("Please pick a valid Option");
        }

    return false;
}
mastaSabin
  • 131
  • 1
  • 7
  • `goPThree` doesn't get the selected radio button. `testType` is the selection from the URL query parameters. – Barmar Jun 24 '22 at 22:00

1 Answers1

0

You need to get the value of the testType field whenever you submit. Otherwise you would just be reading the value thats currently in the URL.

function goPThree(event) {
  event.preventDefault();

  const formData = new FormData(event.target);
  const testType = formData.get("testType");

  switch (testType) {
    case "voip":
      console.log("testtype is voip");
      window.location.href = "evalportalv3.html" + ls;
    case "bandwidth":
      console.log("testtype is bandwidth");
      window.location.href = "evalportalb3.html" + ls;
    default:
      alert("Please pick a valid Option");
  }

  return false;
}
Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32
  • I don't understand, that ends up resulting in all the switch cases happening. I am starting to understand it's not with my form setup, it's how my function is set up? – mastaSabin Jun 24 '22 at 22:11
  • Yes, it's about what the function executes. The function should read the values from the form at the moment that you submit and perform the logic based on that data. – Emiel Zuurbier Jun 24 '22 at 22:36
  • i see, now if i wanted to keep note of the parameters until the "final page" is there a suggested way to "append" them to the URL? the example i used here works but i want something easyer to manage if possible: `window.location.href = "evalportalv3.html?" + "email=" + userEmail + "&testType=" + testType;` – mastaSabin Jun 24 '22 at 23:19
  • Sure, but this seems like a new question. Please create one, then I'll be able to give an answer with a code example. – Emiel Zuurbier Jun 24 '22 at 23:28
  • i have posted it here if you dont mind taking a look: https://stackoverflow.com/questions/72750731/js-radio-button-values-only-show-for-2nd-page-but-not-for-3rd-page – mastaSabin Jun 25 '22 at 01:34