JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでinput type="submit"が機能しない場合の対処法

input type="submit" が正しく動作しない場合の解決策として、onclick イベントを活用する方法があります。フォーム送信時のデフォルト動作を制御することで、意図した通りの処理を実現できます。

コード例

以下が実際のサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
    <form action="#">
        <label for="firstName">First Name:</label>
        <input type="text" id="fName" name="firstName" placeholder="Enter your First Name" />
        <button type="submit" onclick="submitForm(event)">Submit</button>
    </form>
<span id="result"></span>
</body>
<script>
    var firstName = null;
    function submitForm(evnt) {
        evnt.preventDefault();
        firstName = document.getElementById("fName").value;
        document.getElementById("result").innerHTML = "The First Name is=" + firstName;
    }
</script>
</html>

このプログラムのポイントは、submitForm() 関数内で evnt.preventDefault() を呼び出している点です。これにより、フォーム送信時のページ遷移というデフォルトの動作をキャンセルし、代わりにJavaScriptで入力値を取得・表示できるようになります。

プログラムの実行方法

上記のプログラムを実行するには、まずファイル名を anyName.html（例：index.html）として保存します。次に、VS Codeエディタでファイルを右クリックし、「Open with Live Server」を選択してブラウザで開いてください。

実行結果

ブラウザで開くと、以下のような画面が表示されます。

JavaScriptでinput type= submit が機能しない場合の対処法

続いて、テキストボックスに任意の値（ファーストネーム）を入力しましょう。

入力後の状態

テキストボックスに値を入力すると、画面は以下のようになります。

JavaScriptでinput type= submit が機能しない場合の対処法

最後に「Submit」ボタンをクリックします。

Submitボタン押下後の結果

ボタンをクリックすると、入力された値が取得され、以下のように画面に表示されます。ページはリロードされず、JavaScriptによって動的に結果が出力されることが確認できます。

JavaScriptでinput type= submit が機能しない場合の対処法

このように、onclick と preventDefault() を組み合わせることで、type="submit" ボタンのデフォルト挙動を抑制しつつ、独自の処理を自由に実装することが可能になります。

  1. Chromecastが動作しない時の対処法｜接続・キャストできない問題を解決する方法

    ChromecastはGoogleが開発したデジタルメディアプレイヤーで、小型のドングル型デバイスとして設計されています。パソコンやAndroid端末から操作して、ハイビジョンテレビ上でさまざまなコンテンツの再生を開始・コントロールできる便利なガジェットです。登場から長い年月が経っていますが、今なお世界中の多くのユーザーに愛用され続けています。しかし、他のポータブルメディア機器と同様に、Chromecastにもトラブルはつきものです。「デバイスが接続してくれない」「特定のコンテンツがテレビでストリーミングできない」といった事例が発生することがあります。ユーザーごとの環境設定や利用シーンが異なる

  2. Kodi No Limitsが動作しない・起動しない時の対処法【原因別の解決策】

    Kodi No Limits（ノーリミット）が正常に動作しなくなる原因としては、Kodiアプリ本体のバージョンが古いこと、ネットワークの制限、あるいはインストールデータの破損などが挙げられます。これは多くのユーザーが経験するよくある問題で、特にNo Limitsビルドを初めてインストールした直後に発生しやすい傾向があります。また、特定のKodiバージョンに限定された問題でもありません。Kodi No Limitsは、Kodi向けビルドの中でも最も充実した機能を誇るものの一つです。映画、スポーツ、テレビ番組など、さまざまなコンテンツをこのビルドひとつで楽しむことができます。Kodi No Lim