jQuery: Can I select an element by name and read it's id when I have multiple elements with the-CodePudding

I have a list of buttons, each belonging to a hidden form with corresponding item.Id. I want to show the form when the button is clicked. To achieve this, I have a jQuery script which selects the button by name ($('[name="RequestSpeakButton"]')) and reads its id to know which hidden form to set to visible ($("#RequestSpeak" this.id).css("visibility", "visible")).

But of course, it's not working. I.e. nothing happens when I click the buttons.

I don't know if it's of importance, but the document consists of a main view with several partial views. The script is located in the scripts section of the main view. The buttons are in a partial view and the forms in another partial view.

The forms are rendered like this (in a partial view):

@foreach (AgendaItemViewModel item in Model.Agenda)
{ 
    <div id="RequestSpeak@(item.Id)" style="visibility:hidden;">
        <form asp-action="Action">
            <input type="hidden" name="Id" value="@item.Id" />
            <button type="submit">
                Yes
            </button>
            <span class="btn btn-danger" onclick="javascript: document.getElementById('RequestSpeak' @item.Id).style.visibility='hidden'">
                No
            </span>
        </form>
    </div>
}

The output of the forms looks like this:

<div id="RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d" style="visibility:hidden;">
    <form action="/Controller/Action" method="post">
        <input type="hidden" name="Id" value="57e33e17-c988-4a28-66a0-08d978345a1d" />
        <button type="submit">
            Yes
        </button>
        <span class="btn btn-danger" onclick="javascript: document.getElementById('RequestSpeak' 57e33e17-c988-4a28-66a0-08d978345a1d).style.visibility='hidden'">
            No
        </span>
    </form>
</div>

The buttons that are supposed to show a form is rendered like this (in another partial view):

@foreach (AgendaItemViewModel item in Model.Agenda)
{
    <a name="RequestSpeakButton" id="@item.Id"
       class="btn btn-primary">
      Speak
    </a>
}

And the output looks like this:

<a name="RequestSpeakButton" id="57e33e17-c988-4a28-66a0-08d978345a1d"
   class="btn btn-primary">
   Speak
</a>

This is the script for the buttons:

$(document).ready(function () {
    $('[name="RequestSpeakButton"]').click(function () { 
        alert("test"); /* Checking if the script runs. It doesn't. */
        $("#RequestSpeak" this.id).css("visibility", "visible")
    });
})

I would imagine that since I have many buttons with the same name, they all get selected by $('[name="RequestSpeakButton"]'). Can I know which one was clicked? Is this.Id enough?

Perhaps it would work if I dropped the name, and just selected the buttons by id. But I am going to add other buttons later, which is going to perform different operations on the items, so I need the name to know which operation to perform.

CodePudding user response：

Try this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
         crossorigin="anonymous"></script>
    </head>
    <body>
        <a name="RequestSpeakButton" id="57e33e17-c988-4a28-66a0-08d978345a1d"
           class="btn btn-primary">
           Speak1
        </a>
        <a name="RequestSpeakButton" id="57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d"
           class="btn btn-primary">
           Speak2
        </a>
        
        <div id="RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d" style="visibility:hidden;">
            <form action="/Controller/Action" method="post">
                <input type="hidden" name="Id" value="57e33e17-c988-4a28-66a0-08d978345a1d" />
                <button type="submit">
                    Yes
                </button>
                <span class="btn btn-danger" onclick="document.getElementById('RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d').style.visibility='hidden'">
                    No
                </span>
            </form>
        </div>
        <div id="RequestSpeak57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d" style="visibility:hidden;">
            <form action="/Controller/Action" method="post">
                <input type="hidden" name="Id" value="57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d" />
                <button type="submit">
                    Yes
                </button>
                <span class="btn btn-danger" onclick="document.getElementById('RequestSpeak57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d').style.visibility='hidden'">
                    No
                </span>
            </form>
        </div>
        <script>
            $("[name='RequestSpeakButton']").click(function(){
                var thisid = $(this).attr("id");
                $("#RequestSpeak" thisid).css("visibility", "visible")
            })
        </script>
    </body>
</html>

Or maybe you prefer this?

@model WebApplication1.Models.TestModel
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"></script>

@foreach (AgendaItemViewModel item in Model.Agenda)
{
    <div id="RequestSpeak@(item.Id)" style="visibility:hidden;">
        <form asp-action="Action">
            <input type="hidden" name="Id" value="@item.Id" />
            <button type="submit">
                Yes
            </button>
            <span class="btn btn-danger" name="noBtn">
                No
            </span>
        </form>
    </div>
}

@foreach (AgendaItemViewModel item in Model.Agenda)
{
    <a name="RequestSpeakButton" id="@item.Id"
       class="btn btn-primary">
        Speak
    </a>
}

<script>
    $("[name='RequestSpeakButton']").click(function () {
        var thisid = $(this).attr("id");
        $("#RequestSpeak"   thisid).css("visibility", "visible")
    })

    $("[name='noBtn']").click(function () {
        var thisid = $(this).parent().parent().css("visibility", "hidden"); 
    })
</script>

CodePudding user response：

document.getElementById('RequestSpeak' 57e33e17-c988-4a28-66a0-08d978345a1d)

is probably not what you want. That should probably even throw an error since it isn't a proper string. If you change it to all be within quotes like this, it should at least get you a step in the right direction:

document.getElementById('RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d')

To get that change your view template to be the item.id but in quotes.

document.getElementById('RequestSpeak' '@item.Id')

and see if that does the trick.