Return 键上的表单提交问题

Question

我正在摸索为什么当按下 "return" 键时我无法让这个脚本工作。当我尝试通过单击 "GO" 按钮提交时表单有效，但当通过键盘按下 "Return" 键时无效。我在这个项目上有点超出了我的舒适区，但我已经开始工作了。

<h1 id="header">Are you in our delivery area?</h1>

<form action="action_page.php" method="GET">
    <input type="text" id="zipCode">
   <input type="button" onClick="checkZipcode()" value="GO"></input>
</form>

<p1 id="resultText"></p1>

<script>
function checkZipcode(){
  var zipcodes = [12345,12344,12343];
  var validCode = false;
  for(i=0;i<zipcodes.length;i++){
    if (zipcodes[i] == document.getElementById('zipCode').value)
    {
        document.getElementById("resultText").innerHTML = "YES, we deliver to your area!";
        return true;
    }
  }
    document.getElementById("resultText").innerHTML = "<div id='fail'><em>Not yet, maybe next year!</em><br>We can <a href='http://google.com' target='blank';>notify you</a> when we deliver to your area.<br></div>";
    return false;

}
    </script>

感谢您提供的任何帮助。

Answer 1

您可以在表单上分配一个 onsubmit 事件，当表单尝试提交时将运行包括在表单内按回车键。这是更改后的代码，注释中有更改：

<h1 id="header">Are you in our delivery area?</h1>
<!-- Added id field to form so I could select it below -->
<form action="action_page.php" method="GET" id="zipCodeForm">
    <input type="text" id="zipCode">
   <input type="button" onClick="checkZipcode()" value="GO"></input>
</form>

<p1 id="resultText"></p1>

<script>
function checkZipcode(){
  var zipcodes = [12345,12344,12343];
  var validCode = false;
  for(i=0;i<zipcodes.length;i++){
    if (zipcodes[i] == document.getElementById('zipCode').value)
    {
    document.getElementById("resultText").innerHTML = "YES, we deliver to your area!";
    return true;
    }
  }
    document.getElementById("resultText").innerHTML = "<div id='fail'><em>Not yet, maybe next year!</em><br>We can <a href='http://google.com' target='blank';>notify you</a> when we deliver to your area.<br></div>";
    return false;

}
// Selecting form and adding an onsubmit event listener which
// is your original checkZipcode function.
var zipCodeForm = document.getElementById("zipCodeForm");

zipCodeForm.onsubmit = checkZipcode;
    </script>

Answer 2

试试这个。

<h1 id="header">Are you in our delivery area?</h1>
<form action="action_page.php" method="GET">
 <input type="text" id="zipCode">
 <input type="button" onClick="checkZipcode()" value="GO"></input>
</form>

<p1 id="resultText"></p1>

<script>
function checkZipcode(){
var zipcodes = [12345,12344,12343];
var validCode = false;
for(i=0;i<zipcodes.length;i++){
if (zipcodes[i] == document.getElementById('zipCode').value)
{
     document.getElementById("resultText").innerHTML = "YES, we   deliver to your area!";
    return true;
}
}
 document.getElementById("resultText").innerHTML = "<div     id='fail'>    <em>Not yet, maybe next year!</em><br>We can <a href='http://google.com' target='blank';>notify you</a> when we deliver to your area.<br></div>";
return false;

 }
  document.onkeydown = function () {
  if (window.event.keyCode == '13') {
    checkZipcode();
 }
}
</script>

Return 键上的表单提交问题

Issue with a Form Submission on Return Key

javascript

jquery

forms

zip

submit