read input text value when button click in table

Question

I have a table which is showing some title, and I want to take two values in input textboxs. Each input has id of record primarykey+MA or ..+MP. Additionally I have a confirm and cancel button.

Now what I want when user chooses one input value in text and when he/she click on confirm button, jQuery/JavaScript pick record id + both input text value and alert result...

many thanks

Razor/ HTML

<table class="table">
<tr>

    <th>
        @Html.DisplayNameFor(model => model.Multipart_Title)
    </th>

    <th></th>
</tr>

@foreach (var item in Model)
{
 <tr>           
     <td>
        @Html.DisplayFor(modelItem => item.Multipart_Title)
     </td>

      <td>
        @Html.Label("Marks Available")
        @Html.TextBox("Input_Marks_Available", null, new { id = @item.MultiPartID + "_MA", @class = "MultiPart_Marks_Available" })
        @Html.TextBox("Input_Passing_Marks", null, new { id = @item.MultiPartID + "_MP", @class = "MultiPart_Passing_Marks" })
      </td>

      <td>
        <input type="button" value="Confirm" name="button" class="k-button k-button-icontext multiPart_confirm" />
        <input type="button" value="Cancel" name="button" class="k-button k-button-icontext multipart_cancel" />
      </td>

   </tr>
}
</table>

jQuery

   $(document).ready(function () {

       $(".multiPart_confirm").click(function () {           
                ??????????
       });
   });

HCJ · Accepted Answer · 2014-02-27 09:41:00Z

2

change your html as

<td>
  <input type="button" value="Confirm" name="button" data-itemid="@item.MultiPartID" class='k-button k-button-icontext multiPart_confirm' />
  <input type="button" value="Cancel" name="button" data-itemid="@item.MultiPartID" class="k-button k-button-icontext multipart_cancel" />
</td>

then modify code as

$(".multiPart_confirm").on('click', function(){
  var parent = $(this).parent();
  var itemId = $(this).attr('data-itemid');
  var marksAv = parent.find("#" + itemId + '_MA');
  var marksMp = parent.find("#" + itemId + '_MP');
  // perform required action
  alert("Marks Available: " + marksAv.val() + " Passing Marks: " + marksMp.val());
});

answered Feb 27, 2014 at 9:41

HCJ

5271 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mir Gulam Sarwar · Accepted Answer · 2014-02-27 12:05:35Z

2

On your button click you can get the textbox value

var textbox = $(this).closest('tr').find('td:eq(1) input');

Now you can use the each function.

$(textbox).each(function(){
alert($(this).val());
});

Remember,eq is 0 based.You are trying to get value of second td textbox.So here it is 1.

answered Feb 27, 2014 at 12:05

Mir Gulam Sarwar

2,6482 gold badges27 silver badges39 bronze badges

Comments

Sergio · Accepted Answer · 2014-02-27 08:58:43Z

1

You'l need to change buttons as:

<td>
    <input type="button" value="Confirm" name="button" data-id="@item.MultiPartID" class="k-button k-button-icontext multiPart_confirm" />
    <input type="button" value="Cancel" name="button" data-id="@item.MultiPartID" class="k-button k-button-icontext multipart_cancel" />
  </td>

To be able to get record id on button click;

And your script should be kind of:

$(".multiPart_confirm").click(function () {    
    var recordId = $(this).data("id");
    var marksAvailable = $("#" + recordId + "_MA").val();
    var passingMarks = $("#" + recordId + "MP").val();      
    //do whatever you want
});

edited Feb 27, 2014 at 8:58

answered Feb 27, 2014 at 8:36

Sergio

6,9485 gold badges33 silver badges55 bronze badges

3 Comments

K.Z Over a year ago

this works fine, but say example if i have input value 21 and 22 for record 1 and if i press confirm button for record 7 is still pick record 1

Sergio Over a year ago

@toxic sorry for confuse, changed my answer a little

HCJ Over a year ago

@toxic: are you sure this worked for you without navigating to the parent <tr> as in my answer?

GajendraSinghParihar · Accepted Answer · 2014-02-27 08:38:45Z

1

USE Some thing Like this

$(document).ready(function () {

       $(".multiPart_confirm").click(function () {           
                $(".table").find('input[typr=text]').each(function(){
                  var value = $(this).val();
                  var txtID = $(this).attr('id');
                   alert(txtID + " = "+ value) 

                })
       });
   });

answered Feb 27, 2014 at 8:38

GajendraSinghParihar

9,16911 gold badges40 silver badges67 bronze badges

Collectives™ on Stack Overflow

read input text value when button click in table

Razor/ HTML

jQuery

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Razor/ HTML

jQuery

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related