Form data from one HTML page to another

Question

I have to pass form data from one HTML page (test.html) to another (test1.html) using Java Script. PHP cannot be used as we have not studied that yet and are not allowed to do so. I am able to pass and print the data but it is getting printed on the same page (test.html), whereas, I want to print it on test1.html. Can you please help me in finding what the issue is? I have attached both the HTML code and the Javascript.

<body>
    <form onsubmit="results();" action="test1.html" method="get">
        What is your name?
        <input id="f1" type="text" name="name" required /><br />
        What is your Father Name?
        <input id="f2" type="text" name="fname" required />
        Gender:
        <select name="gender">
            <option id="m" value="Male" selected>Male</option>
            <option id="f" value="Female">Female</option>
            <option id="o" value="Others">Other</option>
        </select>
        Date of Birth*: <br />
        <input type="date" id="b1" name="bday" required><br /><br />
        <input id="submit" type="submit" />
    </form>
    <script src="./response.js"></script>
</body>

Java Script:

function results() {
    var name = document.getElementById('f1').value;
    var fname = document.getElementById('f2').value;
    if (document.getElementById('m').selected) {
        gender = document.getElementById('m').value;
    }
    else if (document.getElementById('f').selected) {
        gender = document.getElementById('f').value;
    }
    else {
        gender = document.getElementById('o').value;
    }
    var dob = document.getElementById('b1').value;
    document.write("Here is the Summary of Your Results");
    document.write("Your Name Is: ");
    document.write(name + "<br/>");
    document.write("Your Father Name Is: ");
    document.write(fname + "<br/>");
    document.write("Your Gender Is: ");
    document.write(gender + "</br>");
    document.write("Your Date of Birth Is: ");
    document.write(dob + "</br>");

I'd suggest using query strings, and parsing them in a local script on `test1.html`. — Jack Bashford, Mar 03 '19 at 07:23

score 1 · Answer 1 · answered Mar 03 '19 at 07:34

You should remove the onsubmit event from the form and in html1.html file you can use URLSearchParams which is simple to get the query params from the url

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

Form data from one HTML page to another

1 Answers1