get each input name and values in each table td in a row where button is clicked

Question

I want to get each attribute name and each input values in each td's in a row where the specified button is clicked and then put in the ajax data argument like

data: { input1_name : input1_value,input2_name : input2_value,input3_name : input3_value }

for example if user click the button 1 then this button will then get each input value and name in the same row as the button e.g. if button 1 and button 1 is in the row 1 then loop on each tds, get each input value and name and put each input value and name to the ajax data argument. Surely I could use .each function to get each input name and values but I dont know how to put it the ajax data argument so that it will look like this.

data: { input1_name : input1_value,input2_name : input2_value,input3_name : input3_value }

Any help, clues, suggestions, help, recommendations would be greatly appreciated. Thank you!

$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
   url: "/role",
   type: "post",
   data: { /*each input name with each input's corresponding values here */ },
   success: function(data){
     alert("success");
   }
   }); //end of ajax
  }); //end of button click
});

table{width: 100%;}
table thead th{font-weight: bold;border-bottom: 1px solid #ccc;}
table thead th, table tbody td{text-transform: uppercase; font-size: 15px;text-align: center;padding: 5px;}
table tbody td{border-top: 1px solid #ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>test header 1</th>
      <th>test header 2</th>
      <th>test header 3</th>
      <th>Option</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent_tr">
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><button>submit 1</button></td>
    </tr>
    <tr class="parent_tr">
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><button>submit 2</button></td>
    </tr>
    <tr class="parent_tr">
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked /></td>
      <td><button>submit 3</button></td>
    </tr>
  </tbody>
</table>

Okku · Accepted Answer · 2015-06-23 00:45:10Z

$(document).ready(function() {
  
  $("button").click(function(e) {
    var data = {};
    /* Select the closest row to the button that was clicked 
    on and find all the checkboxes. Then loop through them 
    and add the values to the data object created above 
    using their name attributes as keys. */
    $(this).closest('tr').find("input[type=checkbox]").each(function(){
      data[$(this).attr("name")]=$(this).attr("value");
    });
    $.ajax({
      url: "/role",
      type: "post",
      data: data,
      success: function(data) {
        alert("success");
      }
    }); //end of ajax
  }); //end of button click
});

table {
  width: 100%;
}
table thead th {
  font-weight: bold;
  border-bottom: 1px solid #ccc;
}
table thead th,
table tbody td {
  text-transform: uppercase;
  font-size: 15px;
  text-align: center;
  padding: 5px;
}
table tbody td {
  border-top: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>test header 1</th>
      <th>test header 2</th>
      <th>test header 3</th>
      <th>Option</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent_tr">
      <td>
        <input type="checkbox" name="checkbox1" value="checkbox1_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox2" value="checkbox2_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox3" value="checkbox3_vaue" checked />
      </td>
      <td>
        <button>submit 1</button>
      </td>
    </tr>
    <tr class="parent_tr">
      <td>
        <input type="checkbox" name="checkbox4" value="checkbox4_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox5" value="checkbox5_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox6" value="checkbox6_vaue" checked />
      </td>
      <td>
        <button>submit 2</button>
      </td>
    </tr>
    <tr class="parent_tr">
      <td>
        <input type="checkbox" name="checkbox7" value="checkbox7_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox8" value="checkbox8_vaue" checked />
      </td>
      <td>
        <input type="checkbox" name="checkbox9" value="checkbox9_vaue" checked />
      </td>
      <td>
        <button>submit 3</button>
      </td>
    </tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

get each input name and values in each table td in a row where button is clicked

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related