How to get modal data in jquery function on button click

Question

0.00/5 (No votes)

See more:

I have class with Sub List items, and I am displaying data by iterating for each loop in my MVC View Table,

Now My requirement is I need to update the details based on the selection

but on every button click I am getting first item id, if I select second row item also it is taking first row item from the table

and how to get the sublist items in jquery (in my code checkbox details from sublist)

Any Help

Thanks in Advance

What I have tried:

 @foreach (var item in Model)
        {
            <tr>
                <td style="white-space:nowrap;">
                    @Html.HiddenFor(modelItem => item.ID, new { id = "ID" })
                    <span class="debtorVal">
                        <span id="CollectionName">@item.CollectionName </span>
                    </span>
                    
                   </td>
               @foreach (var CollectionRole in item.CollRole)
               {
                   if (CollectionRole.CollectionRole == "C")
                   {
                   
                    <td>@Html.CheckBoxFor(modelItem => CollectionRole.Checked)</td>
                   }
                   if (CollectionRole.CollectionRole == "C")
                   {
                    <td>@Html.CheckBoxFor(modelItem => CollectionRole.Checked)</td>
                   }
                   if (CollectionRole.CollectionRole == "M")
                   {
                    <td>@Html.CheckBoxFor(modelItem => CollectionRole.Checked)</td>
                   }
                   if (CollectionRole.CollectionRole == "R")
                   {
                    <td>@Html.CheckBoxFor(modelItem => CollectionRole.Checked)</td>
                   }               
               }
                <td>
                 
                    <input type="button" value="Assign" onclick="myfunction(this)" />
                   
                   
                  
                </td>
            </tr>
        }

    </table>
<script type="text/javascript">
 function myfunction(el)
 {
     var CollectionName = $("#CollectionName").text();
     var ID = $("#ID").val();
     alert(CollectionName);
     alert(ID);
   
 }
</script>

Posted 8-Jan-19 13:11pm

Divyay208

Updated 8-Jan-19 17:34pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bryian Tan · Answer 1 · 2019-01-08T17:34:00

By looking at the posted code.

1. the id attribute for each element should be unique, but it was hard coded as "ID" in the loop. I think that why the second loop didn't create a new hidden control because ID already exists.

HTML

@Html.HiddenFor(modelItem => item.ID, new { id = "ID" })

2. The easiest fix is to pass in the id to myfunction, see below

HTML

<input type="button" value="Assign" onclick="myfunction(@item.ID)" />

3. then update the myfunction code to use the id variable

JavaScript

function myfunction(id)
 {
     //var CollectionName = $("#CollectionName").text();
     //var ID = $("#ID").val();
     //alert(CollectionName);
     alert(id);
   
 }

4. I think same issue with the CollectionName, you might need to update the code to pass that to the myfunction as well

HTML

<input type="button" value="Assign" onclick="myfunction(@item.ID, @item.CollectionName)" />

JavaScript

function myfunction(id, collectionName)
 {
     //var CollectionName = $("#CollectionName").text();
     //var ID = $("#ID").val();
     alert(collectionName);
     alert(id);
   
 }

Note: I did not verify the syntax. but hopefully you'll get the idea.

javascript - how to pass a razor value to a jquery function, in an mvc view - Stack Overflow[^]