UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#206 フォームに動的な入力エリアを追加・削除するJavaScriptを実装する方法

記入日:2023-08-03 編集日:2023-08-03

フォームに動的な入力エリアを追加・削除するJavaScriptを実装する方法に関して解説をしてみようと思います。

この記事を読むと(約5分)
フォームに動的な入力エリアを追加・削除するJavaScriptを実装する方法をイメージできます。

入力エリアを追加・削除

以下にPHPとJavaScriptを含むフォームのコード例を示します。
この例では、HTMLとJavaScriptを使用して、入力エリアを追加・削除する機能を実現します。

<!DOCTYPE html>
<html>
<head>
  <title>動的な入力エリアの追加・削除</title>
</head>
<body>

<form id="myForm" method="post" action="submit.php">
  <div id="inputContainer">
    <input type="text" name="inputField[]">
  </div>
  <button type="button" onclick="addInputField()">+</button>
  <button type="button" onclick="removeInputField()">−</button>
  <input type="submit" value="送信">
</form>

<script>
  function addInputField() {
    const container = document.getElementById('inputContainer');
    const inputField = document.createElement('input');
    inputField.type = 'text';
    inputField.name = 'inputField[]';
    container.appendChild(inputField);
  }

  function removeInputField() {
    const container = document.getElementById('inputContainer');
    const inputFields = container.getElementsByTagName('input');
    if (inputFields.length > 1) {
      container.removeChild(inputFields[inputFields.length - 1]);
    }
  }
</script>

</body>
</html>

このHTMLフォームは、初期状態で1つの入力エリアを持ち、+ボタンを押すことで入力エリアが追加され、−ボタンを押すことで入力エリアが削除される仕組みです。

JavaScriptのaddInputField関数は、入力エリアを作成してinputContainerに追加します。新しい入力エリアは、name="inputField[]"のように配列として定義されます。これにより、送信されたフォームデータがPHPスクリプトに配列として渡されます。

JavaScriptのremoveInputField関数は、現在の入力エリアの数を確認し、少なくとも1つの入力エリアが残るように削除します。最低1つの入力エリアを保持するため、削除の操作は1つ以上の入力エリアが存在する場合にのみ行われます。

PHP側では、送信されたフォームデータを処理するスクリプト(submit.phpなど)を作成する必要があります。この例ではPHPスクリプトの詳細は含まれていませんが、受け取ったinputField[]配列を適切に処理してデータベースに保存する、または他の用途で使用することができます。

注意:このコード例ではセキュリティ対策は省略されています。実際のウェブアプリケーションでは、適切なサニタイズとバリデーションが行われることを確認してください。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。