web-dev-qa-db-ja.com

javascript onsubmitが機能しない

フォームの送信時にJavaScript関数を機能させようとしていますが、関数が実行されていないようです。誰か助けてもらえますか？

<html>
<head>
    <script>
        function upload(){
                alert("I am an alert box!");
        }
     </script>
</head>
<body>
    <form enctype="multipart/form-data" method="post" onsubmit="return upload();">
    <input type="file" name="file">
    <input type="submit" name="upload" value="Datei hochladen">
    </form>
</body>
</html>
javascriptonsubmit
13
Stoffl

イベントハンドラーをフォーム要素にアタッチする場合、イベントハンドラーのスコープはウィンドウではなくフォームです

<form enctype="multipart/form-data" method="post" onsubmit="return upload(this);">

<script>
    function upload(scope) {
        console.log(scope); // The passed scope from the event handler is
    }                       // the form, and not window
</script>

フォーム内の入力要素は、名前がキーであるフォームオブジェクトにプロパティとしてアタッチされているため、スコープがフォームであるイベントハンドラーでupload()を呼び出すと、form.upload()を呼び出すことと等しくなります。 、しかしフォームにはその名前の要素がすでにあるため、form.uploadはグローバルスコープのupload()関数ではなくアップロードボタンです。

それを解決するには、関数または要素の名前を変更します

<html>
<head>
    <script>
        function upload(){
                alert("I am an alert box!");
        }
     </script>
</head>
<body>
    <form enctype="multipart/form-data" method="post" onsubmit="return upload();">
    <input type="file" name="file">
    <input type="submit" name="upload2" value="Datei hochladen">
    </form>
</body>
</html>

[〜＃〜]フィドル[〜＃〜]

22
adeneo