JavaScriptでフォーム送信時の入力値を変更する方法

JavaScriptでフォーム送信時にinput要素の値を変更したい場合は、documentオブジェクトを利用します。フォーム名とテキスト名を指定して、valueプロパティに新しい値を代入するだけで簡単に実現できます。

基本構文

入力値を変更するための基本構文は以下の通りです。

document.yourFormName.yourTextName.value=anyValue;

この構文では、「yourFormName」にフォームのname属性の値、「yourTextName」にinput要素のname属性の値を指定し、「anyValue」に設定したい新しい値を代入します。

フォームの例

ここでは、「Submit Form」ボタンをクリックするとsubmitForm()関数が呼び出されるフォームを例に考えてみましょう。非表示フィールド（hidden）の初期値は「10000」となっています。

<form name="studentForm" onsubmit="submitForm();">
   <input type="hidden" name="txtInput" value="10000" />
   <input type="submit" value="Submit Form"/>
</form>

次に、submitForm()関数でinputの値を変更します。フォーム送信のタイミングで、隠しフィールドの値を「STUDENT-100」に書き換えています。

function submitForm(){
    document.studentForm.txtInput.value='STUDENT-100';
}

完全なサンプルコード

以下は、上記の処理を組み合わせた動作する完全なHTMLコードです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<form name="studentForm" onsubmit="submitForm();">
<input type="hidden" name="txtInput" value="10000" />
<input type="submit" value="Submit Form"/>
</form>
<script>
    function submitForm(){
        document.studentForm.txtInput.value='STUDENT-100';
    }
</script>
</body>
</html>

プログラムの実行手順

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

実行結果

ページを表示すると、以下のような画面が出力されます。

JavaScriptでフォーム送信時の入力値を変更する方法

続いて、「Submit Form」ボタンをクリックしてみてください。フォーム送信後のURLのクエリ文字列（query string）に、書き換えられた値「STUDENT-100」が反映されていることが確認できます。これは、送信前にJavaScriptによってhiddenフィールドの値が正常に変更されたことを示しています。

JavaScriptでフォーム送信時の入力値を変更する方法

補足：より現代的な書き方

documentオブジェクト経由でのアクセスはシンプルですが、近年ではgetElementById()やquerySelector()を使う方法も一般的です。例えば、input要素にid属性を付与しておけば、以下のように書き換えることもできます。

document.getElementById('txtInput').value = 'STUDENT-100';

どちらの方法でもフォーム送信前に入力値を動的に変更できるため、用途やプロジェクトのコーディング規約に合わせて選択するとよいでしょう。

JavaScriptで配列の先頭にあるゼロを削除する方法を解説

【JavaScript】同じ関数を使う2つ以上のリンクでonclickが機能しない原因と解決法

HTML DOM入力送信（Submit）formプロパティの使い方を解説
HTML DOM の Input Submit form プロパティは、指定された送信ボタン（submit ボタン）が所属するフォームへの参照を取得するために使用されます。もし送信ボタンがフォームの外に配置されている場合は、単純に NULL を返します。なお、このプロパティは読み取り専用です。構文 Input Submit form プロパティの構文は以下の通りです。 submitObject.form サンプルコードそれでは、Input Submit form プロパティの具体的な使用例を見ていきましょう。以下の例では、submit ボタンからそのボタンを含むフォームの ID を取得して
HTML DOMのInput Submit valueプロパティとは？構文と使い方を実例で解説
HTML DOM の input submit value プロパティは、type=submit を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、送信ボタンの value 属性の値を取得したり、新しい値を設定したりすることができます。送信ボタンの value プロパティを変更すると、ボタンに表示されるテキストも変化します。通常、送信ボタンにはデフォルトで「Submit（送信）」というテキストが表示されますが、value プロパティを利用すれば、これを任意の文字列に自由に変更できます。構文 value プロパティを設定する場合の基本的な