JS Radio button values only show for 2nd page but not for 3rd page

Viewed 21

My 2nd page has two radio buttons that determine if VoIP or Bandwidth and a text field for Email. When I go to the 3rd page I see the values in the URL as expected. But, when I submit a duration I only get the Duration in the URL and not the email or the testType.

I have 5 more pages that I want the parameters to build up over.

html:

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        <form id="myForm" onsubmit="goPFour(event)" method="get">
            <div id="pBFContainer" class="container">
                <div id="bodyFOption1">
                    <label for="testTime">How long would you like the VoIP test to run?<p></label>
                    <input type="radio" class="testD" name="testTime" value="10" checked/>10 Seconds
                    <input type="radio" class="testD" name="testTime" value="20" />20 Seconds
                </div>
            </div>
            <input type="submit" id="subButton" value="Next..." />
        </form>
    </body>
    <script type="text/javascript" src="evalportalp1.js"></script>
</html>

JS:

function goPFour(event) {   
    event.preventDefault();
    const formData = new FormData(event.target);
    const userEmail = formData.get("email");
    const testType = formData.get("testType");
    const testTime = formData.get("testTime")

    if (testTime === "10") {
        //console.log("testTime is 10");
        window.location.href = "evalportalv4.html?" + "email=" + userEmail + "&testType=" + testType + "&testTime=" + testTime;
    } else if (testTime === "20") {
        //console.log("testTime is 20");
        window.location.href = "evalportalv4.html?" + "email=" + userEmail + "&testType=" + testType + "&testTime=" + testTime;
    } else {
        alert("Please pick a valid Option");
    }
    return false;
}
function goPThree(event) {  
    event.preventDefault();
    const formData = new FormData(event.target);
    const userEmail = formData.get("email");
    const testType = formData.get("testType");

    if (testType === "voip") {
        //console.log("testtype is voip");
        window.location.href = "evalportalv3.html?" + "email=" + userEmail + "&testType=" + testType;
    } else if (testType === "bandwidth") {
        //console.log("testtype is bandwidth");
        window.location.href = "evalportalb3.html?" + "email=" + userEmail + "&testType=" + testType;
    } else {
        alert("Please pick a valid Option");
    }
    return false;
}
1 Answers

Maybe because your 2 radio buttons have the same name "testTime"? or maybe there is no "testType" in your HTML.

what do you think?

Related