フォーム内の無効なフォームフィールドの値を送信する方法 サンプルコード

フォーム内の無効なフォームフィールドの値を送信する方法 サンプルコード
フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません。ただし、場合によってはこの値を送信する必要があります。
disabled の代わりに readonly を使用するなど、多くの解決策がありますが、どれもあまり良くないと思います (具体的な理由は省略します)。

解決策として、送信するフォームを送信する前にコピーし、コピーしたフォーム内のすべてのフォーム フィールドの disabled 属性を false に設定して、コピーしたフォームを送信するという方法を考えました。以下はデモ コードです (デモ効果を確認するには、コードを submit.html というファイルに保存します)。

コードをコピー
コードは次のとおりです。

<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" content="text/html; charset=shift-jis">
<タイトル>
フォームを送信
</タイトル>
<スクリプト>
関数doSubmit(フォーム) {
var newForm = form.cloneNode(true);
フィールドを有効にします(newForm.getElementsByTagName("input"));
フィールドを有効にします(newForm.getElementsByTagName("textarea"));
フィールドを有効にします(newForm.getElementsByTagName("select"));
newForm.style.display = "なし";
document.body.appendChild(新しいフォーム)
新しいフォームを送信します。
}
関数enableFields(フィールド) {
for(var i=0;i<fields.length;i++) {
var フィールド = fields[i];
if (フィールドインスタンス(配列)) {
(var j=0;j<field.length;j++) の場合 {
フィールド[j].disabled = false;
}
} それ以外 {
フィールドが無効 = false;
}
}
}
</スクリプト>
</head>
<本文>
<フォームアクション="submit.html">
<input type="text" name="text" value="tt" 無効/>

<input type="radio" name="radio" value="r1" チェック済み 無効>r1
<input type="radio" name="radio" value="r2">r2

<input type="チェックボックス" name="チェックボックス" value="c1">c1
<input type="checkbox" name="checkbox" value="c2" チェック済み無効>c2

<select name="select" 無効>
<オプション値="1">1</オプション>
<オプション値="2">2</オプション>
</選択>

<textarea name="textarea" 無効>123</textarea>

<input type="button" value="送信" onclick="doSubmit(this.form)">
</フォーム>
</本文>

<<:  CSS3はグラフィックの落下アニメーション効果を実現します

>>:  MySQL データ分析ストレージエンジンの例の説明

推薦する

MySQL 8.0.18 のインストールと設定方法のグラフィックチュートリアル (Windows 10 版)

この記事は、参考のためにMySQL 8.0.18のインストールと設定のグラフィックチュートリアルを記...

Docker Alpine イメージのタイムゾーン問題に対する完璧な解決策

最近、Docker を使用して Java アプリケーションをデプロイしていたときに、タイムゾーンが間...

Linux カーネルの copy_{to, from}_user() に関する考察

目次1. copy_{to,from}_user() とは何か1. copy_{to,from}_u...

Nginxにモジュールを動的に追加する方法

前面に書かれた多くの場合、現在のプロジェクトの状況とビジネスニーズに基づいて Nginx をインスト...

MySql8.0.19 インストールピットレコードを共有する

前回の記事ではMySql8.0.19のインストール手順を紹介しました。必要な方はクリックしてご覧くだ...

MySQLインデックスベースのストレステストの実装

1. データベースデータをシミュレートする1-1 データベースとテーブルスクリプトを作成する - v...

Linuxの相対パスと絶対パスの使用

01. 概要絶対パスと相対パスはシェル環境でよく使用され、それぞれに独自の用途があります。相対パスの...

CSS でよく使用されるフォントサイズ、フォント単位、行の高さの詳細な説明

px(ピクセル)ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとし...

Alibaba Cloud Centos7.X で外部にポートを開く方法

一言で言えば、大手メーカーからクラウド サーバーを購入する場合は、セキュリティ グループに移動して、...

WeChatアプレット開発の実践スキル:データの転送と保存

日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...

幅の比率に応じて高さを変えるCSSを実装するいくつかの方法

[解決策1: パディングの実装]原理:要素の padding の値がパーセンテージの場合、このパーセ...

分散監視システムにおけるZabbixのアクティブ、パッシブ、Web監視のプロセスの詳細な説明

前回の記事では、Zabbix のネットワーク検出機能について学習し、アクションと組み合わせてホストの...

HTML iframe と frameset の違い_PowerNode Java Academy

導入1.<iframe> タグ: iframe は、ページ内に内部フレームを生成するイン...

Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

この記事では、Vueの自己ネストツリーコンポーネントの使い方を参考までに紹介します。具体的な内容は次...

MySQL パフォーマンス ストレス ベンチマーク ツール sysbench の使い方の紹介

目次1. sysbenchの紹介#プロジェクトダウンロードアドレス: 2. Sysbenchのインス...