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

时间：2014-12-06 05:12:54

标签： javascript html html5 forms addeventlistener

我对这个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，仅针对eventlistener进行了简化：

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");
}

当整个表单未填充时它起作用，但如果填写了所有必填字段，则控制台不会显示＆＃34;某些内容＆＃34;。

3 个答案:

答案 0 :(得分：0)

你没有看到＆＃34;某事＆＃34;在控制台中，当整个表单被填满并按下提交按钮时，它将进入登录页面。这将刷新控制台并删除其中的所有数据。换句话说，一切正常，只是加载新页面会删除控制台中的所有内容。您可以通过使用alert替换对console.log的调用来检查按钮侦听器是否正常工作。警报调用将发生并且您将看到弹出窗体是否填写表单。

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

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

答案 1 :(得分：0)

因此，我认为您所涉及的问题是由于填写了所有必填字段后表单提交的事实。

如果您构造事件侦听器，则如下：

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

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

答案 2 :(得分：0)

我建议使用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>

相关问题
最新问题