Adding an event listener to a button when submitting a form

Question

I am following this tutorial https://www.learnwithjason.dev/blog/get-form-values-as-json/ but I have come across an issue in the first step of the tutorial (Step 1: Add a Listener to the submit Event for the Form). I am trying to make a function which gets the result of a button when it is clicked. It should return the data as a JSON. I have this code so far in my JavaScript file:

const handleFormSubmit = event => {  
    event.preventDefault();

    const data = {};

    const dataContainer = document.getElementsByClassName('results__display')[0];

    dataContainer.textContent = JSON.stringify(data, null, "  ");
}

const form = document.getElementsByClassName('contact-form')[0];
form.addEventListener('submit', handleFormSubmit);

Error: questionnaireGetData.js:4 Uncaught TypeError: Cannot read property 'addEventListener' of undefined at questionnaireGetData.js:4

QuestionnaireGetData is the name of the javascript file.

This is my HTML file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="js/questionnaire.js"></script>
    <script src="js/questionnaireGetData.js"></script>

    <title>Questionnaire</title>
</head>

<body>


<div id="outside">

    <form class="contact-form">
        <header>
            <ul id="data"></ul>
            <div id="radioButton"></div>
            <div id="checkbox"></div>
        </header>

        <nav class="navbar">
            <ul id="navbar-nav">
                <li><button class ="backBtn"
                            onclick="window.location.href = './index.html';"
                            type="button"> Back
                    </button>
                </li>

                <li><button class="backBtn" id="submit"
                            type="button">Submit
                    </button></li>
            </ul>
        </nav>
    </form>

</div>
</body>
</html>

I am currently getting an error in my console about this line:

form.addEventListener('submit', handleFormSubmit);

I don't have much experience with JavaScript and I can't figure out what i am doing wrong.

`questionnaireGetData.js:4 Uncaught TypeError: Cannot read property 'addEventListener' of undefined at questionnaireGetData.js:4` QuestionnaireGetData is the name of the javascript file. — Min Tae, Jun 06 '20 at 19:54
Try giving type="submit" instead of type="button" in your button tag. — Nish, Jun 06 '20 at 20:00
The form doesn't exist yet at the time your javascript runs in the `` — charlietfl, Jun 06 '20 at 20:05
One more point, you need to add your script at the end of your HTML code. — Nish, Jun 06 '20 at 20:06
@Nish if use type=submit will also need to prevent the default submit of form — charlietfl, Jun 06 '20 at 20:06
@charlietfl yes true, I think issue is with the placement of script. It should be loaded in end. — Nish, Jun 06 '20 at 20:07
@Nish Just changed it, the button wasn't working before the change but it seems to be working now. — Min Tae, Jun 06 '20 at 20:08
@charlietfl Thank you very much! The problem is solved, i don't get the error anymore. — Min Tae, Jun 06 '20 at 20:08

Adding an event listener to a button when submitting a form

0 Answers0