フォームの送信時に 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>
ベストアンサー1
イベントハンドラをフォーム要素にアタッチする場合、イベントハンドラのスコープはウィンドウではなくフォームになります。
<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>