Pass multiple values through onClick into one variable or array

Question

so I've tried this very hard but can't figure it out,

I have a button like this

<button onclick="signUp(document.getElementById('username').value,document.getElementById('email').value)">Sign up</button>

and I want to pass the values it's requesting from some inputs into a variable or variable array so I can handle them like this (example)

var signUp = function(e){
    alert(e);
}

(This is just simplified but it proves my point!) Does anyone know how to do this though, I've been having a hard time figuring it out!

Thanks in advance, Magn0053

Just add an another argument var signUp = function(e, f) {... — adeneo
– adeneo, Commented Jun 24, 2015 at 14:21
Yes but I would like to use them all in the "e", like some sort of array — Magnus Vestergaard
– Magnus Vestergaard, Commented Jun 24, 2015 at 14:22
Or access arguments, but you're really complicating it, just use two arguments instead. — adeneo
– adeneo, Commented Jun 24, 2015 at 14:24
Rather than passing the values to the function, you can also get it in your function itself - I do not understand the reason of passing value of some elements in function? — Nikhil Aggarwal
– Nikhil Aggarwal, Commented Jun 24, 2015 at 14:24

mmccaff · Accepted Answer · 2015-06-24 14:25:00Z

2

You can surround by { } to pass them as an object, or [ ] to pass them as an array. However, all of your arguments are document values, your function could just reference them itself.

answered Jun 24, 2015 at 14:25

mmccaff

1,2811 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Emre Türkiş · Accepted Answer · 2015-06-24 14:25:12Z

1

You may take @adeneo's idea or, just send'em in an array like this

signUp([document.getElementById('username').value, 
    document.getElementById('email').value])

answered Jun 24, 2015 at 14:25

Emre Türkiş

1,00210 silver badges23 bronze badges

2 Comments

jcuenod Over a year ago

This is really bad practice. Say you want to use the signup on another page - now you have to include all this html again rather than just include the same js file. What's more, in an array you have no idea what each element is.

Emre Türkiş Over a year ago

what html are you talking about?

jcuenod · Accepted Answer · 2015-06-24 14:40:09Z

Basic Solution

The most basic modification is to use [] around the values you are passing to signUp.

var signUp = function(e) {
  alert ("username:" + e[0]);
  alert ("email:" + e[1]);
}

<input type="text" id="username">
<input type="text" id="email">
<button onclick="signUp([document.getElementById('username').value,document.getElementById('email').value])" id="submit">Sign up</button>

Best Practice

You don't really want to be using javascript in your DOM so first modify your signUp function:

signUp = function() {
    var username = document.getElementById('username').value;
    var email = document.getElementById('email').value;
}

Finally, remove the onclick from your HTML entirely and replace it with this javascript:

document.getElementById('submit').onclick=signUp;

var signUp = function() {
  var username = document.getElementById('username').value;
  var email = document.getElementById('email').value;
  alert("username:" + username);
  alert("email:" + email);
}

document.getElementById('submit').onclick = signUp;
console.log("fred");

<input type="text" id="username">
<input type="text" id="email">
<button id="submit">Sign up</button>

skirato · Accepted Answer · 2015-06-24 14:54:46Z

0

You can achieve this as such:

<button onclick="signUp({username:document.getElementById('username').value,email:document.getElementById('email').value})">Sign up</button>

In js, you can access them like:

var signUp = function(e){
    console.log(e.username, e.email);
}

edited Jun 24, 2015 at 14:54

answered Jun 24, 2015 at 14:28

skirato

7737 silver badges28 bronze badges

1 Comment

jcuenod Over a year ago

Why would you send an array of objects? Just send an object: {username: document.blahblah, email: document.blahblah}

Collectives™ on Stack Overflow

Pass multiple values through onClick into one variable or array

4 Answers 4

Comments

2 Comments

Basic Solution

Best Practice

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Basic Solution

Best Practice

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related