フォームまたはアンケートの作成中に、ユーザー入力値を特定のフィールドに割り当てる必要がある場合があります。たとえば、機密エントリ、つまりパスワードまたはエンコードされた値を追加して、それらを利用する。このような場合、JavaScript を使用して非表示の入力要素の値を設定すると、データを安全に保つことができます。
このブログでは、JavaScript を使用して非表示の入力フィールドの値を設定する手順について説明します
JavaScript を使用して非表示の入力フィールドの値を設定する方法は?
JavaScript を介して非表示の入力フィールドの値を設定するには、以下の方法を適用します。
方法 1: innerHTML プロパティを使用して隠し要素の値を設定する
「 インナーHTML ” プロパティは、要素の HTML コンテンツを返します。このプロパティを使用して、ユーザー定義の値を設定し、割り当てられた非表示の入力フィールドに追加できます。
構文：
element.innerHTML = テキスト
上記の構文では、「 エレメント 」は、「を追加する必要がある要素を指します。 文章 ' 価値。
例
以下の例を見てみましょう。
< 入力 タイプ = '隠れた' ID = 「隠し要素」 価値 = '' >< 脚本 >
させて myInput = プロンプト ( 「テキストを入力してください」 、 '' ) ;
もしも ( 私の入力 ! = ヌル ) {
させて x = document.getElementById ( 「隠し要素」 ) .innerHTML = '隠し要素の値:' + myInput;
アラート ( バツ )
}
脚本 >
上記のコード ブロックでは:
- 最初に、指定された属性を持つ入力フィールドを作成します。
- 「 タイプ ”値を持つ属性” 隠れた 」は非表示フィールドであることを示します。
- その後、「 促す 」 ダイアログ ボックスは、ユーザーから値を受け取ります。
- ここで、ユーザー定義値にチェックを適用して、「 ヌル 」を使用して もしも ' 調子。
- 最後に、その「」によって非表示の入力フィールドにアクセスします ID 」を使用して getElementById() 」メソッドを使用して、「 インナーHTML ' 財産。
- 最後に、アラートを介して追加された値を表示します。
出力
ご覧のとおり、ユーザー入力値は非表示の入力フィールドに追加されます。
方法 2: jQuery アプローチを使用して隠し要素の値を設定する
このアプローチでは、jQuery の「 val() 」メソッドを使用して、表示されている入力テキスト フィールドの値を非表示の入力フィールドに割り当てます。
例
次のコードの概要を見てみましょう。
< p > 値を入力してください にとって 隠し要素 p >< 入力 ID = 「マイインプット」 価値 = '' タイプ = '文章' />< br >
< 入力 ID = 「隠し要素」 タイプ = '隠れた' 価値 = '' />
< br >
< ボタン ID = 「btnショー」 > 送信 ボタン >
< 脚本 ソース = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > 脚本 >
< 脚本 >
$ ( 「#btnShow」 ) 。の上 ( 'クリック' 、 関数 ( ) {
させて 入力値 = $ ( '#myInput' ) .val ( ) ;
$ ( 「#hiddenElement」 ) .val ( 入力値 ) ;
アラート ( '隠し要素の値: ' + 入力値 ) ;
} ) ;
脚本 >
上記のコード行では:
- 最初に、指定された属性を持つ入力テキスト フィールドを含めます。
- 同様に、別の非表示の入力フィールドを割り当てます。 タイプ ' 属性。
- 特定の「 ID ' 属性。
- その後、「 ソース 「」の属性 <スクリプト> ' 鬼ごっこ。
- JS コードで、作成したボタンにアクセスし、「 の上（） 」メソッドを使用して、ボタンクリックで関数を実行します。
- 関数定義で、可視入力「 文章 」フィールドを開き、「 val() ' 方法。
- 次のステップでは、フェッチされた値が非表示の入力に割り当てられます。 文章 」フィールドを「 val() ' 方法。
- 最後に、「 非表示の入力フィールド 」アラートを介して。
出力
上記の出力では、目に見える入力の値「 文章 」フィールドは「 隠れた 」入力欄。
結論
JavaScript を使用して非表示の入力フィールドの値を設定するには、「 インナーHTML ” プロパティまたは jQuery ” val() ' 方法。 innerHTML プロパティを使用して、ユーザー定義の値を追加することにより、必要な機能を適用できます。 val() メソッドを適用して、表示されている入力テキスト フィールドの値を非表示の入力フィールドに割り当てることができます。このブログでは、JavaScript を使用して非表示の入力フィールドの値を設定する手順について説明しました。