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

JavaScriptでフォーム送信を実装！送信ボタンと入力クリアボタンの作成方法

フォーム送信ボタンと入力クリアボタンの実装

フォームのデータ送信には type="submit" のボタンを使用し、テキストボックスなどに入力された内容を消去するためには、クリック時にJavaScript関数を呼び出す別のボタンを設置します。以下のコードでは、「Submit（送信）」ボタンと「Delete（削除）」ボタンの2種類を実装しています。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
</style>
<body>
<label>StudentName:
<input type="text" id="txtName" />
</label>
<br>
<button type="submit">Submit</button>
<button type="button" value="delete" onclick="deleteSomething()">Delete</button>
<script>
    function deleteSomething(secondValue) {
        alert("I am going to clear text box data only...");
        document.getElementById("txtName").value = "";
    }
</script>
</body>
</html>

上記のプログラムを実行するには、ファイル名を「anyName.html(index.html)」として保存し、ファイルを右クリックします。VS Codeエディターの場合は「Open with Live Server」を選択してください。

実行結果

このプログラムを実行すると、次のような画面が表示されます。

JavaScriptでフォーム送信を実装！送信ボタンと入力クリアボタンの作成方法

まず、テキストボックスに任意の値を入力してみましょう。

JavaScriptでフォーム送信を実装！送信ボタンと入力クリアボタンの作成方法

続いて「Delete」ボタンをクリックします。クリックすると、次のようなアラートメッセージが表示されます。

JavaScriptでフォーム送信を実装！送信ボタンと入力クリアボタンの作成方法

アラートの「OK」ボタンを押すと、テキストボックスの内容だけが消去され、以下のような状態になります。

JavaScriptでフォーム送信を実装！送信ボタンと入力クリアボタンの作成方法

処理のポイント

  • type="submit"：フォームの内容をサーバーへ送信するための標準的なボタンです。
  • type="button"：送信動作を持たない汎用ボタンで、onclick属性経由でJavaScript関数を呼び出せます。
  • deleteSomething() 関数：alert()でメッセージを表示した後、document.getElementById("txtName")で対象の入力欄を取得し、valueプロパティに空文字列を代入することで、入力内容のみをクリアしています。
  1. JavaScriptでinput type="submit"が機能しない場合の対処法

    input type=submit が正しく動作しない場合の解決策として、onclick イベントを活用する方法があります。フォーム送信時のデフォルト動作を制御することで、意図した通りの処理を実現できます。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi

  2. HTMLで送信ボタンを別のWebページにリンクさせる方法

    送信（Submit）ボタンは、クリックするとフォームを自動的に送信する役割を持っています。HTMLフォームを活用すれば、ユーザーからの入力を簡単に受け取ることができます。<form>タグの中にフォーム要素を追加することで入力欄を作成でき、テキスト入力、ラジオボタン、送信ボタンなど、さまざまな種類の要素が用意されています。action属性でリンク先を指定する送信ボタンを別のWebページにリンクさせたい場合は、フォームのaction属性を使用します。action属性の値に移動先のURLやファイルパスを記述するだけで、送信ボタンがクリックされたときに指定したページへ遷移させることができま