如何将事件侦听器添加到提交按钮答案

【问题标题】：How to add event listener to submit button如何将事件侦听器添加到提交按钮
【发布时间】：2015-02-04 08:51:41
【问题描述】：

我在使用这个 html 时遇到了很多问题。我正在尝试将事件侦听器添加到提交按钮，以便最终可以更改文档以显示表单信息。问题是，当表单被填满时，按钮监听器什么都不做！（它在 jsfiddle 和其他类似的东西中工作，但不能作为独立文件工作，这让我相信我以某种方式错误地设置了我的文件，可能与脚本标签混淆了）。我尝试了很多事情，包括移动脚本标签，尝试让事件监听器提交表单，输入类型按钮，但仍然没有。有人可以帮忙吗？

我的 HTML：

<!DOCTYPE html>
<html>
<head>
  <title>Form Project</title>
  <style type="text/css" rel="stylesheet">
    #but{text-align:center;}
    td{text-align:right;}
    span{padding=0; margin=0;float:left;}
  </style>
</head>
<body>
 <form id="formId">
  <table border = "1">

    <tr>
      <th>Provide your contact information</th>
      <th>Provide your login access information</th>
    </tr>


    <tr>
      <td><label><span>First Name:</span> <input type = "text" placeholder = "Enter First Name" required/></label></td>
      <td><label><span>Login ID:</span> <input type = "text" placeholder = "type a login ID" required/></label>  </td>
    </tr>


    <tr>
      <td><label><span>Middle Name:</span> <input type="text" placeholder ="type your middle name"/></label></td>
      <td><label><span>Password:</span> <input type="password" placeholder ="password" required/></label></td>  
    </tr>


    <tr>
      <td><label><span>Last Name:</span> <input type="text" placeholder="Last Name" required/></label></td>
      <td id="but"><label><button type="submit" id="displayButton">Display Info</button></label></td>
    </tr> 


    <tr>
      <td><label><span>Street Address:</span> <input type="text" placeholder="address" required/></label></td>
    </tr>


    <tr>
      <td><label for ="Citylist"><span>City:</span>
        <input type = "text" id ="citylist"
        placeholder="Select a city" list = "cities" required/>
        <datalist id= "cities">
          <option value = "Bronx"/>
          <option value = "Brooklyn"/>
          <option value = "Queens"/>
          <option value = "Manahttan"/>
          <option value = "Staten Island"/>
        </datalist>
        </label>
        </td>
    </tr>

    <tr>
    <td><label for ="StateList"><span>State:</span>
        <input type = "text" id ="State"
        placeholder="Select a city" list = "states" required/>
        <datalist id= "states">
          <option value = "New York"/>
          <option value = "New Jersey"/>
          <option value = "California"/>
          <option value = "Virginia"/>
          <option value = "Maine"/>
        </datalist>
        </td>
    </tr>


    <tr>
      <td><label><span>Zip code:</span> <input type="text" placeholder="Type your zipcode" maxlength="5" required/></label></td>
      </tr>

    <tr>
      <td>
        <label><span>Phone</span>
          <input type ="tel" placeholder="(123)456-789"
          pattern="\(\{3}) +\d{3}-\d{4}" required/>
        </label>
      </td>
    </tr>

    <tr>
      <td>
        <label><span>Email:</span>
          <input type="email" placeholder="name@domain.com" required/> 
        </label>
      </td>
    </tr>

    <tr>
      <td>
        <label><span>Birth Date:</span>
          <input type="date" required/>
        </label>
      </td>
    </tr>
  </table>
 </form>
 <script type="text/javascript" src="form.js"></script>

</body>
</html>

我的 JS，仅为事件监听器简化：

var button = document.getElementById("displayButton");
//var form = document.getElementById("formId");
//form.addEventListener("submit",function(){console.log("something1"); return false;},false);
button.addEventListener("click", function(){console.log("something"); return false;},false);

function formDisplay(){
    console.log("check");
}

当没有填写整个表单时它可以工作，但如果填写了所有必填字段，则控制台不会显示“某事”。

【问题讨论】：

没有名字的表单控件不能成功，所以不随表单提交。您的任何表单控件都没有名称，因此不会被提交。
啊，是的，RobG，我确实忽略了这一点。谢谢。
另外，将监听器放在按钮上并不是一个好主意，因为无需单击按钮即可提交表单。把它放在表单的提交处理程序上。此外，您可以显着减少 HTML 示例。
我刚刚做到了@RobG，效果更好。我做了类似 var form = document.getElementById("formId"); form.addEventListener("submit",function(){ alert("something1"); document.writeln("dfsdf"); return false;},false);但是没有显示新信息。您知道如何删除表单并显示新文本吗？
您可以替换表单的 innerHTML，但如果您提交表单，您将不再在该页面上，您将获得一个新的。

标签： javascript html forms addeventlistener

【解决方案1】：

您在控制台中看不到“某些东西”的原因是，当整个表单被填写并按下提交按钮时，它会进入登录页面。这会刷新控制台并删除其中的所有数据。换句话说，一切正常，只是加载新页面会删除控制台中的所有内容。您可以通过用警报替换对 console.log 的调用来检查按钮侦听器是否正常工作。将发生警报呼叫，无论表格是否填写，您都会看到弹出窗口。

button.addEventListener("click", function(){ alert("something"); return false; },false);

这是一个带有工作示例的 jsbin：http://jsbin.com/boxihukuni/1/edit?html,js,output

【讨论】：

啊，是的，现在我明白了。当我单击显示信息时，您是否知道完全删除表格并替换的方法？我试过innerHTML，但这不好。
替换数据还是隐藏表单？

【解决方案2】：

因此，我认为您所涉及的问题是由以下事实引起的：填写所有必填字段后，表单已提交。

如果您按如下方式构建事件侦听器：

button.addEventListener("click", 
    function(e){
        e.preventDefault(); 
        console.log("something"); 
        return false;
    }
,false);

表单不会提交，您应该可以在事件处理程序中执行您需要的任何操作（e.preventDefault() 停止表单提交）。

【讨论】：

【解决方案3】：

我建议使用submit 事件来处理用户无需单击提交按钮即可提交表单的情况。

正如其他人所说，您需要使用evt.preventDefault() 来阻止表单提交。

下面的示例将在允许提交表单之前检查所有内容是否有效。

var form = document.getElementById("formId");
form.addEventListener("submit", function(evt) {
  for(var i = 0; i < form.elements.length; i++) {
    var el = form.elements[i];
    if (!el.checkValidity()) {
      evt.preventDefault();
      console.log('Fix the form!');
      return;
    }
  }
});

#but {
  text-align:center;
}

td {
  text-align:right;
}

span {
  float:left;
  margin=0;
  padding=0;
}

<form id="formId">
<table border="1">
  <tr>
    <th>Provide your contact information</th>
    <th>Provide your login access information</th>
  </tr>
  <tr>
    <td>
      <label><span>First Name:</span> <input type = "text" placeholder = "Enter First Name" required/></label>
    </td>
    <td>
      <label><span>Login ID:</span> <input type = "text" placeholder = "type a login ID" required/></label>
    </td>
  </tr>
  <tr>
    <td><label><span>Middle Name:</span> <input type="text" placeholder ="type your middle name"/></label></td>
    <td><label><span>Password:</span> <input type="password" placeholder ="password" required/></label></td>  
  </tr>
  <tr>
    <td><label><span>Last Name:</span> <input type="text" placeholder="Last Name" required/></label></td>
    <td id="but"><label><button type="submit" id="displayButton">Display Info</button></label></td>
  </tr> 
  <tr>
    <td><label><span>Street Address:</span> <input type="text" placeholder="address" required/></label></td>
  </tr>
  <tr>
    <td><label for ="Citylist"><span>City:</span>
      <input type = "text" id ="citylist"
      placeholder="Select a city" list = "cities" required/>
      <datalist id= "cities">
        <option value = "Bronx"/>
        <option value = "Brooklyn"/>
        <option value = "Queens"/>
        <option value = "Manahttan"/>
        <option value = "Staten Island"/>
      </datalist>
      </label>
      </td>
  </tr>
  <tr>
  <td><label for ="StateList"><span>State:</span>
      <input type = "text" id ="State"
      placeholder="Select a city" list = "states" required/>
      <datalist id= "states">
        <option value = "New York"/>
        <option value = "New Jersey"/>
        <option value = "California"/>
        <option value = "Virginia"/>
        <option value = "Maine"/>
      </datalist>
      </td>
  </tr>
  <tr>
    <td><label><span>Zip code:</span> <input type="text" placeholder="Type your zipcode" maxlength="5" required/></label></td>
    </tr>
  <tr>
    <td>
      <label><span>Phone</span>
        <input type ="tel" placeholder="(123)456-789"
        pattern="\(\{3}) +\d{3}-\d{4}" required/>
      </label>
    </td>
  </tr>
  <tr>
    <td>
      <label><span>Email:</span>
        <input type="email" placeholder="name@domain.com" required/> 
      </label>
    </td>
  </tr>
  <tr>
    <td>
      <label><span>Birth Date:</span>
        <input type="date" required/>
      </label>
    </td>
  </tr>
</table>
</form>

【讨论】：