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

JavaScriptのフォーム操作を解説します。

フォーム操作

JavaScriptでフォームの操作ができます。

inputやtextareaの値を取得し、formの送信を行ないます。

入力項目

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

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

<input type="text">

値の取得

基本構文

変数.value

サンプル

Sample

<div>
    <input id="data" type="text">
</div>
<p id="message"></p>
<button id="button" onclick="execute();">実行</button>

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

プレビュー

値の設定

基本構文

変数.value = 値

サンプル

Sample

<div>
    <input id="data" type="text">
</div>
<button id="button" onclick="execute();">実行</button>

<script type="text/javascript">
    
    function execute() {
        let data = document.getElementById('data');
        data.value = 'Hello World!';
    }
    
</script>

プレビュー

テキストエリア（textarea）

<textarea></textarea>

値の取得

基本構文

変数.value

サンプル

Sample

<div>
    <textarea id="data"></textarea>
</div>
<p id="message"></p>
<button id="button" onclick="execute();">実行</button>

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

プレビュー

値の設定

基本構文

変数.value = 値

サンプル

Sample

<div>
    <textarea id="data"></textarea>
</div>
<button id="button" onclick="execute();">実行</button>

<script type="text/javascript">
    
    function execute() {
        let data = document.getElementById('data');
        data.value = "Hello World!\nGood Morning!";
    }
    
</script>

プレビュー

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

<input type="checkbox">

値の取得

基本構文

変数.checked

サンプル

Sample

<div>
    <input id="data" type="checkbox">
</div>
<p id="message"></p>
<button id="button" onclick="execute();">実行</button>

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

プレビュー

値の設定

基本構文

変数.checked = 値

サンプル

Sample

<div>
    <input id="data" type="checkbox">
</div>
<button id="button" onclick="execute();">実行</button>

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

プレビュー

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

<input type="radio">

値の取得

基本構文

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

変数.value
変数.checked

サンプル

Sample

<div>
    <label>
        <input id="data" type="radio" name="skill" value="HTML"> HTML
    </label>
    <label>
        <input id="data" type="radio" name="skill" value="CSS"> CSS
    </label>
    <label>
        <input id="data" type="radio" name="skill" value="JavaScript"> JavaScript
    </label>
</div>
<p id="message"></p>
<button id="button" onclick="execute();">実行</button>

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

プレビュー

値の設定

基本構文

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

変数.value = 値
変数.checked = 値

サンプル

Sample

<div>
    <label>
        <input id="data" type="radio" name="skill" value="HTML"> HTML
    </label>
    <label>
        <input id="data" type="radio" name="skill" value="CSS"> CSS
    </label>
    <label>
        <input id="data" type="radio" name="skill" value="JavaScript"> JavaScript
    </label>
</div>
<button id="button" onclick="execute();">実行</button>

<script type="text/javascript">
    
    function execute() {
        let data = document.getElementsByName('skill');
        
        for( let i = 0; i < data.length; i++ ) {
            if( i == data.length - 1 ) {
                data[i].checked = !data[i].checked;
                data[i].value = 'Hello World';
            }
        }
        
    }
    
</script>

プレビュー

ドロップダウン（select）

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

値の取得

基本構文

変数.value

サンプル

Sample

<div>
    <select id="select">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>
    </select>
</div>
<p id="message"></p>
<button id="button" onclick="execute();">実行</button>

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

プレビュー

値の設定

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

基本構文

変数.selected = 値

サンプル

Sample

<div>
    <select id="select">
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript">JavaScript</option>
    </select>
</div>
<button id="button" onclick="execute();">実行</button>

<script type="text/javascript">
    
    function execute() {
        let data = document.getElementById('select');
        for( let option of data.options ) {
            if( option.value == 'JavaScript' ) {
                option.selected = true;
            }
        }
    }
    
</script>

プレビュー

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

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

値の取得（単一選択）

基本構文

変数.value

サンプル

Sample

<div>
    <input id="data" type="file">
<idv>
<p id="message"></p>
<button id="button" onclick="execute();">実行</button>

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

プレビュー

値の取得（複数選択）

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

基本構文

変数.name

サンプル

Sample

<div>
    <input id="data" type="file" multiple>
<idv>
<p id="message"></p>
<button id="button" onclick="execute();">実行</button>

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

プレビュー

値の設定

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

フォーム

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

送信

JavaScriptからフォームを送信できます。
送信するにはform要素のsubmitメソッドを呼び出します。

Sample

<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>
<button id="button" onclick="execute();">実行</button>

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

プレビュー

送信前処理

送信前に処理を行うことができます。
処理を行うにはsubmitイベントを使います。

Sample

<form id="form" method="POST" action="https://it-hack.net/api/sample/js/ajax/post/data" onsubmit="test(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>
    <button type="submit">送信</button>
</form>
<button id="button" onclick="execute();">実行</button>

<script type="text/javascript">
    
    function execute() {
        let message = document.getElementById('message');
        let form = document.getElementById('form');
        form.submit();
    }
    
    function test(event) {
        event.preventDefault();
    }
    
</script>

プレビュー

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