JQueryの$postで選んだものだけで動かしたいのですが


$postはphpでデータベースから出したもののように、同じ要素(formのnameとかが)がたくさん表示されている場合、個別に指定してないと送れないようですがやり方がわかりません
例1
<form name = 'form'>
<input type='hidden' name='product_id' value='1'/>
<input type='hidden' name='product_name' value='りんご'/>
<input type='button' value='登録' onClick='get(); return false;'/>
</form>
<form name = 'form'>
<input type='hidden' name='product_id' value='2'/>
<input type='hidden' name='product_name' value='みかん'/>
<input type='button' value='登録' onClick='get(); return false;'/>
</form>


みたいに並んでいる場合

どのように指定すればよいでしょうか?


現状のjavascriptは

$(function(){

$(':button').click(function get(){

 var product_id = document.form2.product_id.value;
 var purduct_name = document.form2.product_name.value;

 $.post('test.php',{ "id": product_id , "name":product_name },
function(output){
$('#test').html(output);
 });
});

のうような感じで作っていますが、もちろん動かない状態です。
送り先にはechoなどでわかりやすく表示するようにしていますが、ダメでした。

javascriptは現在の形にはこだわりません。
コード付きでよろしくお願いします。

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2011/11/05 03:51:43
  • 終了:2011/11/05 19:56:50

ベストアンサー

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302011/11/05 09:43:13

ポイント200pt

Firefox7で動作確認

http://jsfiddle.net/7nnc7/

他2件のコメントを見る
id:Lhankor_Mhy

あ、3回読み込んでる……

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

をどれか1行に。

 

$(':button').click(function(){

  var product_id = $(this).siblings('[name="product_id"]').val();
  var product_name = $(this).siblings('[name="product_name"]').val();

  $.post('test.php',{ "id": product_id , "name":product_name },
    function(output){
      $('#test').html(output);
    });
});

を以下のように。

$(function(){
  $(':button').click(function(){

    var product_id = $(this).siblings('[name="product_id"]').val();
    var product_name = $(this).siblings('[name="product_name"]').val();

    $.post('test.php',{ "id": product_id , "name":product_name },
      function(output){
        $('#test').html(output);
      });
  });
});

 

 結構typoとか凡ミスが多いと思うので、バグ取りもう少し頑張って自分でやった方が勉強になるかと思いますよ、などとおせっかいを申し上げておきます。

2011/11/05 19:16:41
id:robopit

ありがとうございます。

動きました。

凡ミスに関しては、自分で思いこみのせいか気付かないことが多いので

何かツールを探してみます。

2011/11/05 19:55:09
  • id:Cherenkov
    ・formが複数ある理由。
    ・$.postではなく普通にformでpostしない理由。
    はありますか?
  • id:Cherenkov
    $(':button').click(function(){するならformのonclick属性はいらないような。
    もっと単純に直したほうがいいと思います。
  • id:robopit
    formが複数ある理由ですが、属性が違う場合分けなけらばいけないものと思っていたのですが
    囲ってしまっていいんでしょうか

    formでpostしない理由ですが、なぜphpで処理しないのかという意味でしょうか?
    一つのページに複数の機能があるためそれをページ読み込みのたびにするのは負荷がかかると思ったので、javascriptで部品ごとに読み込めれば思いまして

    単純に直すといいますとどのあたりになるんでしょうか?
  • id:Lhankor_Mhy
    質問とは関係ないですが、form要素のname属性は一意でなくてはならないと思います。
  • id:robopit
    Lhankor_Mhyさん

    データベースからphpで引っ張りだし
    さらにそれを他に送るものをjavascirptで操作する場合
    formの値が一緒でないと操作しにくい気がするのですが
    何かさける方法はあるのでしょうか?

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません