CODEWITHSUNDEEP
javascripthtmlonkeydown
LatinCanuck
LatinCanuck

Reputation: 463

JavaScript enter key not passing input value

I currently have a input field that calls a javascript updateCart() function. It uses the onblur() event and it works fine when user clicks outside of the field. The issue I'm having is that I also need it to work when the user presses on the "enter" key. So if they enter "23" and then press enter, the onblur will never happen.

I'm trying to use the onkeydow event but I am having issues. The "var qte" in the enterKey() function is always blank. Anyone know what I'm doing wrong? Am I using the correct event? Is there a better way of doing this?

Any help would be appreciated.

PS : I'm being forced to use JavaScript only. no jQuery unfortunately.

<input type="text" name="qte_name" value="" size="3" onblur="updateCart('product1', this);"  onkeydown="enterKey(this, event, product1');" />

function updateCart(id, quantityObj) {
  var quantity = quantityObj.value;
  // calls appropriate Ajax code. All is fine here
} 

function enterKey(obj, e, id) {
    var key = document.all ? window.event.keyCode : e.which;
    var qte = obj.value; // Keeps appearing as blank

lastAction = key;                           
    if(key == 13) {         
       updateCart(id,obj);
       // I will forward to a new page here. Not an issue.
    }
}

Upvotes: 0

Views: 2879

Answers (3)

Miguel
Miguel

Reputation: 20633

HTML

<input type="text" id="qte_name" name="qte_name" value="" size="3" />

JavaScript

var input = document.getElementById('qte_name');

input.addEventListener('blur', function(e) {
    updateCart('product1', this);
});

input.addEventListener('keypress', function(e) {
    if ((e.which || e.keyCode) == 13) {
        input.blur();
        updateCart('product1', this);
    }
});

function updateCart(id, quantityObj) {
  var quantity = quantityObj.value;
}

JS Fiddle Example

http://jsfiddle.net/uM8Qq/2/

Upvotes: 1

Winchestro
Winchestro

Reputation: 2188

One quick suggestion is, remove the inline function calls. Mixing HTML and Javascript makes it harder to debug/maintain. You can set them in your Javascript. Instead of this obtrusive line

<input type="text" name="qte_name" value="" size="3" onblur="updateCart('product1', this);"  onkeydown="enterKey(this, event, product1');" />

Have the data/structure in your html

<input id="yourInput" type="text" name="qte_name" size="3"/>

And your functionality in your javascript (it's just example code doing nothing except testing, but you will figure it out yourself)

var input = document.getElementById("yourInput");
    input.onblur=updateCart;   //Actually you don't need to pass any arguments
    input.onkeydown;=enterKey; //you may also want to pick other function names
function updateCart(event){
    console.assert(this instanceof HTMLInputElement); //check if this is set
    console.assert(this.name === "qte_name"); //so you can access the data
}
function enterKey(event){
    console.log(event.keyCode) //find out the desired keyCode you want to handle
    if(event.keyCode === 13){ 
        console.log("Enter was pressed");
        event.preventDefault(); //You are done and make sure no form submit happens
    }
}

passing "this" as an argument in a function is (almost) never a good idea. The whole point of "this" is that it gets set automatically and can be used in the function context. I'd bet good money that it's the reason your code doesn't behave the way you think it would.

edit: After loosing good money but proving my point to never bet on knowing what "this" refers to for sure unless you tested it :) What happens in case of inline event handler is actually somewhat similar to the new Function() constructor. It gets wrapped in a generic event handler function. This generic event handler function gets set to the corresponding attribute. (now I understand where the idea to pass this as an argument to the function came from in the first place) 

element.onkeydown = function onKeyDown(event){
   //String you entered in the inline event handler
}

Another tip, and this is just my personal opinion, you shouldn't start out using jQuery until you have enough experience with the language Javascript itself. It may simplify working with the browser environment but it doesn't simplify the language Javascript itself, it's making it more difficult to understand how everything actually works and fits together.

So whoever forces you not to use jQuery actually does you a big favor. Unless you are a professional who gets paid to get results as quickly as possible, as long as your goal is to learn as much as possible, don't use jQuery.

Upvotes: 1

Ruan Mendes
Ruan Mendes

Reputation: 92274

When I run your code, I get a syntax error because product1 is not correctly quoted

 onkeydown="enterKey(this, event, product1');"

It should be

 onkeydown="enterKey(this, event, 'product1');"

Then it works fine http://jsfiddle.net/g27HT/ But note the following

  • You should not test for document.all, instead you should test for the feature you're looking for var key = window.event ? window.event.keyCode : e.which
  • You should not use inline HTML handlers, they make your JS less readable and maintainable.

Upvotes: 1

Related Questions