Robel Haile Robel Haile - 3 months ago 6
C# Question

How can i get into the value inside of an html <tr> object

So i have this code. I want to send the data inside of my html inputs to the controllers parameters. In my jquery i have a line that looks like this

var currentRow = $(this).closest("tr");
But i have no clue how to get into the values of each input inside the currentRow Object how can i do that or do you maybe know a better way to do this?

// my html
@foreach (var discount in Model.DiscountList)
{

<tr>
<td>@Html.TextBox("codeTextBox", discount.Code) </td>
<td><input type="checkbox" name="freeShippingCheckBox" id="freeShippingCheckBox" checked="@discount.FreeShipping" /> </td>
@if (discount.isTwoForThree == true)
{
<td><input type="tel" value="Ta 3 betala för 2" readonly /></td>
}
else
{
<td><input type="number" value="@discount.PercentOffPrice"/></td>
}
<td><input type="checkbox" id="activeCheckBox" name="activeCheckBox" checked="@discount.Active" /></td>
<td><input type="datetime" value="@discount.CreatedDate" readonly /></td>
<td>
<input type="button" value="Radera" class="fa fa-remove" data-url="@Url.Action("DeleteDiscountCode","Discount",new { id= discount.Id})" />
<input type="button" value="Uppdatera" class="fa fa-update" data-url="@Url.Action("UpdateDiscount","Discount",new { id= discount.Id, })" />
<input type="button" value="Produkter" class="fa fa-products" />
</td>
<input id="@discount.Id.ToString()" type="hidden" value="@discount.Id" />
</tr>
}


//my jquery
$(".fa-update").on("click", function () {
var currentRow = $(this).closest("tr");

console.log(currentRow.children("#freeShippingCheckBox").val());
if (confirm("Are you sure you want to edit this discount code?"))
{

$.post($(this).data("url"), function (data) {
$.ajax({
url: '@Url.Action("DeleteUser","Discount")',
type: "POST",
data: "freeShipping=..........???????????",
success: function (data) {
if (data) {

}
location.reload();
}
});
location.reload();
alert("Deleted");
})
}

});



//my controller
[HttpPost]
public void UpdateDiscount(int id, bool freeShipping, int percentOfPrice, bool active)
{
Service.DiscountService.UpdateDiscount(id, freeShipping, percentOfPrice, active);
}

Answer

My proposal is:

$(function () {
  $(".fa-update").on("click", function (e) {
    var data = {};
    var currentRowParams = $(this).closest("tr").find('input').each(function(index, element) {
      var name = element.name ? element.name : 'undefined' + index;
      data[name] = element.value || '';
    });
    var x =  JSON.stringify(data);
    console.log(x);
    
    //
    // If instead you want the params in a traditional GET
    //
  });
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<table>
    <tbody>
    <tr>
        <td>@Html.TextBox("codeTextBox", discount.Code) </td>
        <td><input type="checkbox" name="freeShippingCheckBox" id="freeShippingCheckBox" checked="@discount.FreeShipping" /> </td>
        <td><input type="tel" value="Ta 3 betala for 2" readonly /></td>
        <td><input type="checkbox" id="activeCheckBox" name="activeCheckBox" checked="@discount.Active" /></td>
        <td><input type="datetime" value="@discount.CreatedDate" readonly /></td>
        <td>
            <input type="button" value="Radera" class="fa fa-remove" data-url="@Url.Action("DeleteDiscountCode","Discount",new { id= discount.Id})" />
            <input type="button" value="Uppdatera" class="fa fa-update" data-url="@Url.Action("UpdateDiscount","Discount",new { id= discount.Id, })" />
            <input type="button" value="Produkter" class="fa fa-products" />
        </td>
        <input id="@discount.Id.ToString()" type="hidden" value="@discount.Id" />
    </tr>
    </tbody>
</table>

Comments