CODEWITHSUNDEEP
jqueryrazor
neethu
neethu

Reputation: 65

Find value of text box in each row by clicking on the button in that row?

I have dynamically generated as given below.I need to get the value of text box by clicking on the updateCart button in each row.

 @foreach (var item in Session["Cart"] as List<AP.WebApp.Models.Cart>)
                    {
                    <tr class="eachitem">
                        <td><img src="@item.Path.Split('~')[1]" style="width:200px;height:auto" /><p>@item.Title</p></td>
                         <td>
                        @if(item.Preview == 1){

                            @Html.CheckBox("preview", new { @checked = "checked" })
                        }
                        else
                        {
                             @Html.CheckBox("preview")
                        }
                             </td>
                        <td id="qtyid">
                            <input id="qty" type="text"  value="1"/></td>
                        <td>0</td>
                        <td>
                            <input id="deleteCart" type="submit" value="Delete" data-assigned-id="@item.ID" /></td>
                        <td>
                            <input id="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  /></td>

                    </tr>
                    }

For that I tried :

 $('.cartItem').on('click', '#updateCart', function (e) {
            e.preventDefault();
var val = $(this).closest('#qtyid').find('#qty').val();
});

But alert(val) results undefined.Any idea please share.

Upvotes: 1

Views: 939

Answers (3)

Jai
Jai

Reputation: 74738

First of all duplicating same ids for multiple rows is not a valid html markup, this creates lots of issues when you work with javascript.

So, the solution is to use class names or apply unique id for each elem which is good but not better. 

@foreach(var item in Session["Cart"] as List < AP.WebApp.Models.Cart > ) { 
  <tr class="eachitem">
    <td> <img src = "@item.Path.Split('~')[1]"
  style="width:200px;height:auto" / > < p > @item.Title < /p></td >
    <td> 
    @if (item.Preview == 1) {

      @Html.CheckBox("preview", new {@
        checked = "checked"
      })
    } else {
      @Html.CheckBox("preview")
    } 
  </td>
  <td class="qtyid">
    <input class="qty" type="text"  value="1"/ > 
  </td>
  <td>0</td>
  <td>
    <input class="deleteCart" type="submit"  value="Delete"  data-assigned-id="@item.ID"/> 
  </td>
  <td>
    <input class="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  / > 
  </td>
  </tr>
}

Now you can use this script: 

$('.cartItem').on('click', '.updateCart', function (e) {
    e.preventDefault();
    var val = $(this).closest('tr').find('.qty').val();
});

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

as @jai suggested use classes

  <tr class="eachitem">
                        <td><img src="@item.Path.Split('~')[1]" style="width:200px;height:auto" /><p>@item.Title</p></td>
                         <td>
                        @if(item.Preview == 1){

                            @Html.CheckBox("preview", new { @checked = "checked" })
                        }
                        else
                        {
                             @Html.CheckBox("preview")
                        }
                             </td>
                        <td id="qtyid">
                            <input class="qty" type="text"  value="1"/></td>
                        <td>0</td>
                        <td>
                            <input class="deleteCart" type="submit" value="Delete" data-assigned-id="@item.ID" /></td>
                        <td>
                            <input class="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  /></td>

                    </tr>

js:

$('.cartItem').on('click', '#updateCart', function (e) {
            e.preventDefault();
var val = $(this).parents('.eachitem').find('.qty').val();
});

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You should modify the dom to use duplicate classes rather than duplicate IDs. ids should be 

   <td id="qtyid">
       <input class="qty" type="text"  value="1"/></td>
   <td>0</td>
   <td>
       <input class="deleteCart" type="submit" value="Delete" data-assigned-id="@item.ID" />
   </td>
   <td>
       <input class="updateCart" type="submit" value="Update" data-assigned-id="@item.ID"  />
   </td>

and then use:

 $('.cartItem').on('click', '#updateCart', function (e) {
  e.preventDefault();
  var val = $(this).closest('tr').find('.qty').val();
 });

Upvotes: 0

Related Questions