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

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

ただいまの
回答率

90.61%

  • HTML

    8668questions

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

  • HTML5

    3875questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • JSP

    904questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

  • Struts 2

    127questions

    Apache Struts 2は、Apache Strutsプロジェクトにて開発されているオープンソースのJavaベースのWebアプリケーションフレームワークです。Sturts1に比べ、設定ファイルの削減、依存性の注入、POJO等の改善がなされています。

input type="hidden"が複数ある場合の取得

解決済

回答 1

投稿 編集

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

shim1

score 22

struts2を使って開発をしております。
divの中にデータを入れてクリックしたほうのデータをformで送るようなことをやっていますが、input type="hidden"を複数仕込んだ時の任意の取り方といいますか、
困っとるわけです。

<s:form action="hoge" name="hogeForm">
  <div class="dataArea">
    <input type="hidden" name="id" value="1">
    <input type="hidden" name="name" value="sumomo">
    <h2>No1</h2>
    <h3>sumomo</h3>
  </div>

   <div class="dataArea">
    <input type="hidden" name="id" value="2">
    <input type="hidden" name="name" value="melon">
    <h2>No2</h2>
    <h3>melon</h3>
  </div>

</s:form>

<script type="text/javascript">
  $('dataArea).on('click', function(){
    var id = $(this).children('input');
    id.attr('name', 'submitId');  
   
  var name = $(this).children('input');
    name.attr('name', 'submitName');

   document.hogeForm.submit();//送りたいほうのdivタグをクリックすると送信する
  
</script>

コードは以上になります。idとname両方とも送ることはできましたが、問題は
どちらもsubmitNameで送ってしまってることです。

[1,sumomo]となってしまいます。

submitIdの受け取りは空。おそらく
var name = $(this).children('input');
name.attr('name', 'submitName');
したことより上書きされてしまったことが見受けられます。

input属性を取得するときに一番目、二番目と任意のほうを取得する方法をおしえてください。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • mts10806

    2018/05/24 20:18

    buttonはどこにあるのでしょうか。単純にformを2つにわけるのではダメでしょうか?

    キャンセル

  • shim1

    2018/05/24 21:18

    buttonはないです。そのかわりにjavascriptでform送信してるつもりなんですが、、。formを分けることも考えましたが実際はもっとデータの数を増やしますんでこのようなつくりにしました。。

    キャンセル

回答 1

checkベストアンサー

0

こんな感じで

$(function(){
  $('.dataArea').on('click', function(){
    $('.dataArea input:hidden').prop('disabled',true);
    $(this).find('input:hidden').prop('disabled',false);
    $(this).closest('form').trigger('submit');
  });
});
<form method="post">
  <div class="dataArea">
    <input type="hidden" name="id" value="1">
    <input type="hidden" name="name" value="sumomo">
    <h2>No1</h2>
    <h3>sumomo</h3>
  </div>
   <div class="dataArea">
    <input type="hidden" name="id" value="2">
    <input type="hidden" name="name" value="melon">
    <h2>No2</h2>
    <h3>melon</h3>
  </div>
</form>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/24 22:47

    回答ありがとうございます。
    解説すると、、、まず.dataAreaのhiddenをすべてdisabledにしてformで送信しないようにしてから
    thisつまりクリックした要素だけ見つけてdisabledを解除。closestは初めて見たんですが、調べてみると
    親要素の取得ということでformの親要素を取得?のちsubmitを実行ということでいいんですかね、、。
    最後の $(this).closest('form').trigger('submit');がよくわからず、document.form.submit()との違いを知りたいです、

    キャンセル

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

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

関連した質問

  • 受付中

    複数のformを一つにしてhiddenを複数postしたい

    複数のformを一つにしてhiddenを複数postしたいのですが、 javascriptで書くのでしょうか <form>     <input type="text" name=

  • 解決済

    選択済みのラジオボタンを押すと選択が解除される

    選択済みのラジオボタンを押すと選択が解除される 上記の通りの実装を考えております。下記のソースコードのようにラジオボタンが1セットのみでしたら、下記の通りのソースコードでも問題が

  • 解決済

    動的に追加していく画像選択フォームのプレビュー表示

    追加ボタンを押すと動的に、画像選択フォームを追加していき、画像のプレビューを表示するフォームを作っています。ただ、フォームを新しく動的に追加していくと、当然画像も追加されてプレビュ

  • 解決済

    javascript(coffeescript) でsubmitする

    前提・実現したいこと submitボタンではなく、チェックボックスをクリックする時点で、フォームをsubmitしたいと考えてます。 しかし、submitされている気配がありません。

  • 解決済

    jQueryでcheckboxの値を取得して変数に配列で格納したい

    チェックボックスを複数チェックした時にチェックされた値を 変数に配列として格納したいのですがうまくいきません。 例えば下記コードでは「A」と「C」がチェックされたときに 変数(

  • 解決済

    vuefireでvueの値をfirebaseに渡したいがFirebase.child failedが...

    vuefireを導入しバインディングを試みました。 が、下記のエラーが出てしまい。。。refを上手く設定できていないんでしょうか? var Vue = require("vue

  • 解決済

    jQueryでテーブルのデータを送信

    fuel phpで作ったテーブルのデータをjqueryで送信し、phpで受け取るという機能を実装しているのですが うまくいきません。テーブルのデータとしては、チェックボックスの値と

  • 解決済

    AjaxZip3を見えない要素に入力したい

    ・実現したいこと AjaxZip3で、郵便番号から住所を取得できるが、ユーザー側から見えない要素のところに入れたい ・やってみたこと hiddenフィールドに入れるように実装し

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

  • HTML

    8668questions

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

  • HTML5

    3875questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • JSP

    904questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

  • Struts 2

    127questions

    Apache Struts 2は、Apache Strutsプロジェクトにて開発されているオープンソースのJavaベースのWebアプリケーションフレームワークです。Sturts1に比べ、設定ファイルの削減、依存性の注入、POJO等の改善がなされています。