JavaScript e.preventDefault();在表格中不起作用

Question

欢迎来到我的问题。

我正在尝试创建一个注册表单来检查一些事情。我想在提交按钮上创建一个事件监听器，以捕捉一些东西首先，我必须阻止提交表单的默认行为。

这就是我现在卡住的地方。由于某种原因，它似乎不起作用。

我的表格是这样制作的：

                <form id="myform" class="signup-form" onsubmit = "signup()" method="POST">

                    <!-- form header -->
                    <div class="form-header">
                        <h1>Become a Member</h1>
                    </div>
                
                    <!-- form body -->
                    <div class="form-body">
                        <!-- Firstname and Lastname -->
                        <div class="horizontal-group">
                            <div class="form-group left">
                                <label for="username" class="label-title">Username *</label>
                                <input type="text" id="username" class="form-input" placeholder="enter your username" required="required" />
                            </div>
                            <div class="form-group right">
                                <label for="lastname" class="label-title">Confirm Username *</label>
                                <input type="text" id="confirm-username" class="form-input" placeholder="confirm your username" required="required" />
                            </div>
                        </div>
            
                        <!-- Email -->
                        <div class="form-group">
                            <label for="email" class="label-title">Email*</label>
                            <input type="email" id="email" class="form-input" placeholder="enter your email" required="required">
                        </div>
            
                        <!-- Password and confirm password -->
                        <div class="horizontal-group">
                    
                          <div class="form-group left">
                            <label for="password" class="label-title">Password *</label>
                            <input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
                          </div>
                    
                          <div class="form-group right">
                            <label for="confirm-password" class="label-title">Confirm Password *</label>
                            <input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
                          </div>
                    
                        </div>
            
                    </div>
                    
                    <!-- form footer -->
                    <div class="form-footer">
                        <span><a href="login.html">Are you already a member? Click here to login!</a></span>
                        <button id= "submit-button"type="submit" class="btn">Create</button>
                    </div>
                
                </form>
            </div>

这就是我在 js 文件上创建注册函数的方式：

// sign up
function signup(){
    const fUsername = document.getElementById("username").value;
    const sUsername = document.getElementById("confirm-username").value;
    
    const email = document.getElementById("email").value;
    
    const fPassword = document.getElementById("password").value;
    const sPassword = document.getElementById("confirm-password").value;


    const form = document.getElementById("myform");
    form.addEventListener("submit", (e) => {
        e.preventDefault();
        console.log("I am in eventListener");
        
    });

}

请告诉我我做错了什么！另外我不得不提一下，我发现如果我这样制作表格

<form id="myform" class="signup-form" onsubmit = "signup(); return false;" method="POST">

它不会自动提交，但我想用 eventListener 来完成。提前谢谢你

Answer 1

在页面加载时而不是在触发 submit 事件时调用 signup：

// sign up
function signup() {
  const fUsername = document.getElementById("username").value;
  const sUsername = document.getElementById("confirm-username").value;

  const email = document.getElementById("email").value;

  const fPassword = document.getElementById("password").value;
  const sPassword = document.getElementById("confirm-password").value;


  const form = document.getElementById("myform");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    console.log("I am in eventListener");

  });

}

signup()

<form id="myform" class="signup-form" method="POST">

  <!-- form header -->
  <div class="form-header">
    <h1>Become a Member</h1>
  </div>

  <!-- form body -->
  <div class="form-body">
    <!-- Firstname and Lastname -->
    <div class="horizontal-group">
      <div class="form-group left">
        <label for="username" class="label-title">Username *</label>
        <input type="text" id="username" class="form-input" placeholder="enter your username" required="required" />
      </div>
      <div class="form-group right">
        <label for="lastname" class="label-title">Confirm Username *</label>
        <input type="text" id="confirm-username" class="form-input" placeholder="confirm your username" required="required" />
      </div>
    </div>

    <!-- Email -->
    <div class="form-group">
      <label for="email" class="label-title">Email*</label>
      <input type="email" id="email" class="form-input" placeholder="enter your email" required="required">
    </div>

    <!-- Password and confirm password -->
    <div class="horizontal-group">

      <div class="form-group left">
        <label for="password" class="label-title">Password *</label>
        <input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
      </div>

      <div class="form-group right">
        <label for="confirm-password" class="label-title">Confirm Password *</label>
        <input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
      </div>

    </div>

  </div>

  <!-- form footer -->
  <div class="form-footer">
    <span><a href="login.html">Are you already a member? Click here to login!</a></span>
    <button id="submit-button" type="submit" class="btn">Create</button>
  </div>

</form>

JavaScript e.preventDefault();在表格中不起作用

JavaScript e.preventDefault(); does not work in form

html

javascript

preventdefault