Adding input buttons using JQuery

Question

I have a interesting problem I need to solve. A customer wants to enter a customer id (using a scanner) in a input element and using AJAX, it will fill another input element with the customer name. A new input element should be added and focus set, so the customer can enter another customer id. I have two issues that I need help solving. First, I need to capture the enter sent by the scanner and move to the newly added input element. Second, I need to add events to the new input element to handle the AJAX call and the next enter sent from the scanner. Any help would be greatly appreciated.

Wade

Scanner = hardware peripheral? So you can't figure out how to get the scanner's code in the html? — Jarrett Widman
– Jarrett Widman, Commented Sep 17, 2010 at 1:13
The scanner is nothing more than a keyboard emulator, but it sends a enter key after it sends the keys for the barcode it scanned. My problem is I need to handle the enter key to trigger other code. — Wade73
– Wade73, Commented Sep 17, 2010 at 1:40

Kevin · Accepted Answer · 2010-09-17 06:13:46Z

1

Here's a fairly simple template you can work from:

<form>
    <fieldset>
        Customer ID: <input name="id" />
        Customer Name: <input name="name" />
    </fieldset>
</form>

with Javascript:

jQuery(function($) {
    var form = $('form'),
        fieldset; // defined here but set below after we get our event attached

    $('input[name=id]').keyup(function(e) {
        if(e.keyCode === 13) {
            var clone = fieldset.clone(true).appendTo(form);

            clone.children('input[name=id]').focus();

            $.get('getCustomerName.php', {id: this.value}, function(data) {
                clone.children('input[name=name]').val(data);
            });
        }
    });

    fieldset = $('fieldset').clone(true); // clones our fieldset template with events
});

edited Sep 17, 2010 at 6:13

answered Sep 17, 2010 at 6:04

Kevin

3,8912 gold badges34 silver badges40 bronze badges

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

1 Comment

Wade73 Over a year ago

How do I implement the function you showed above? I am still new to JQuery, so I pretty much have only ever attached functions with the ready event.

griegs · Accepted Answer · 2010-09-17 01:21:34Z

1

@Wade73, adding a new control is the easy bit. You'll need to pick an element to place the control within or to though.

$('#PlaceButtonIn').appendTo("new button html");
$('#PlaceButtonIn').append("new button html");

#PlaceButtonIn can be a div or a td or something useful to place the new control in.

New controls do not have events so use the live commend for this.

$('#PlaceButtonIn').append("<input type='button' class='NewButton'>");

$(document).ready(function(){

  $('.NewButton').live('click', function() { //Do click event here });

});

NewButton class does not need to exist in your CSS. It's a handy way to use the jQuery selector if you don't know control Id's or names.

Hope this is helpful.

answered Sep 17, 2010 at 1:21

griegs

22.8k33 gold badges132 silver badges207 bronze badges

1 Comment

Wade73 Over a year ago

Looks like this might be what I am missing.

Felix · Accepted Answer · 2010-09-17 05:34:13Z

1

Maybe this can answer your doubt:

When input gets focus

 $('#inputId').focus(function(){

      ///your code here
    });

Or

$('#inputId').keypress(function(e) {
    if(e.keyCode == 13) {
        //your code here
    }
});

answered Sep 17, 2010 at 5:34

Felix

3,1447 gold badges44 silver badges55 bronze badges

Collectives™ on Stack Overflow

Adding input buttons using JQuery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related