How can I create a loop in an onClick event?

Question

I want to write an onClick event which submits a form several times, iterating through selected items in a multi-select field, submitting once for each.

How do I code the loop?

I'm working in Ruby on Rails and using remote_function() to generate the javascript for the ajax call.

Answer 1

My quick answer (as I've not coded it yet) would be to create another function that creates a POST using XMLHTTPRequest and the specific parameters for a single call. Then inside your onClick() handler call that function as you loop through your selected items.

I would suggest that you do a Proof of Concept just using a dummy HTML page and javascript and then try to figure out how to get it to work in RoR.

Also, why are you attempting to make the multiple calls from the browser as opposed to handling the looping conditions in the RoR controller?

Answer 2

You'd have to manually write some javascript. Rails' generators won't do something this complex for you.

Prototype.js will do almost all of the heavy lifting for you though. Off the top of my head, the code would look like this: (UNTESTED)

<%= javascript_include_tag 'prototype' %>

<form id="my-form">
  <input type="text" name="username" />

  <select multiple="true" id="select-box">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
  </select>
</form>

<script type="text/javascript" language="javascript">
submitFormMultipleTimes = function() {
  $F('select-box').each(function(selectedItemValue){
    new Ajax.Request('/somewhere?val='+selectedItemValue, 
      {method: 'POST', postBody: Form.serialize('my-form')});
  });
}
</script>

<a href="#" onclick="submitFormMultipleTimes(); return false;">Clicky Clicky</a>

Note:

• Using Prototype's $F() method to get the selected item values. It returns an array for multiple-select boxes

• Using Ajax.Request to send the data to the server as a POST.
  To the server, this looks exactly the same as just submitting a normal form

• Using Form.serialize to get the data out of the form and stick it in the request's body.
  This is the exact same data that would get sent if you submitted the form normally

Answer 3

Unless you're modifying the browser DOM, I can't think of a reason that you would want to do this. (But without knowing fully what you're trying to do, I could be wrong in this case =)

You should be able to send back data from mulitple objects (even nested complex objects in your form) in just one POST.

Chances are the rails code will be a lot less complex, easier to write (and easier to debug!) than any javascript you come up with.

If you need to update different parts of the page depending on what the user has selected, you can still make multiple updates to the DOM via RJS in your render :update block, so that shouldn't be an issue.

You'll also have the (large) benefit of only one server round-trip instead of the multiple trips you would need using multiple POSTS.

Cheers Dave Smylie