質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • PHP

    23495questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    19819questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11088questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CodeIgniter

    289questions

    CodeIgniterは、PHP向けオープンソースのWebアプリケーションフレームワークです。CodeIgniterは覚える構文が少なく、自由度も高いため、PHPを理解していれば構築が簡単です。

JavaScriptで追加したフォームの数に関して

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 569

mochikuzu

score 6

前提

[会員登録ページ]
・名前入力フォーム
・性別セレクトボックス (男/女)
・状態プルダウンメニュー(DBから取得したものをリスト)
・「登録」ボタン

[DB]
・状態テーブル [小学1年生、小学2年生、小学3年生、小学4年生、小学5年生、小学6年生]
・会員テーブル [名前カラム:性別カラム:状態カラム](ここに登録したい)

が存在するとする。

行いたいこと

  1. 「+」ボタンをクリックで「状態プルダウンメニュー」を追加
  2. 「ー」ボタンをクリックで最後に追加した「プルダウンメニュー」を削除
  3. 「+」ボタンで「状態プルダウンメニュー」を2つ追加した場合、テーブルの1行目に1つ目の「状態」と「名前」「性別」が登録され、2行目には2つ目の「状態」と「名前」「性別」が登録される様にしたい。
入力内容 : 
       名前「田中 太郎」
       性別「男」を選択
       状態1「小学1年生」
       状態2「小学2年生」


    ↓登録


想定結果 : 
    会員テーブル
      1行目
       名前:「田中太郎」
       性別:「男」
       状態1:「小学1年生」
      2行目
       名前:「田中太郎」
       性別:「男」
       状態2:「小学2年生」

進捗状態

「+」ボタンで状態フォームの追加と
「ー」ボタンで最後に追加したフォームの削除は実装できたのですが、
追加したフォームの数をどのようにPHP側でカウントし、DBに登録する際に利用していいかがいまいちパッと思いつきません。
どうすればうまいことできるんでしょうか?

var $count = 1;
//仕様フォーム追加
function add_orderform()
{
      var element = document.createElement('div'); 
       element.innerHTML = 'プルダウンメニュー'
       element.setAttribute("name", "additem_" + $count);

      var objBody = document.getElementById("-----"); 
      objBody.appendChild(element);
}

//フォームを削除
function remove_orderform()
{
        if ( $count == 1 ) { return; }

        var field = document.getElementById("-----");
        field.removeChild(field.lastChild);
        $count = --$count;
}
<!-- 仕様名追加ボタンと削除ボタン -->
 <button id="" class="" type="button" onclick="add_orderform()">+</button>
 <button id="" class="" type="button" onclick="remove_orderform()">-</button>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • masaya_ohashi

    2017/02/02 17:23 編集

    これだけのコードでは回答するのは難しいです。フォームのHTMLと、add_orderform、remove_orderformを質問文に追記してください。
    追記 すみません、add_orderformとremove_orderformは書かれてましたね…

    キャンセル

回答 1

checkベストアンサー

+2

状態を配列で渡すフォームを作るとなると、以下のようになります。

<form>
    <input name="名前" type="text">

    <input name="性別" type="radio" value="男">
    <input name="性別" type="radio" value="女">

    <select name="状態[]">
        <option value="小学1年生">小学1年生</option>
        <option value="小学2年生">小学2年生</option>
        <option value="小学3年生">小学3年生</option>
        <option value="小学4年生">小学4年生</option>
        <option value="小学5年生">小学5年生</option>
        <option value="小学6年生">小学6年生</option>
    </select>
    <select name="状態[]">
        <option value="小学1年生">小学1年生</option>
        <option value="小学2年生">小学2年生</option>
        <option value="小学3年生">小学3年生</option>
        <option value="小学4年生">小学4年生</option>
        <option value="小学5年生">小学5年生</option>
        <option value="小学6年生">小学6年生</option>
    </select>
    <select name="状態[]">
        <option value="小学1年生">小学1年生</option>
        <option value="小学2年生">小学2年生</option>
        <option value="小学3年生">小学3年生</option>
        <option value="小学4年生">小学4年生</option>
        <option value="小学5年生">小学5年生</option>
        <option value="小学6年生">小学6年生</option>
    </select>
    <select name="状態[]">
        <option value="小学1年生">小学1年生</option>
        <option value="小学2年生">小学2年生</option>
        <option value="小学3年生">小学3年生</option>
        <option value="小学4年生">小学4年生</option>
        <option value="小学5年生">小学5年生</option>
        <option value="小学6年生">小学6年生</option>
    </select>
</form>

このように、パラメータ名の後ろに[]とつけることで、同一名のパラメータをPHP側で配列で受け取ることができます。

$statusList = $_REQUEST["状態"]; // 状態が3つあるなら3つの配列になる
foreach($statusList as $status) {
    echo $status;
}

これを踏まえ、add_orderformやremove_orderformは状態[]という名前のselectタグを増やしたり減らしたりする処理を書けばよいです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/02 18:04

    とても分かり易かったです!無事実装できました!ありがとうございます!

    キャンセル

同じタグがついた質問を見る

  • PHP

    23495questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    19819questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11088questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CodeIgniter

    289questions

    CodeIgniterは、PHP向けオープンソースのWebアプリケーションフレームワークです。CodeIgniterは覚える構文が少なく、自由度も高いため、PHPを理解していれば構築が簡単です。