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

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

ただいまの
回答率

88.35%

phpによるデータベースの更新(javascript)

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 856

callmichael

score 73

データベースから値を取得して、下記のようなリストで表示するようなページを作成しています。
その中の1つをクリックしたら、その値をフォームに反映させ、
データベースの更新を行うような仕組みを実装したいと思っています。
javascriptのクリックイベントでやるイメージなのですが、
同じクラスでidをそれぞれ付けられないため、どのように値を取ってくればいいのかがわかりません。
何かいい方法があれば教えていただけないでしょうか。
よろしくお願いいたします。

<div class="a">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>

5/8 14:50追記

色々と調べてみましたが、下記のようなやり方でできないかと考えています。
しかしうまくいかないみたいで、おかしな所があれば教えていただけないでしょうか。
よろしくお願いいたします。

<div class="a" onclick = "getID(this);" id="固有の値">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a" onclick = "getID(this);" id="固有の値">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a" onclick = "getID(this);" id="固有の値">
    <a href="#">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
function getID(element) {
var ele_id = element.id;
var class_A = document.getElementById('#'+ele_id).find('.A').innerHTML;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

checkベストアンサー

+1

 table 関連要素 API

HTMLの構造を変える事は可能でしょうか。
DBは基本的に2次元データなので HTMLTableRowElement#rowIndex 等のtable関連要素のAPIを使えると捗ります。
http://www2u.biglobe.ne.jp/~oz-07ams/2003/HTML/HTMLTableRowElement.html

 上位要素ノードで click を監視する

シンプルに捉えると document.querySelectorAll('.a') を for 文で繰り返し処理して element.addEventListener('click' handleClick, false) する方法を考えつきます。
これを発展させると <div class="a"> の親に div 要素を置き、一つのclickイベントハンドラで監視する方法になります。
前述の table 構造にするなら、table要素 or tbody要素で監視する事になるでしょう。
「clickされた要素」は event.target で参照できるので className や classList で特定しましょう。

 DB への問い合わせ

SQL を使うとして SELECT を使うことになると思われますが、ユニークなIDを割り当ててあると検索がとても楽です。

Re: callmichael さん

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/08 14:52

    構造自体はこのままで進めたいと思っています。
    情報を追記したので、ご教授いただけないでしょうか。
    よろしくお願いいたします。

    キャンセル

  • 2016/05/08 17:47

    getElementByIdに#は不要というのとfindは標準で存在しないですね。
    https://jsfiddle.net/c6mvkreb/

    キャンセル

0

リストそれぞれにアトリビュートを設定してクリックイベント時にそのアトリビュートを取得して判断すると良いかと。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

<script>
function update(val) {
    f.key.value = val;
    f.submit();
}
</script>
<form name="f" method="get" action="[更新用php]">
    <input type="hidden" name="key" value=""/>
</form>
<div class="a">
    <a href="javascript:void(0);" onclick="update(1);">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="javascript:void(0);" onclick="update(2);">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="javascript:void(0);" onclick="update(3);">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>
<div class="a">
    <a href="javascript:void(0);" onclick="update(4);">
        <p class="A">...</p>
        <p class="B">...</p>
    </a>
</div>

みたいな感じでやると、クリックした時に、[更新用php]にリクエストパラメータkeyにupdateの引数を乗せたURLへアクセスします。(説明しやすくするためにmethod="get"にしてますが、更新の場合は通常method="post")

どんな感じで更新したいのかわからないので、具体的な更新方法の説明はできないですが、
クリック位置と更新内容の対応が取れることを理解してもらえれば幸いです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/08 14:53

    具体的な更新方法としては、クリックした時にフォームにその値を表示させ、
    登録のタイミングでphpを使ってupdateしたいと思っています。

    キャンセル

0

各クラスを別の form タグで囲んで識別する
みたいなことはできそうですが
まあ、普通はやらないと思う :-P

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 88.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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