JavaScript e.preventDefault();形式上不起作用

Posted 2023-05-08

【中文标题】JavaScript e.preventDefault();形式上不起作用

【英文标题】：JavaScript e.preventDefault(); does not work in form

【发布时间】：2021-11-18 14:16:46

【问题描述】：

欢迎回答我的问题。

我正在尝试制作一个注册表单来检查某些内容。 我想在提交按钮上创建一个事件监听器，以捕捉一些东西 首先我要防止提交表单的默认行为。

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

我的表格是这样制作的：

                <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 来做。 提前谢谢你

【问题讨论】：

不要使用onsubmit 属性。为什么要在signup函数inside添加事件监听器？

您是否尝试过 return false indise of eventlistener ？

有注册页面和登录页面。因为我想在这种情况下检查不同的东西，所以我想调用从表单中调用的注册函数和登录函数，我用一个专用的 js 文件检查了它，但它仍然不起作用

Amir 我知道它有效，但我不想那样做如果最后如果我最终这样做，我该如何重定向到其他页面？

从事件处理程序中取出调用。即 onsubmit="注册"

【参考方案1】：

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

// 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>

【讨论】：

我只是按照你说的试了一下，但没有任何改变。我想我会用```return false; ```方式

@BrainlessPOMO 你试过运行我的 sn-p 吗？它似乎有效。

我试过了，我想我知道是我的错。我没有在页面加载时运行脚本