0

I am building a Django web app with backend. I load the html page dynamically from database and I populate a dynamic table like this, with the delete button in each row predefined and I need to pass a particular cell value to the click event for deletion so i set it to the button id and pass it through a onclick event, but the event is not getting generated and no alert is produced. I am seeing a lot of examples but i have tried all and even style i added only because of that, i prefer to do it with the <input type="submit" value="Submit"/> button if possible, but in any case the event is not getting generated. The code is below: Can anyone please help?

<form name="Dashboard" method="GET" id="AccountForm" action="create">

<script src="https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script>
    $('.btn').on("click", function(event){
        alert("I am clicked!");
        var id = $(this).attr('id');
    });
</script>

<style>
.btn {
  border: solid:black;
  background-color: inherit;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

<table id="tbl">
    <tr align="center"><th>Name</th><th>Open</th><th>Test Account</th><th>Display Name</th></tr>
    <tr></tr>
    {% for i in form.langs %}
    <tr align="center">
        <td>{{i.name}}</td>
        <td>{{i.open}}</td>
        <td>{{i.testAccount}}</td>
        <td>{{i.displayName}}</td>
        <td><input type="button" name="btnDelete"  value="Delete" class="btn" id={{i.name}}/></td>
    </tr>
    {% endfor %}
  
</table>

</form>

Update: Also is it possible to use this without a .btn class which i am using now? This add-on is answered in the comment given by @freedomn-m below

user1403505
  • 565
  • 1
  • 6
  • 22
  • 1
    Hi why your js code is inside `` and put your js code in separate scripts tags like this : `` – Swati Feb 01 '21 at 15:52
  • updated the code, now this also did not work before – user1403505 Feb 01 '21 at 15:58
  • 1
    Try change `$('.btn').on("click", function` to `$(document).on("click", '.btn', function` – freedomn-m Feb 01 '21 at 15:59
  • @freedomn-m your comment worked, I just need one small hint right now i am passing like this $(document).on("click",'.btn' ,function(event){ var id = $(this).attr('id'); alert(id); }); but i dont want to pass the .css style i have no need of style , is it possible that without style this can be accompolished, by passing the id which is btnDelete? – user1403505 Feb 01 '21 at 16:06
  • 1
    The `name` is btnDelete, not the ID. – freedomn-m Feb 01 '21 at 16:18
  • 1
    I will say that it looks like you're mixing "class name" (`class=btn`) with `style` - the style uses the class name, the class name is not the style. The class can be anything you want - in this case I'd probably have your button as ` – freedomn-m Feb 01 '21 at 16:18
  • @freedomn-m great i removed the .btn from style, now the code is just as per your comment class="btn btnDelete" without any style defined. You can put your comment as answer, for me to accept and upvote it – user1403505 Feb 01 '21 at 16:31
  • 1
    I would, but your question about class was just a follow on (which I didn't mind) but your actual question was answered by the linked "does this answer your question" – freedomn-m Feb 01 '21 at 18:42

0 Answers0