Simple jQuery handle processing

Question

I have a simple HTML page where I will be having few rows, each row specifies a record in database, I have some input fields on each to collect and a link at the end, when I click that I need to collect the input field values on the same row.

The HTML goes like this:

<tr>
    <td>Name</td>
    <td><input name="mode_sort"/></td>
    <td><input name="mode_selected" type="checkbox"/></td>
    <td><a href="#" onclick="return add_this_mode(this);">Add</a></td>
</tr>

So I will be writing my code to collect input fields on the row when I click the "Add" link, I'm not sure how to pass the current clicked selector and get the field values with that in add_this_mode() function.

possible duplicate of [Get form data with Javascript/Jquery](http://stackoverflow.com/questions/2276463/get-form-data-with-javascript-jquery) — benomatis, Oct 12 '14 at 15:00
You coud you jQuery to `find` the inputs in that row. http://api.jquery.com/find/. Even with jQuery I would use a class selector for the add button instead of a function name. — Timo002, Oct 12 '14 at 15:08

score 2 · Accepted Answer · answered Oct 12 '14 at 15:05

Within the function you can use jQuery traverse methods to isolate the parent row and then to find elements within that row

function add_this_mode( elem){
  /* get parent row */
  var $row = $(elem).closest('tr');
   /* use find() to get other elements in row */
  alert( $row.find('[name=mode_sort]').val() );

}

Simple jQuery handle processing

1 Answers1