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

Question

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属性を取得するときに一番目、二番目と任意のほうを取得する方法をおしえてください。

Comments

[m.ts10806]

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

[shim1]

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

Answer 1

こんな感じで

$(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>

Comments

[shim1]

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