Get the name of the select with onchange event

Question

I want to know the name of the select when you select a option, for example:

If I select the 2 option in the select1 I need to catch the name of the select(in this case select1) via js or jquery, that's why I'm using "this" as a parameter in the onchange, the problem is that I dont know how to get the name of the select with this "this", I tried this.name but it does not work.

Any ideas?

Thx

<select onchange="jsFunction(this);" name="select1">
                <option selected>1</option>
                <option>2</option>
              </select>

<select onchange="jsFunction(this);" name="select2">
                <option selected>1</option>
                <option>2</option>
              </select>

EDIT:

The function has literally nothing:

jsFuntion(element){
alert(element.name);
}

Without seeing the callback function itself it's impossible to give specific advice. — Pointy, Oct 06 '17 at 11:52
you need to declare jsFunction as a function: 'function jsFunction(element) {...code...}' — JMP, Oct 07 '17 at 05:48

score 1 · Answer 1 · answered Oct 06 '17 at 11:56

check this snippet. It gives the name of select in console.

function myfunction(Element)
    {
        console.log($(Element).prop("name"));
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <select onchange="myfunction(this)" name="select1">
        <option selected>1</option>
        <option>2</option>
    </select>

    <select onchange="myfunction(this);" name="select2">
        <option selected>1</option>
        <option>2</option>
    </select>
</div>

I hope this helps :-)

Adding jQuery just for this seems a little overkill when you can just use `Element.name` — Rory McCrossan, Oct 06 '17 at 11:56

score 1 · Answer 2 · answered Oct 06 '17 at 11:57

In your jsFunction code, you can dereference the name property like this:

function jsFunction(obj) {
console.log(obj.name);
}

<select onchange="jsFunction(this);" name="select1">
                <option selected>1</option>
                <option>2</option>
              </select>

<select onchange="jsFunction(this);" name="select2">
                <option selected>1</option>
                <option>2</option>
              </select>

Passing this.name also works.

function jsFunction(nm) {
console.log(nm);
}

<select onchange="jsFunction(this.name);" name="select1">
                <option selected>1</option>
                <option>2</option>
              </select>

<select onchange="jsFunction(this.name);" name="select2">
                <option selected>1</option>
                <option>2</option>
              </select>

Carsten Løvbo Andersen · Answer 3 · 2017-10-06T11:54:05.683

0

If you want to get the name thought your jsFunction try this.

As Pointy says you can also use obj.name

function jsFunction(obj) {
  //console.log($(obj).attr("name"))
  console.log(obj.name)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange="jsFunction(this);" name="select1">
                <option selected>1</option>
                <option>2</option>
              </select>

<select onchange="jsFunction(this);" name="select2">
                <option selected>1</option>
                <option>2</option>
              </select>

edited Oct 06 '17 at 11:54

answered Oct 06 '17 at 11:52

Carsten Løvbo Andersen

26,637
10
47
77

Or simply `obj.name` – Pointy Oct 06 '17 at 11:52
@Pointy True true, totally forgot that, cheers – Carsten Løvbo Andersen Oct 06 '17 at 11:53

score 0 · Accepted Answer · answered Oct 06 '17 at 11:53

You need to receive this as a parameter in the function, then get the name property from that element, like this:

function jsFunction(el) {
  var name = el.name;
  console.log(name);
}

<select onchange="jsFunction(this);" name="select1">
  <option selected>1</option>
  <option>2</option>
</select>

<select onchange="jsFunction(this);" name="select2">
  <option selected>1</option>
  <option>2</option>
</select>

However the on* event attributes are generally considered bad practice and should be avoided where possible. Instead you should be using unobtrusive event handlers in the JS code:

document.querySelectorAll('select').forEach(function(el) {
  el.addEventListener('change', function() {
    var name = this.name;
    console.log(name);
  });
})

<select name="select1">
  <option selected>1</option>
  <option>2</option>
</select>

<select name="select2">
  <option selected>1</option>
  <option>2</option>
</select>

Get the name of the select with onchange event

4 Answers4