I'm trying to get new value of an inputbox after entering each character if it's a number. But ajax in example below sends old value and not the newly entered value.

For example, if the value was 1 and I focused the inputbox, deleted the value and pressed 2, Ajax will send "1". But I need it to send "2"

HTML

<input type="text" class="quant-input" size="7" name="qty" value="1" onkeydown="change_qty();"/>

JavaScript

function change_qty(evt) {
    var charCode = event.keyCode
    if (charCode > 48 || charCode < 57) {
        jQuery.ajax("page.php", {
                type: "POST",
                data:'data='+$('.quant-input').val()
            });
        return true;
    } else {
        return false;
    }
}

I'm trying to get new value of an inputbox after entering each character if it's a number. But ajax in example below sends old value and not the newly entered value.

For example, if the value was 1 and I focused the inputbox, deleted the value and pressed 2, Ajax will send "1". But I need it to send "2"

HTML

<input type="text" class="quant-input" size="7" name="qty" value="1" onkeydown="change_qty();"/>

JavaScript

function change_qty(evt) {
    var charCode = event.keyCode
    if (charCode > 48 || charCode < 57) {
        jQuery.ajax("page.php", {
                type: "POST",
                data:'data='+$('.quant-input').val()
            });
        return true;
    } else {
        return false;
    }
}

• javascript

Share Improve this question Follow edited Oct 7, 2013 at 14:49 hitautodestruct 20.9k1414 gold badges7575 silver badges9595 bronze badges asked Oct 7, 2013 at 14:18 artaskartask 43988 silver badges1818 bronze badges 2

• 2 Tried changing onkeydown to onkeyup or onkeypress? – j08691 Commented Oct 7, 2013 at 14:19
• You can't. Onkeydown nothing is entered yet. – Bergi Commented Oct 7, 2013 at 14:21

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

The value isn't changed until the keyup event. So you need to use the following instead:

onkeyup="change_qty();"

onkeydown

will call you function when user just press the button, so, first it will call you function, but then it will insert value in the input. So, you should use

onkeyup

You can try onBlur="change_qty();" that will give you the value after leaving focus from the control. Or if you dont dont want to leave the text box and needs the updated value the onKeyUp is fine

Try these

Use either:

1. Use onkeyup.

2. Use the new html5 input event, in your case oninput:

   <input oninput="change_qty();" ...>
   

Check out this demo

A word on binding

You could and also should use binding for your event instead of an attribute:

Instead of: <input onkeyup="change_qty();">

Use:

$('.quant-input').keyup( change_qty );

Or

$('.quant-input').on( 'input', change_qty );

You can use onkeydown/onkeypress to make some validation before send ajax (to support copy-paste and special keys (e.g. Enter) you need additional code)

function change_qty() {
  let key = event.key;
  let oldval = event.target.value;
  let newval = oldval.slice(0,event.target.selectionStart) + key + oldval.slice(event.target.selectionEnd);
  
  console.clear();
  console.log("old value", oldval);
  console.log("new value", newval);

  // validation and ajax code

  // return false;   // will not allow to push key
  return true;       // will allow to push key
 
}

<input type="text" class="quant-input" size="7" name="qty" value="1" onkeydown="change_qty();"/>