Store specific value in javascript when multiple forms are present

Question

I've got a list of 10-20 objects on each page creating these forms:

<div id="routeTable">
  {% for route in route_list %}
  <div id="routeDone">
    <form class="doneForm" action="/route/complete/" method="post">
      <input type="hidden" name="route_id" value="{{ route.route_id }}" />
      <input type="hidden" name="next" value="{{ request.get_full_path }}" />
      <input type="submit" value="Done" class="doneButton" />
    </form>
  </div>
  {% endfor %}
</div>

And I'm trying to add some jquery to the page in order to intercept the usual form submit and instead do so using ajax as below. (I already have a view that returns an html chunk which will be swapped out for the above div#routeTable. The problem is line 4 "var route_ID...":

<script>
$(document).ready(function() {
  $(".doneForm").submit(function() {
    var route_id = $(this).attr('input[name=route_id]').val()

    $.ajax({
      type: "post",
      url: "/route/complete/",
      data: route_id,
      success: function(data) {
        $("#routeTable").html(data);
      }
    });
  return false;
  });
});
</script>

Unfortunately I'm having trouble passing the proper route_id into the js variable named route_id. I expect it will require use of the 'this' keyword, but I haven't been able to figure out exactly how.

Any suggestions on how to fix up my javascript would be greatly appreciated.

Martin Jespersen · Accepted Answer · 2011-02-17 20:18:19Z

1

Try to change

var route_id = $(this).attr('input[name=route_id]').val()

to

var route_id = $(this).find('input[name=route_id]').val()

The reason being that input[name=route_id] is not an attribute, but a selector that represent a tag input and an attribute on that tag [name=route_id].

You could also do

var route_id = $('input[name=route_id]',this).val()

answered Feb 17, 2011 at 20:18

Martin Jespersen

26.3k8 gold badges60 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yuji 'Tomita' Tomita · Accepted Answer · 2011-02-17 20:19:42Z

0

var route_id = $(this).attr('input[name=route_id]').val()

Should be something like:

var route_id = $(this).find('input[name=route_id]').val()

answered Feb 17, 2011 at 20:19

Yuji 'Tomita' Tomita

119k32 gold badges287 silver badges247 bronze badges

Collectives™ on Stack Overflow

Store specific value in javascript when multiple forms are present

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related