Pass radiobutton value from one html page to another as parameter and extract it on next html page

Question

I am new to HTML. I have written below code to select from one of the option. After selecting one of the radiobutton and clicking the submit button, user should get redirected to exam page with candidate type from radiobutton value being passed in URL which has to be extracted on next page.

Can someone help me with this requirement to pass value and extract it on next page.

<html>
    <head>
        <title>Online Examination Portal</title>
        <h1>Online Examination</h1>
        <script type="text/javascript">
            function get_action(form) {
            form.action = document.querySelector('input[name = "candidateType"]:checked').value;
        }
        </script>
    </head>
    <body>
        <div>Select candidate type from below option:<br><br>
            <div>
                <input type="radio" name="candidateType" value="student">Student
                <br>
                <input type="radio" name="candidateType" value="professional">Professional  
                <br><br>
                <form action="ExamPage.html" method="get"><input type="submit" value="Submit" onclick="get_action(this);"></form>           
                <br><br>
                <form action="RegistrationPage.html" method=post name="form2"><input type="submit" value="Register"></form>
            </div>
        </div>
    </body>
</html>

Possible duplicate of [passing form data to another HTML page](http://stackoverflow.com/questions/14693758/passing-form-data-to-another-html-page) — Trevor, Dec 30 '15 at 15:14

score 2 · Answer 1 · answered Dec 30 '15 at 13:39

You can use either Cookies or LocalStorage, where the LocalStorage is easier to implement, but requires the latest browser, and users may disable cookies for privacy reasons.

Cookies

function setCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

// First Page
setCookie("myinputvalue", document.getElementsByName("candidateType")[0].value, 10);

// Second Page
getCookie("myinputvalue");

LocalStorage

if (typeof(Storage) !== "undefined") {
  // First Page
  localStorage.setItem("myinputvalue", document.getElementsByName("candidateType")[0].value);
  // Second Page
  localStorage.getItem("myinputvalue");
} else {
  // Sorry! No Web Storage support..
  // Use the above cookie method.
}

Pass radiobutton value from one html page to another as parameter and extract it on next html page

1 Answers1

Linked