python - Store specific value in javascript when multiple forms are present -

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

<div id="routetable">   {% 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 add jquery page in order intercept usual form submit , instead using ajax below. (i have view returns html chunk swapped out above div#routetable. problem 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 proper route_id js variable named route_id. expect require use of 'this' keyword, haven't been able figure out how.

any suggestions on how fix javascript appreciated.

try 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 input[name=route_id] not attribute, selector represent tag input , attribute on tag [name=route_id].

you

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