CODEWITHSUNDEEP
javascriptjquery
Evgenij Reznik
Evgenij Reznik

Reputation: 18594

Combine several events

I have a text field and a button. Either when the button is clicked or enter is hit, a function should be executed.

My approach works is intended. However, is it possible to combine those 2 functions (click and keypress), so that I only have 1?

$("button").click(function() {
  getInput();
});

$("#name").keypress(function(e) {
  if (e.which == 13) {
    getInput();
  }
});

function getInput() {
  alert($("#name").val())
}

So I need to just append those events.

Here is a fiddle.

Upvotes: 1

Views: 64

Answers (5)

sarath
sarath

Reputation: 459

$("button,#name").on("click keypress",function(e) {
  //alert($(e.currentTarget).html());
  if (e.which == 13) {
    getInput();
  }else if(event.type == 'click'){
    getInput();
  }
});

function getInput() {
  alert($("#name").val())
}

Upvotes: 0

Kira
Kira

Reputation: 1443

We can differentiate a click and keypress by e.key or e.type parameters

Try this,

var getInput = function(e) {    
  if((e.which & e.which==13) || !e.key) 
    //e.key is a parameter for keypress event and not for click
    alert($("#name").val())
}

$("button").click(getInput);

$("#name").keypress(getInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
 Click
</button>

Upvotes: 0

Arun AK
Arun AK

Reputation: 4370

@eltonkamami answer is one idea and my idea is to provide same class for both input field and button like this :

(But, this will trigger whenever input field is changed) 

$(".same").bind("click keypress", function() {
  getInput();
});

function getInput() {
  console.log($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
  OK
</button>

Hope it helps :)

Upvotes: 1

Justinas
Justinas

Reputation: 43441

You can listen for multiple events using .on('listOfEvents')

Than you just need some additional rules to check when you need to run function.

$("button, #name").on('click keypress', function(e) {
    if ($(e.currentTarget).attr('id') == 'submit' || e.which == 13) {
	  	getInput();
    }
});

function getInput() {
    alert($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />
<button id="submit">
  OK
</button>

Upvotes: 1

eltonkamami
eltonkamami

Reputation: 5190

function getInput(){
  return $(".result").text($("input").val());
}

$("form").on("submit", (ev)=>{
  ev.preventDefault();
  // handle submission
  getInput();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <input type="text" />
  <button>ok</button>
</form>
<div class="result"></div>

you can wrap your input and button in a form and listen for a submit event on that form. Forms can be submitted by pressing enter in an input inside of them or clicking a button that is enclosed

HTML

<form action="">
  <input type="text" />
  <button>ok</button>
</form>

Javascript 

$("form").on("submit", (ev)=>{
  ev.preventDefault();
  // handle submission
  getInput();
})

Upvotes: 1

Related Questions