CODEWITHSUNDEEP
javascriptjqueryajax
Juliver Galleto
Juliver Galleto

Reputation: 9047

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

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>

Upvotes: 0

Views: 735

Answers (1)

Okku
Okku

Reputation: 7819

$(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>

Upvotes: 1

Related Questions