尝试使用 javascript 对 html 表单上的数据做出反应

Question

I am not quite sure what is going wrong here. I am not seeing values logged to the console upon selecting the "submit" event on the form.

Here is my html:

<div>
                <form class="submit-film">
                    <p class="email">Email</p>
                    <input class="field" id="email" placeholder="youremail@example.com">
                    <p class="project_link">Link to your project:</p>
                    <input class="field" id="link" placeholder="https://vimeo.com/myfilm">
                    <p class="pw">Password to access film:</p>
                    <input class="field" id="pw" placeholder="(password to access project)"> 
                    <p class="number">How many screeners do you want?</p>
                    <input class="field" id="screenerAmount" placeholder="8 screeners">
                    <p class="please">Please attach a questionaire if you have one preparred:</p>
                    <button class="select">Select file</button>
                    <p class="length">How many minutes is your project?</p>
                    <input class="field" id="minutes" placeholder="15 minutes">
                    <p class="questions">Do you have any additional comments or questions?</p>
                    <input class="field" id="comments" placeholder="(insert comments/questions here)"> 
                    <input type="submit" class="button_type" class="button_type:hover" value="submit"> 
                </form>
            </div>
    </div>
    <script src="wescreen.js"></script>
</body>
</html>

Here is the JavaScript:

const form = document.querySelector('.submit-film'); 

form.addEventListener('.submit', e=> {
    e.preventDefault(); 
    console.log(form.email.value); 
    console.log(form.link.value); 
    console.log(form.pw.value);
    console.log(form.screenerAmount.value); 
    console.log(form.minutes.value); 
    console.log(form.comments.value); 
}); 

Answer 1

All your form elements are missing name attribute.

add them and try, something like this

<input class="field" name="email" id="email" placeholder="youremail@example.com">


console.log(form.email.value); 

Refer Here for a sample demo

Edit 1:

Also some issue in this line

form.addEventListener('.submit', e=> {

It should be submit

form.addEventListener('submit', e=> {

Here is working fiddle

Answer 2

just changed the class to the id and used getelementbyid hope this helps

   <div>
    <form id="submit-film">
        <p class="email">Email</p>
        <input class="field" id="email" placeholder="youremail@example.com">
        <p class="project_link">Link to your project:</p>
        <input class="field" id="link" placeholder="https://vimeo.com/myfilm">
        <p class="pw">Password to access film:</p>
        <input class="field" id="pw" placeholder="(password to access project)">
        <p class="number">How many screeners do you want?</p>
        <input class="field" id="screenerAmount" placeholder="8 screeners">
        <p class="please">Please attach a questionaire if you have one preparred:</p>
        <button class="select">Select file</button>
        <p class="length">How many minutes is your project?</p>
        <input class="field" id="minutes" placeholder="15 minutes">
        <p class="questions">Do you have any additional comments or questions?</p>
        <input class="field" id="comments" placeholder="(insert comments/questions here)">
        <input type="submit" class="button_type" class="button_type:hover" value="submit">
    </form>
</div>
</div>
<script>
    const form = document.getElementById('submit-film');
    console.log(form);
    form.addEventListener('click', e => {
        e.preventDefault();
        console.log(form.email.value);
        console.log(form.link.value);
        console.log(form.pw.value);
        console.log(form.screenerAmount.value);
        console.log(form.minutes.value);
        console.log(form.comments.value);
    }); </script>