ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery が多すぎる inputs_jquery によるフォーム送信を解決する

jQuery が多すぎる inputs_jquery によるフォーム送信を解決する

WBOY
リリース: 2016-05-16 15:46:01
オリジナル
1128 人が閲覧しました

最近、相手方から、ユーザーがオンラインで入力して送信できるように、企業 Web サイトに単語のようなフォームを追加してほしいという依頼を受けました。

よく見ると、フォームには 100 を超えるフィールドがあり、かなり恐ろしいです。入力するたびに ID と名前を手動で入力すると、非常にひどい物理作業になります。

何度も考えた結果、IDと名前をいちいち入力する手間を省くために、このフォームの一連の送信作業をJSとPHPを使って解決することにしました。

フォームコンポーネント

フォームはまず顧客の要件に従い、入力する必要のあるフォームとオプションは、ユーザー エクスペリエンスと一致するように Word 文書のプロトタイプに従ってレイアウトされます (以下を参照)。

(上の写真は例としてフォームのほんの一部です。実際には、このフォームは非常に大きいです)

フォームの HTML レイアウトが完了したら、フォーム送信用にこれらのフォームの入力の ID と名前の設定を開始する必要があります。

序文で述べたように、入力が多数あるため、ここでは JS を使用して、入力に ID と名前を自動的に追加します。コードは次のとおりです (jquery メソッド):

$(document).ready(function(){
var inputNum = 0;
$(‘input').each(function(){
$(this).attr({name:‘val'+inputNum,id:‘val'+inputNum});
inputNum++
})})
ログイン後にコピー

js による処理後、ページ上のすべての入力に ID と名前が 1 ずつ増加して自動的に追加されます。この時点では、基本的にはこのフォームで通常どおり使用できます。 (プログラマーなら誰でも理解できるので、説明はしません。)

フォームGETパート

OK、フォームは PHP プログラムに送信され、通常どおり処理されます。もちろん、上記の方法は、.net、jsp、asp などのあらゆる種類の Web プログラムにも適用できます...

次のステップは、送信された文字列を逆アセンブルして、フォーム内の値を取得することです。この記事では、フォームの渡された値を取得する方法については説明しません。

フォームから渡される値もN個あるため、これらの値を取得するために配列変数を1つずつ書くのは不可能なので、ここでもいくつかのメソッドを使用してそれらを処理する必要があります。

さて、本題に取り掛かりましょう。まず、前の js プログラム ロジックに従ってこれらの各配列を 1 ずつ増分して配列の出力を実現する方法を考えてみましょう。

プログラムコードは次のとおりです:

<&#63;php
$num = 0; //初始化计数变量
$_REQUEST[‘val'.$num]; $num++; //插入到需要获取值的地方,每个需要获取传值的地方重复使用这串代码即可
&#63;>

ログイン後にコピー

この一連のコードは主にフォーム入力とリクエストの順序が一致している場合に使用されます。順序が 1 つずつ一致していないと混乱が発生します。なので使用する際には注意が必要です!

データベースに送信する場合は、取得したパラメータを配列に処理してからデータベースに挿入するために foreach を使用すると便利です。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート