フォームを送信する代わりにEnter Enterを押すと、フォームが送信されます

Question

私は郵便番号を入力し、入力に応じて2つのURLのいずれかにユーザーを転送するフォームを持っています。送信ボタンをクリックするとすべてがうまくいきますが、Enterキーを押すとページがリロードされますが、私は約30の同様のフォーラムを無駄に使いました。送信ボタンの種類をボタンから送信するように変更するなど、複数のことを試みました。私はエンターキーが私が望むことをするためにいくつかのスニペットを試みましたが、誰も働いていませんでした。それは単にページをリロードし続けます。

<div align="center"> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    function zipValidate() { 

     val = document.zipForm.zip.value; 

     switch (val) { 
      case '94005': 
      document.location = 'http://www.crossborderscheduling.com/home/calendar/'; 
      break; 

      default: 
      document.location = 'http://crossborder.fedex.com/us/'; 
      break; 

     } 
     } 
     //]]> 
    </script> 
    <form name="zipForm" id="zipForm" method="post"> 
    <input name="zip" type="text" id="zip" maxlength="5" size="10%" placeholder="Zip Code" /> 
    <input name="zipButton" type="button" id="zipButton" value="Submit" onclick="zipValidate()" /> 
    </form> 
</div> 

Answer 1

<form>それが意味""のデフォルト[action]を持っていますフォームが提出されると、データは現在のページに掲載されます。

<input name="zipButton"...>要素はtype="submit"の代わりにtype="button"を使用し、onclickイベントハンドラをバインドしています。

実際にあなたのzipValidateコールバックが機能する理由はフォームを提出しない#zipButton要素をクリックします。 を押す

は#zip分野に焦点を当てながら、を入力しform要素にsubmitイベントをトリガし、そして完全に#zipButtonクリックコールバックを無視し、フォーム、ためimplicit submission動作をトリガーします。

---

どのように修正しますか？

は、HTMLを固定することにより開始するのをしてみましょう：

<form name="zipForm" id="zipForm" method="post"> 
    <input name="zip" type="text" id="zip" maxlength="5" size="10" placeholder="Zip Code" aria-label="Zip Code" /> 
                1: ^^^^^^^^^      2: ^^^^^^^^^^^^^^^^^^^^^ 
    <input name="zipButton" type="submit" id="zipButton" value="Submit" /> 
         3: ^^^^^^^^^^^^^       4:^
</form> 

1. [size]属性はあなたが<label>要素、it's important to provide a label for accessibilityを使用していないとして、負でない整数
2. ある値を持つ必要があります。 [placeholder]属性は適切な代替手段ではありません。
3. ボタンは、のではJavaScriptを見てみましょう、今すぐHTMLがクリーンアップされていることを、あなたのHTML

のあなたのJavaScriptを保つsubmit type

を使用する必要があります。

<script> 
// 1 ^^^, 
// 2 
function zipValidate() { 
    // 3 
    var val, 
     action; 
    // 4 
    val = document.getElementById('zip').value; 
    switch (val) { 
    case '94005': 
     // 5 
     action = 'http://www.crossborderscheduling.com/home/calendar/'; 
     break; 
    default: 
     action = 'http://crossborder.fedex.com/us/'; 
     break; 
    } 

    // 6 
    this.setAttribute('action', action); 
} 

// 7 
document.getElementById('zipForm').addEventListener('submit', zipValidate, false); 
</script> 

1. ドン[type="text/javascript"]を使用してください、非常に長い時間のために必要ではありません
2. CDATAを使用しないでください、それも必要ではありません非常に長い時間のためのSARY
3. あなたの変数を宣言
4. ではなく、DOM検索のいずれかの方法を使用してDOMを照会、IDによって暗黙のグローバル参照を使用しないでください：getElementById、getElementsByTagName、getElementsByClassName、querySelector、またはquerySelectorAll
5. フォームを送信するURLを保存します。 ifステートメントまたは3進演算子は十分ですが、このケースではほとんど問題にならないためスイッチを抜けました。
6. [action]属性をフォームに設定して、送信先のフォームに通知します。提出の動作はあなたの後のリダイレクトを処理するため、イベントでpreventDefaultに電話する必要はありません。
7. JavaScriptからフォームにイベントハンドラをバインドします。 DOM内でスクリプトが実行される場所を並べ替えるか、イベントをバインドしようとするときに#zipForm要素が存在するようにdocument.onreadystatechangeを待つ必要があります。

Answer 2

あなたonclickコードでreturn falseに必要な提出からフォームを防止するために：ここで私は現在、サイト上で持っているコードです。あなたはそれを変更する場合がありますことを行うには：

onclick="zipValidate() && return false;" 

別の方法としては、falseを返し、その後にonclickを変更するには、あなたの機能を変更できます。

onclick="return zipValidate();"