Question

我确实将其包装在带有提交按钮的表单中，但意识到这会尝试在不执行逻辑的情况下转到新页面。如何将邮政编码传递给onclick按钮事件？如果这是完全错误的，您是否可以提供有关如何正确执行此操作的指导。

<input type="text" placeholder="Zip Code" pattern="[0-9]{5}" name="zip" required />

<button id="checker">Go!</button>

<script>
  var b = document.getElementById("checker");

  b.addEventListener("click", function checkZipCode(zip) {

        var zipCodes = [26505, 26501, 26507, 26506];

        for (i = 0; i <= zipCodes.length - 1; i++) {
          if (zip == zipCodes[i]) {
            alert("YES");
            break;
          }
        }
      }
</script>

Answer 1

您需要获取输入的值，然后使用document.querySelector('[name="zip"]').value

执行此操作

＆＃13;

var b = document.getElementById("checker");

b.addEventListener("click", function checkZipCode(zip) {
  var zip = document.querySelector('[name="zip"]').value;
  var zipCodes = [26505, 26501, 26507, 26506];
  for (i = 0; i <= zipCodes.length - 1; i++) {
    if (zip == zipCodes[i]) {
      alert("YES");
      break;
    }
  }
})

＆＃13;

<input type="text" placeholder="Zip Code" pattern="[0-9]{5}" name="zip" required />


<button id="checker">Go!</button>

＆＃13;

Answer 2

像这样使用getElementById('ELEMENT_NAME_HERE').value：

访问！

  <script>
    var b = document.getElementById("checker");

    b.addEventListener("click", function checkZipCode(zip){

        console.log('Clicked');
        var enteredZip = document.getElementById("zip").value; 
        console.log(enteredZip);
        var zipCodes=[26505, 26501, 26507, 26506];

        for(i=0; i<=zipCodes.length-1; i++){
            if(zip == zipCodes[i]){
                alert("YES");
                break;
            }}}); 
</script>

https://plnkr.co/edit/ptyUAItwyaSmZXsD81xK?p=preview

你无法传递它。

Answer 3

基本上如果这个myfunction（）返回false，那么表单将不会被提交; 此外，这只会在提交表格

时执行

https://www.w3schools.com/jsref/event_onsubmit.asp

<form onsubmit="myFunction()">
  Enter name: <input type="text">
  <input id='input-id' type="submit">
</form>

<script>
myfunction(){

if(/*some condition*/)
{
return false; 
}
  </script>

也很少有事情要考虑，因为你看起来很新，这里的人给你非常正确但具体的解决方案。

如果向内部标记添加按钮，则会在单击时提交表单。这就是为什么许多人使用看起来像css按钮的div。主要是一个干净的解决方案来覆盖Button提交，你也可以通过Javascript提交表单。

如何将zip传递给按钮功能？

3 个答案: