ITHACK
【JavaScript / DOM】フォームの操作 - JavaScriptでフォーム送信

【JavaScript / DOM】フォームの操作 - JavaScriptでフォーム送信

JavaScriptのフォーム操作について解説します。

検証環境

フォーム操作

JavaScript/DOMはフォームの操作が可能です。

inputやtextareaなどの入力項目の値取得やformの送信を行えます。

入力項目

入力項目の値の取得や設定を行えます。

テキスト（input[type="text"]）

<input type="text">

値の取得

基本構文
要素ノード.value
サンプル
<div>
    <input id="data" type="text" value="Hello World">
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementById('data');
        
        let message = document.getElementById('message');
        
        ___ih_hl_start
        message.textContent = data.value;
        ___ih_hl_end
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

１３行目のdata.valueでinput[id="data"]要素の値を取得しています。

取得値をp[id="message"]要素に設定しており、表示内容から正常に値を取得できたことが分かります。

値の設定

基本構文
要素ノード.value = 値
サンプル
<div>
    <input id="data" type="text" value="Hello World">
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementById('data');
        
        ___ih_hl_start
        data.value = 'Good Morning';
        ___ih_hl_end
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

１１行目でinput[id="data"]要素に値を設定しています。

『確認』ボタンをクリックすると、入力内容がGood Morningに変わることから、正常に値を設定したことが分かります。

テキストエリア（textarea）

<textarea></textarea>

値の取得

基本構文
要素ノード.value
サンプル
<div>
    <textarea id="data">Hello World</textarea>
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementById('data');
        
        let message = document.getElementById('message');
        
        ___ih_hl_start
        message.textContent = data.value;
        ___ih_hl_end
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

１３行目のdata.valueでtextarea[id="data"]要素の値を取得しています。

取得値をp[id="message"]要素に設定しており、表示内容から正常に値を取得できたことが分かります。

値の設定

基本構文
要素ノード.value = 値
サンプル
<div>
    <textarea id="data">Hello World</textarea>
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementById('data');
        
        ___ih_hl_start
        data.value = 'Good Morning';
        ___ih_hl_end
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

１１行目でtextarea[id="data"]要素に値を設定しています。

『確認』ボタンをクリックすると、入力内容がGood Morningに変わることから、正常に値を設定したことが分かります。

チェックボックス（input[type="checkbox"]）

<input type="checkbox">

値の取得

基本構文
要素ノード.checked
サンプル
<div>
    <input id="data" type="checkbox">
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementById('data');
        
        let message = document.getElementById('message');
        
        ___ih_hl_start
        message.textContent = data.checked;
        ___ih_hl_end
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

１３行目のdata.checkedでinput[id="data"]要素の値を取得しています。

チェックボックスはチェック時はtrue、非チェック時はfalseによって表されます。

取得値をp[id="message"]要素に設定しており、表示内容から正常に値を取得できたことが分かります。

値の設定

基本構文
要素ノード.checked = 値
サンプル
<div>
    <input id="data" type="checkbox">
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementById('data');
        
        ___ih_hl_start
        data.checked = !data.checked;
        ___ih_hl_end
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

１１行目でinput[id="data"]要素に値を設定しています。

設定値はチェックボックスの状態が反転するようtrueならfalse、falseならtrueです。

『確認』ボタンをクリックすると、チェックボックスの状態が反転することから、正常に値を設定したことが分かります。

ラジオボタン（input[type="radio"]）

<input type="radio">

値はvalueプロパティ、チェック可否はcheckedプロパティを使用します。

値の取得

基本構文
// 値
要素ノード.value
//　チェック可否
要素ノード.checked
サンプル
<div>
    <label>
        <input type="radio" name="skill" value="HTML"> HTML
    </label>
    <label>
        <input type="radio" name="skill" value="CSS"> CSS
    </label>
    <label>
        <input type="radio" name="skill" value="JavaScript"> JavaScript
    </label>
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementsByName('skill');
        
        let message = document.getElementById('message');
        
        message.textContent = "";
        for (let d of data) {
            ___ih_hl_start
            message.textContent += d.value + ':' + d.checked + " ";
            ___ih_hl_end
        }
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

２３行目で各input[name="skill"]要素の値について、d.valueで値、d.checkedでチェック可否を取得しています。

取得値をp[id="message"]要素に設定しており、表示内容から正常に値を取得できたことが分かります。

値の設定

基本構文
// 値
要素ノード.value = 値
// チェック可否
要素ノード.checked = 値
サンプル
<div>
    <label>
        <input type="radio" name="skill" value="HTML"> HTML
    </label>
    <label>
        <input type="radio" name="skill" value="CSS"> CSS
    </label>
    <label>
        <input type="radio" name="skill" value="JavaScript"> JavaScript
    </label>
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementsByName('skill');
        
        ___ih_hl_start
        data[data.length - 1].value = "DOM";
        data[data.length -1 ].checked = !data[data.length - 1].checked;
        ___ih_hl_end
        
        let message = document.getElementById('message');
        
        message.textContent = "";
        for (let d of data) {
            message.textContent += d.value + ':' + d.checked + " ";
        }
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

１９〜２０行目で３つあるinput[name="skill"]の最後の要素について値とチェック可否を設定しています。

チェック可否は反転するようtrueならfalse、falseならtrueです。

『確認』ボタンをクリックすると、ラジオボタンの状態が表示されますが、その内容から正常に値を設定したことが分かります。

ドロップダウン（select）

<select>
        <option>DATA</option>
        <option>DATA</option>
        <option>DATA</option>
</select>

値の取得

基本構文
要素ノード.value
サンプル
<div>
    <select id="data">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>
    </select>
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementById('data');
        
        let message = document.getElementById('message');
        
        ___ih_hl_start
        message.textContent = data.value;
        ___ih_hl_end
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

１７行目のdata.valueでselect[id="data"]要素の値を取得しています。

取得値をp[id="message"]要素に設定しており、表示内容から正常に値を取得できたことが分かります。

値の設定

option要素のselectedプロパティを設定します。

基本構文
要素ノード.selected = 論理値
サンプル
<div>
    <select id="data">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>
    </select>
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementById('data');
        
        ___ih_hl_start
        data.options[2].selected = true;
        ___ih_hl_end
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

select要素の各項目（option）はoptionsプロパティに格納されます。

１５行目で３個目のoption要素（value="JavaScript"）を選択状態に設定しています。

『確認』ボタンをクリックすると、セレクトボックスがJavaScriptに切り替わることから正常に値を設定したことが分かります。

ファイル（input[type="file"]）

<input type="file">
<input type="file" multiple>

値の取得（単一選択）

選択可能なファイルが１つのみの場合の取得方法です。

基本構文
要素ノード.value
サンプル
<div>
    <input id="data" type="file">
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementById('data');
        
        let message = document.getElementById('message');
        
        ___ih_hl_start
        message.textContent = data.value;
        ___ih_hl_end
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

１３行目のdata.valueでinput[id="data"]要素の値を取得しています。

プレビューでファイルを選択し、『確認』ボタンをクリックすると、p[id="message"]要素にファイルパスが表示されることから、値が取得できたことが分かります。

なお、セキュリティの観点からパスはフェイクパスになっているため、ファイル名のみを参照に留めることを推奨します。

値の取得（複数選択）

複数選択式（multiple）の場合、filesプロパティから各ファイルを取り出し、そのnameプロパティでファイル名を取得できます。

基本構文
// ファイル一覧
要素ノード.files
// ファイル名
ファイルオブジェクト.name
サンプル
<div>
    <input id="data" type="file" multiple>
</div>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let data = document.getElementById('data');
        
        let message = document.getElementById('message');
        message.textContent = "";
        
        ___ih_hl_start
        for( let file of data.files ) {
            message.textContent += file.name + ', ';
        }
        ___ih_hl_end
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

１４〜１６行目で各ファイルの取り出しとそのファイル名を取得しています。

プレビューでファイルを選択し、『確認』ボタンをクリックすると、p[id="message"]要素にファイル名一覧が表示されることから、値が取得できたことが分かります。

値の設定

ファイル選択はセキュリティ上、設定できません。

フォーム

フォームの操作でリクエスト送信や送信前処理などが行えます。

送信

JavaScript/DOMの機能にはフォーム送信のメソッドが備わっています。

基本構文

要素ノード.submit()

サンプル

<form id="form" method="POST" action="https://it-hack.net/api/sample/js/ajax/post/data">
    <input id="data1" type="text" name="data1">
    <select id="select" name="data2">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>
    </select>
</form>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>

<script type="text/javascript">
    function execute() {
        let form = document.getElementById('form');
        
        ___ih_hl_start
        form.submit();
        ___ih_hl_end
    }
</script>

※ プレビューの『確認』ボタンをクリックすると、executeメソッドを実行します。

１６行目のform.submit()がフォームの送信です。

送信先は当サービス（ITHACK）のテストURLになっており、送信内容を返すようになっています。

『確認』ボタンをクリック後の表示内容から入力項目の内容が正常に送信されたことが分かります。

送信前処理

送信前に処理を行うにはsubmitイベントを使用します。

基本構文

<form onsubmit="送信前処理"></form>

form要素のonsubmit属性に送信前の処理を記述します。

サンプル

<form id="form" method="POST" action="https://it-hack.net/api/sample/js/ajax/post/data"
      ___ih_hl_start
      onsubmit="prehandle(event);">
      ___ih_hl_end
    <input id="data1" type="text" name="data1">
    <select id="select" name="data2">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>
    </select>
    <button type="submit">送信</button>
</form>


<script type="text/javascript">
    function prehandle(event) {
        event.preventDefault();
    }
</script>

２行目でform要素のonsubmit属性を設定しています。

prehandleメソッドを呼び出しており、引数にeventを記述することで、送信時のイベントオブジェクトを渡します。

prehandleメソッドのevent.preventDefault()（１５行目）はイベント中止の処理です。

『送信』ボタンをクリックすると、送信前にprehandleメソッドを呼び出すため、イベントが中止され、送信は行われません。

なお、submitメソッドを使ったフォーム送信ではsubmitイベントが呼び出されないことに注意してください。

<form id="form" method="POST" action="https://it-hack.net/api/sample/js/ajax/post/data"
      onsubmit="prehandle(event);">
    <input id="data1" type="text" name="data1">
    <select id="select" name="data2">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>
    </select>
</form>
<p id="message" style="background: #f3f3f3; padding: 10px;"></p>
<button id="button" onclick="execute();">確認</button>


<script type="text/javascript">
    function execute() {
            let form = document.getElementById('form');

            form.submit();
    }
    function prehandle(event) {
        event.preventDefault();
    }
</script>
【CSS】word-break - 単語中の改行
【コマンドライン】ユーザーのグループ確認 [ groups ]
【コマンドライン】ユーザー・グループの確認 [ getent ]
【JavaScript】イベントの伝搬 - キャプチャリング・バブリング
【JavaScript / DOM】属性ノードの取得・設定・削除 - 属性ノードを要素ノードで扱う方法
【JavaScript / DOM】ノード / textContentプロパティ - ノードのテキストを変更する
AtMarkRule
Browser
CentOS
Command
Command
CSS
Database
Development
DOM
Event
HTML
JavaScript
MarkupLanguage
MySQL
Network
OS
PHP
Programming
Property
Pseudo Class
Pseudo Element
Relational Database
Server
Standard Object
Tag