CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcrazor
K.Z
K.Z

Reputation: 5075

read input text value when button click in table

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 () {           
                ??????????
       });
   });

Upvotes: 1

Views: 3120

Answers (4)

Mir Gulam Sarwar
Mir Gulam Sarwar

Reputation: 2648

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.

Upvotes: 2

HCJ
HCJ

Reputation: 527

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());
});

Upvotes: 2

Sergio
Sergio

Reputation: 6948

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
});

Upvotes: 1

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

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) 

                })
       });
   });

Upvotes: 1

Related Questions