リロードのない複数の送信フォーム

Question

私は、送信フォームのループを作成し、ページ全体を更新/再読み込みせずにこれらの送信フォームのいずれかから送信できるかどうか疑問に思っていました。

私が知りたいのは、現在私がウェブサイト上で作業していることと、私がやりたいことは、写真/メッセージが好きなようにユーザーが押すことができるようにすることです（twitter ozzのツイート私は単純な@using（html.beginform（ ""、 ""））を行う場合、likeボタンを押すと、ページ全体をリフレッシュしますが、私がjqueryを使うと、それはうまく動作します最後のフォーム（上に1つ）に

$(document).ready(function() { 
    $("#submit-buttons").on('click', function() { 
     var id = $('#submit-buttons').val(); 
     $.ajax({ 
      url: "/Profile/Like", 
      type: "POST", 
      data: { id: id } 
     }) 
     .done(function (partialViewResult) { 
      $("body").html(partialViewResult); 
      window.location.href = "/Profile/Index"; 
     }); 
    }); 
}); 

<button id="submit-buttons" name="id" value="@item.Id" type="submit"></button> 

提出-ボタンのようなボタンであり、それがないものは、値（ID）を取得し、コントローラに渡し、それを挿入しますデータベースに転送する。これらのボタンのいくつかがありますが、1つの作品（最後にループしたもの）のみです。私は何を間違えたのですか？ ：/

助けてください。 ありがとう！

Answer 1

あなたの質問を理解するのに少し問題がありますが、$(this)セレクタとtype=submitを使用すると効果があると思います。

$(document).ready(function() { 
    $("#submit-buttons").on('click', function() { 
     var id = $(this).val(); 
     $.ajax({ 
      url: "/Profile/Like", 
      type: "POST", 
      data: { id: id } 
     }) 
     .done(function (partialViewResult) { 
      $("body").html(partialViewResult); 
      window.location.href = "/Profile/Index"; 
     }); 
    }); 
}); 

<button id="submit-buttons" name="id" value="@item.Id" type="button"></button> 

Answer 2

のidのは、「これらのボタンのいくつかが」がある場合、それらは同じid（＃提出-ボタン）を持つことができません

$(document).ready(function() { 
    $(".submit-buttons").on('click', function() { 
     var id = $(this).val(); 
     $.ajax({ 
      url: "/Profile/Like", 
      type: "POST", 
      data: { id: id } 
     }) 
     .done(function (partialViewResult) { 
      $("body").html(partialViewResult); 
      window.location.href = "/Profile/Index"; 
     }); 
    }); 
}); 

<button id="submit-button1" class="submit-buttons" name="id" value="@item.Id" type="submit"></button>