BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] javascriptのonsubmitが動作しない

2022-02-03 05:56:04

質問

フォーム送信時に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>

解決方法は？

イベントハンドラをform要素にアタッチすると、イベントハンドラのスコープがformになり、windowにならない 

<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>

フィドル

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します