コース: JavaScript 基本講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

フォームのデータを入れ子のオブジェクトで設定する

フォームのデータを入れ子のオブジェクトで設定する - JavaScriptのチュートリアル

コース: JavaScript 基本講座

フォームのデータを入れ子のオブジェクトで設定する

このレッスンでは、フォーム要素のデータを 入れ子のオブジェクトを関数に渡して、 とりあえず設定してみたいと思います。 フォーム要素のデータの設定は、実は ほぼ出来上がっていて、 この setFormValues というのを呼び出して 設定を行っているんですが、 オブジェクトで渡しています。 そして、オブジェクトのプロパティ名は、 要素に設定した name になってるんですね text、radio、select、textArea と ということで、ところがこの チェックだけ抜けてるんですね。 チェックはちょっと厄介なので 飛ばしてありますが、 check 以外は設定ができます。 どのように設定してるかというと、 「for in」という構文で、 オブジェクトのプロパティ名を取り出して、 そしてここで、 コンソール、確認していますが、 プロパティ名とそのプロパティ名の 値を確認したうえで、 form の name 属性で フォームが取得できますので、 value を設定すると。 checkbox の場合には、 value じゃまずいんですよね。 だから飛ばしてあるんですが、 checkbox 以外は出来ていますので 確認しましょう。 もう設定は済んでいるんですけれども、 「Console」に オブジェクトの値が出ていますので、 確認しますと、 「text」、「new text is set」、 なってますね。 「radio」は2番が選択されて、 「select」は3番になっています。 「checkbox」飛ばしてますね。 3番になっていて「textArea」は、 「new text is written.」ということで、 「checkbox」以外、 設定はできていますので、 残る「checkbox」を設定しましょう。 引数に渡しているこのオブジェクトですね。 これに checkbox を 加えようというんですが、 1行にしておくとちょっと見苦しいので、 改行して見やすくしましょう。 radio、それから select、 textArea ですね。 あと、「括弧閉じ」は改行しましょう。 で、順番で言うとこの radio の後に checkbox が入るんですが、 ここでちょっと、やはり例外的な扱いです。 他は、name属性を このプロパティにしているんですが、 ここでは…

目次