How to send two parameter id and name in onclick function?

Question

Here I have many users(with id,name,role defined) in html. When I click in one of the user It displays the modal and inside this modal I want to display the id,name and role of that user. I am only being able to dispaly id. How can I display name and role also ?

html

   {% for user in users %}
         <li>
           <i class="fas fa-user-circle"></i>{{ user.name }}, {{user.role}}
            <a href="" class="text-primary" onclick = "send_message({{user.id}} )">Message</a>
          </li>
   {% endfor %}

script

function send_message(id){
  event.preventDefault();
  $('#sendmessage').modal('show');
  $('#send_message_modal_title').text("Send Message to User");
  $('#sendmessage').on('shown.bs.modal', function (e) {
    $("#user_id").val(id);
    $("#user_name").val(name, role);
    
  })

modal

<input name="cleaner" id="user_id">
 <input type="text" value="name and role" class="form-control">  #how to display name and role ?

Shubham Singh · Accepted Answer · 2020-09-03T11:38:55.690

2

I think you can simply pass name and role to the send_message function as follows:

{% for user in users %}
         <li>
           <i class="fas fa-user-circle"></i>{{ user.name }}, {{user.role}}
            <a href="" class="text-primary" onclick = "send_message({{user.id}}, '{{ user.name }}', '{{user.role}}'  )">Message</a>
          </li>
{% endfor %}

And access it here:

function send_message(id, name, role){
  event.preventDefault();
  $('#sendmessage').modal('show');
  $('#send_message_modal_title').text("Send Message to User");
  $('#sendmessage').on('shown.bs.modal', function (e) {
    $("#user_id").val(id);
    $("#user_name").val(`${name} ${role}`);
  })
}

If you are using JavaScript for click functionality. Try the following: Supposing anchor tag has a class name of show

<script type="text/javascript">
        // User array of objects
        var users = [{id:1, name: "Shubham", role: "admin"}, {id:2, name: "Robert", role: "admin"}];

        // Add event listener
        buttons  = document.querySelectorAll(".show");
        index = 0;
        for(let button of buttons) {
            button.addEventListener('click', ()=>{
                send_message(users[index++])
            })
        }

        // get user here
        function send_message(user) {
            console.log(user);
        }
</script>

edited Sep 03 '20 at 11:38

answered Sep 02 '20 at 07:13

Shubham Singh

90
1
8

https://stackoverflow.com/questions/63719039/being-unable-to-pass-more-than-two-parameters-in-onclick-function I tried your solution but I got this problem here . Can you help there ? – D_P Sep 03 '20 at 08:16
It will definitely work, just make sure to add single quotes (' ') around passing variables so that javascript's send_message function could treat them as an input parameter. Otherwise, it will give an error like something is not defined as it will treat it as a variable instead of an input string. – Shubham Singh Sep 03 '20 at 10:18
I tried passing single quotes also but didn't worked – D_P Sep 03 '20 at 10:20
What is the actual error you are getting? let me know. – Shubham Singh Sep 03 '20 at 10:34
I am getting `Uncaught ReferenceError` – D_P Sep 03 '20 at 10:42
after removing the single quote the error goes but in the function I get value as undefined – D_P Sep 03 '20 at 10:43
So what do you get other than uncaught reference error, when allowing single quote – Shubham Singh Sep 03 '20 at 10:45
`jquery-3.3.1.min.js:2 Uncaught ReferenceError: get_details is not defined at HTMLDocument. ((index):1108) at l (jquery-3.3.1.min.js:2)` – D_P Sep 03 '20 at 10:46
This is some other error. You didn't provide the get_detail function here. – Shubham Singh Sep 03 '20 at 10:48
this is inside the get_detail function. If I only changed to signle quote it throws this error if not error goes. The strange thing is if I only pass one or two paramters from onclick then it displays the right value from thr function but if I pass more than 2 parameter it displays undefined to the added paramter(first 2 parameter works) – D_P Sep 03 '20 at 10:51
Let me clarify, you are using for in python to iterate through users or using javascript? If using JavaScript as done here [link](https://stackoverflow.com/questions/63719039/being-unable-to-pass-more-than-two-parameters-in-onclick-function) then you need to bind each button with event listener separately. – Shubham Singh Sep 03 '20 at 11:04
It is only javascript now. How to bind it then ? – D_P Sep 03 '20 at 11:10
please post the answer here https://stackoverflow.com/questions/63719039/being-unable-to-pass-more-than-two-parameters-in-onclick-function – D_P Sep 03 '20 at 11:38

score 1 · Answer 2 · answered Sep 02 '20 at 07:10

First thing would be to avoid inline handlers, they have way too many problems to be worth using nowadays, especially escaping issues (which you'll run into here). Attach event listeners properly using Javascript with addEventListener or jQuery instead. You can tie the data to the element with data attributes:

<li>
  <i class="fas fa-user-circle"></i>{{ user.name }}, {{user.role}}
  <a href="" class="text-primary" data-id="{{user.id}}" data-name="{{user.name}}" data-role="{{user.role}}">Message</a>
</li>

and

$('.text-primary').on('click', (e) => {
  const { id, name, role } = e.target.dataset;
  // attach id, name, and role to modal as desired
});

score 0 · Answer 3 · answered Sep 02 '20 at 07:25

0

I think you can simply send user object as parameter

html

... onclick="send_message({{user}})" ...

script

function send_message(user){
    var id = user.id;
    var name = user.name;
    var role = user.role;
    ....
}

answered Sep 02 '20 at 07:25

firatozcevahir

892
4
13

How to send two parameter id and name in onclick function?

3 Answers3