Render a new page in JS after a form submit

Sozy 0
Viewed 44

I am new to Javascript (like I really know nothing) and I have to program a Picross game for my school. My teachers gave me an HTML home page for the game and I can't touch it. This page has a form with action pointing on itself but with parameters on the URL. Here is the code :

<!doctype html>
<html>

<head>
    <title>Picross editor & player</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="picross.css" type="text/css">
    <script src="picross.js"></script>
</head>

<body>

    <nav>
        <section>
            <h2>Create a grid</h2>
            <form action="picross.html" method="get">
                <input type="hidden" name="edit">
                <table>
                    <tr><td>Lignes :</td><td><input type="number" name="lines" value="10" min="5" max="20"></td></tr>
                    <tr><td>Colonnes :</td><td><input type="number" name="cols" value="10" min="5" max="20"></td></tr>
                </table>
                <input type="submit" value="Create !">
            </form>
        </section>
    </nav>

</body>

</html>

My job is to only work on picross.js and I have no idea how to render a blank page (or a grid) if the form has been submitted because when I try to detect the submit, the HTML page renders just after my catch. I also have to do it on the same page, when no parameters are given it's the home page from my teachers but when the form is submitted, the game opens in the same picross.html but with ?lines=x&cols=y or something like this. Here is what I've tried :

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(e) {
    console.log("catch");
    console.log(e);
}

This writes catch in the console for a tenth of a sencond and then the HTML renders just after. So what I'm looking for is when the form is submitted, the JS code should render a grid (or a blank page, I can work on the grid later) to play the picross game.

Thank for your help

javascript
1 Answers

JavaScript is really easy and fun, you can always google anything you want to make and/or learn in javascript/html or any web technology.

As I understood from your question, you want to open a new window when the button is clicked, so to do that you have to first turn off the default behavior of the form, and to do that you can use the parameter e that passed in the event callback submitted.

JavaScript events

e.preventDefault()

This will prevent the page from reloading.

Next, to open a new window, you can use window object.

Window object.

window.open(....)

Full example: 

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(e) {
    e.preventDefault();
    console.log("catch");
    var myWindow = window.open("", "Yaay", "width=200,height=100");
    myWindow.document.write("<p>Peace begins with a smile</p>");
}
<!doctype html>
<html>

<head>
    <title>Picross editor & player</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="picross.css" type="text/css">
    <script src="picross.js"></script>
</head>

<body>

    <nav>
        <section>
            <h2>Create a grid</h2>
            <form action="picross.html" method="get">
                <input type="hidden" name="edit">
                <table>
                    <tr><td>Lignes :</td><td><input type="number" name="lines" value="10" min="5" max="20"></td></tr>
                    <tr><td>Colonnes :</td><td><input type="number" name="cols" value="10" min="5" max="20"></td></tr>
                </table>
                <input type="submit" value="Create !">
            </form>
        </section>
    </nav>

</body>

</html>

I hope I explained clearly.

Note: Run code snippet might not work, because popups are not allowed.

Nawaf Khalifah0
Related