フォームの値が表示されないのはなぜですか？

私は単純なフォームを作成しています。フォームが送信され、正常に検証されたら、入力値をコンソールに書きたいと思います。しかし、現在の進捗状況をテストすると、ランダムなテキストが入力され、コンソールにも何も表示されません。フォームの値が表示されないのはなぜですか？

<html> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <script language="Javascript"> 
 
     window.onload = function() { // So the DOM can be defined 
 
     function validateForm() { 
 
      var form = document.forms['encrypt']['text']; 
 
      if(form == "") { 
 
      alert("Enter piece of text to encrypt"); 
 
      return false; 
 
      } else { 
 
      console.log(form.value); 
 
      } 
 
     } 
 
     } 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <form name="encrypt" action="#" onsubmit="return validateForm()"> 
 
     Text: <input type="text" name="text"> 
 
     <input type="submit" name="Submit and Encrypt!"> 
 
    </form> 
 
    </body> 
 
</html>

私は何も入力しないと、フォームを送信した場合でも、アラートがポップアップ表示されません：ここで私は今、（任意のコメントアウトコードを除く）しているコードがあります。フォームの問題に関連する他の投稿がありましたが、私とは関係がありません。私のコードに何か問題がありますか？問題は何ですか？どのように修正できますか？

編集：window.onloadは、ウィンドウがロードされているときにのみwindow.onloadがコードを実行することを実現しました。その後、すべての機能が停止します。 onloadハンドラを削除することに加えて、私はボディ内で検証機能を再配置する必要がありました。

出典

2017-03-05 Obinna Nwakwue

validateForm関数は、onload関数内でのみ表示されます。また、フォーム内のテキストフィールド内の値ではなく、空の文字列とフォームを比較していました。ページが表示される前にページがリフレッシュされるため、console.logも表示されません。

以下は3つのものを修正したコードです。

<html> 
    <head> 
    <meta charset="utf-8" /> 
    <script> 
     function validateForm() { 
     var text = document.forms['encrypt']['text'].value; 
     if(text == "") { 
      alert("Enter piece of text to encrypt"); 
      return false; 
     } else { 
      alert("Entered '" + text + "', refreshing now."); 
      return true; 
     } 
     } 
    </script> 
    </head> 
    <body> 
    <form name="encrypt" action="#" onsubmit="return validateForm()"> 
     Text: <input type="text" name="text"> 
     <input type="submit" name="Submit and Encrypt!"> 
    </form> 
    </body> 
</html>

出典

2017-03-05 16:02:14 Bemmu

'document.forms'を' null'に設定しませんか？ –

申し訳ありませんが、「それ」という行はどちらですか？ – Bemmu

'window.onload'ハンドラを削除したところで、' document.forms'でフォームを参照しています。これは、 'validateForm（）'宣言の中の最初の行です。 –

onloadイベントハンドラにこの機能をラップする理由はありません。そうすることで、関数定義のスコープが制限され、その関数を呼び出そうとしているコードが実際にそれを見ることができなくなります。（それはonload完了した後、あなたが定義した関数がスコープ内にもはやあると消滅し、ではありません。）

だけハンドラを削除し、直接関数を定義：

<script language="Javascript"> 
    function validateForm() { 
     var form = document.forms['encrypt']['text']; 
     if(form == "") { 
     alert("Enter piece of text to encrypt"); 
     return false; 
     } else { 
     console.log(form.value); 
     } 
    } 
</script>

出典

2017-03-05 16:04:46 David

'document.forms'を' null'に設定すると思います。私はそれを試してみましょう。 –

@ ObinnaNwakwue：この関数は 'document.forms'に何も設定しません。 – David

はwindow.onload = function() {だけを削除するようにしてくださいvalidateForm機能を維持してください。

出典

2017-03-05 16:10:20

問題はあなたの関数validateForm（）は、送信をクリックするとスコープ内でアクセスできません。これはコンソールでこの関数を呼び出すことで確認できます。あなたのコードでは、それはwindow.onloadの内部で定義されているので、関数をそこから移動してください。

出典

2017-03-05 16:22:01 zraocn

フォームの値が表示されないのはなぜですか？

答えて

関連する問題