Question

I’m using the jquery form plugin (http://jquery.malsup.com/form/) to show the results of a submitted form on a page. The issue I’m running into is when there are multiple forms per page and getting the results to show in the div for that specific form.

Here’s the form code:

<form class="contest-rating-form" id="contest-rating-1" name="Contest" method="post" action="/">    
<input type="hidden" name="rating" value="1">
<input type="submit" name="submit" value="Vote"></p>
</form>
<div class="message"></div>

Note the id=”contest-rating-1″ – each form on the page has a unique #, so there might be id=”contest-rating-55″ and id=”contest-rating-100″, etc.

Here’s my JS:

<script>
$(document).ready(function() { 
  var options = {
   target: '.message', 
   success: showResponse
  }; 
  $(".contest-rating-form").submit(function() { 
      $(this).ajaxSubmit(options); 
      return false; 
  }); 
}); 
function showResponse(responseText, statusText)  {}
</script>

.message gets updated with a response, but every single instance of .message is updated, not just the one for that form.

Thanks for any help on this!

Edited to add: I could also add the same # to .message, so that .message-1 matches #contest-rating-1, etc. Just not sure how to get that to work in the JS dynamically for each form.

Answer 1

Assuming that your message element will always be after the form element you could change your code to the following:

<script>
$(document).ready(function() { 
  var options = {
   success: showResponse
  }; 
  $(".contest-rating-form").submit(function() { 
      options.target = $(this).next(".message");
      $(this).ajaxSubmit(options); 
      return false; 
  }); 
}); 
function showResponse(responseText, statusText)  {}
</script>

This way options.target will always point to the message element below the submitted form.