Trigger a button when enter button is pressed

Question

I am working with this code here:

What I am trying to do is trigger the "Add" button of the specific line when the input field in this line is focused and the enter button is hit.

As far as I can guess it's something a bit like this:

$("#current").keyup(function(e) { if(e.keyCode == 13) { $("#add").submit(); } });

I've tried to get a few different things working but this is almost the first code I have written in Javascript and I'm getting a little bit stuck. Could anyone show me where I am going wrong?

The first thing I would say is that you have multiple #current events. This is invalid and won't work as you expect. id attributes must be unique. — lonesomeday
– lonesomeday, Commented Jun 25, 2013 at 13:13
If it's just enter ... can't u try to set focus on it? $(document).ready(function() { $("#add").focus(); }) — Avner Solomon
– Avner Solomon, Commented Jun 25, 2013 at 13:13

tymeJV · Accepted Answer · 2013-06-25 13:16:23Z

Aside from your current ID's not being unique, you can do the following:

$(".current").keyup(function(e) { if (e.which == 13) { $(this).next("input.add").trigger("click"); } });

Demo: http://jsfiddle.net/9sX6X/77/

(I changed your repeating ID's to classes for current)

momo · Accepted Answer · 2013-06-25 13:17:26Z

you have no element which id = "add" maybe you want the button chick

you can use

$('this').next('.add').trigger('click');

Gilles V. · Accepted Answer · 2013-06-25 13:20:09Z

Well, first you shoudn't have the same id for several elements.

Then, the code you posted is what you are looking for, replace

$("#add").submit();

by

$(this).next().click();

(but there are other ways to get the button)

 //bind a function to the "keyup" event for the element of id "current" $("#current").keyup(function(e) { // if the key pressed is 13 (code for enter) if(e.keyCode == 13) { //trigger the click event on the next element (in this cas your button) $(this).next().click(); } });

`

Alexis F. · Accepted Answer · 2013-06-25 13:36:12Z

just follow this fiddle: http://jsfiddle.net/9sX6X/81/

Details

<form name="input" class="form"> <fieldset> <h4>Requirements</h4> <div class="copies"></div> <div class="line"> <input id="current" type="text" name="content" placeholder="Requirement" /> <input type="button" value="Add" class="add" /> </div> </fieldset> <fieldset> <h4>Qualifications</h4> <div class="copies"></div> <div class="line"> <input id="current" type="text" name="content" placeholder="Qualification" /> <input type="button" value="Add" class="add" /> </div> </fieldset> <fieldset> <h4>Benefits</h4> <div class="copies"></div> <div class="line"> <input id="current" type="text" name="content" placeholder="Benefit" /> <input type="button" value="Add" class="add" /> </div> <fieldset> </form> <script> //latest var maxFields = 10; function cloneLine(line){ var nb = 1 + $(line).siblings(".line").length; if (nb < 10){ $(line).clone().insertAfter(line).find("[type=text]").val("").focus(); } else{ alert("Maximum fields number reached ! "); } } <script> // Listen to "add" clicks $(document).on("click", ".add", function(e){ // Try to clone the line cloneLine($(this).parent()); }) // Listen to [enter] in <input type="text> .on("keypress", "input[type=text]", function(e){ // Not [enter] pressed ? Do nothing if (e.keyCode != 13){ return; } // From here, [enter] was pressed // Prevent form submission e.preventDefault(); // Try to clone the line cloneLine($(this).parent()); }); </script>

Collectives™ on Stack Overflow

Trigger a button when enter button is pressed

4 Answers 4

Comments

Comments

Comments

Details

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Details

Comments

Related