CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
Indrajeet Singh Yadav
Indrajeet Singh Yadav

Reputation: 47

How to add keypress event on option element?

I am trying to add an event listener to option elements of particular select elements. But it's not working.

HTML:

<form id='form1' method='post' name='form1'>
   <select class="form-control big-input-h4" id="tnvffoewr">
      <option>select an option</option>
      <option>o2</option>
      <option>o3</option>
      <option>o4</option>
      <option>add new item</option>
   </select>
   <button type='submit'>submit</button>
   <button type='reset'>reset</button>
</form>
<form id='form2' method='post' name='form2'>
   <select class="form-control big-input-h4" id="tnvffoewr">
      <option>select an option</option>
      <option>o2</option>
      <option>o3</option>
      <option>o4</option>
      <option value='add'>add new item</option>
   </select>
   <button type='submit'>submit</button>
   <button type='reset'>reset</button>
</form>

jQuery:

Array.from($('#tnvffoewr').children().slice(1,-1)).forEach(element => {
        console.log(element.text)
        element.addEventListener('keypress',(e)=>{
            console.log('clck')
            if(e.key=='Enter'){
            console.log('enter')
           }
        })
    });
$('#tnvffoewr').on('change',(e)=>{
   if(e.target.value == 'add'){
      window.location.href = '/add_new';
   }
});

I want event to be triggered on every option except first and last when enter is pressed. If I just apply keypress on select its working but I want the events to be triggered when I press enter on option.

Edit 1-

What I am trying to do is when I press enter on an option I want to click a submit button. But keep in mind to open the drop-down we press enter that shouldn't submit the form so we cannot add the event listener to the select element. But after the drop-down is opened and then suppose I go to 3rd option and press enter that value should be selected and then the form should be submitted, each select corresponds to its own seperate form. We cannot use on('change') as we can change the option by arrow keys, also there is another function which is executed on change. So I need it to execute this seperate function on('keypress') when I press enter to select an option. As a matter of fact I just need to understand how would I add a on('keypress') event to option submitting I can manage.

I have kept the same id because when I provide that id to any select I want it to work the same way. If you want you can give an answer with same class name works for me.

Also as @freedomn-m asked, clicking should do the same thing as pressing enter, I just assumed that I can add click event the same way as keypress event, but again we cannot use the change event. We cannot disable the options because we have to select a option. 1st option is kind of first label you see when the page is loaded. Last option opens another form to add new item to the options list, which is working fine and it runs on change event.

Edit 2 -

What I want to do is have a select which can do two things.

  1. When select changes to add new item go to the link '/add_new'

  2. If enter is pressed in drop-down-list on any option except first and last submit the form after changing the select value. Pressing enter on the select should do the default action of opening the drop-down-list.

Upvotes: 0

Views: 217

Answers (1)

Bagus Tesa
Bagus Tesa

Reputation: 1705

You should only allow one id for each html element to avoid confusion and browser will only accept the first occurence of the id.

<select class="form-control big-input-h4 tnvffoewr">
   <option>select an option</option>
   <option>o2</option>
   <option>o3</option>
   <option>o4</option>
   <option>add new item</option>
</select>

<select class="form-control big-input-h4 tnvffoewr">
   <option>select an option</option>
   <option>o2</option>
   <option>o3</option>
   <option>o4</option>
   <option>add new item</option>
</select>

Next, you can do something like:

$(".tnvffoewr").on("keypress", function(e){
  if(e.which !== 13)
   return;
  
  var sel = $(this).val();
  if(sel === 'select an option' || sel === 'add new item')
   return;
  
  alert(sel);
});

It will alert the index of the selected option when you press enter on other than the first and last options, you can then filter it using ifs. It is still a bit awkward given that the select box need to be focused (by either clicking it or using tab).

See fiddle: https://jsfiddle.net/6stpdmj5/

Upvotes: -1

Related Questions