如何添加事件监听器来提交按钮

我对这个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="[email protected]" 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"); 
}

它的工作原理时，有整个窗体未填充，但是如果所有必填字段被填充，则控制台不显示“某些东西”。

来源

2014-12-06 nublit

没有名字的表单控件不能成功，所以不会与表单一起提交。您的表单控件都没有名称，因此不会提交。 – RobG 2014-12-06 05:24:30

啊是的RobG我没有忽视这一点。谢谢。 – nublit 2014-12-06 05:32:53

另外，将监听器放在按钮上并不是一个好主意，因为可以在不点击按钮的情况下提交表单。把它放在窗体的提交处理程序上。此外，你可以显着减少HTML的例子。 – RobG 2014-12-06 06:09:30

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

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

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

来源

2014-12-06 05:24:09 mand

啊，现在我明白了。你知道的方式，当我点击显示信息，完全删除表格表并更换？我尝试了innerHTML，但这并不好。 – nublit 2014-12-06 05:43:45

替换数据或隐藏表单？ – mand 2014-12-06 06:56:42

所以，我相信你是相关的事实是，当所有必填字段，填充表单提交导致此问题。

如果结构中的事件侦听器，而不是如下：

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

形式将不提交的，你应该能够做任何你需要在事件处理程序（该e.preventDefault()停止表单提交）。

来源

2014-12-06 05:26:22

如何添加事件监听器来提交按钮

回答

相关问题