how to trigger enter event in text box without pressing enter in javascript

Question

i'm working on computing the product of two textboxes. However, the user needs to press "enter" before the txtTotal will show the total value. Pls I really need help. I'm not really familiar with jquery, and I'm still studying jscript. Thank you so much !

Here is my updated code:

<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>

$('#txtQuantity').bind('input',function(){ 
 var quantity = parseFloat($(this).val()) || 0;
 var amount = parseFloat($('#txtAmount').val());
 var evt = (amount * quantity);
 $('#txttotal').val(evt);
});

</script>
</head>

<body>

<input type="text" class="quan1" name="txtQuantity" id="txtQuantity"/> 
<input type="text"  id="txtAmount" class="quan1" name="txtAmount"   value="4" disabled="" /> 
<input type="text" class="quan1" id="txttotal" name="txttotal"  disabled="" /> <br>

</body>
</html>

tech-gayan · Accepted Answer · 2015-03-23 12:57:48Z

1

var e = $.Event( "keypress", { which: 13 } );
$('#yourInput').trigger(e);

hope this helps

Extra : Read Events and Triggers

if you are using jquery you can do like this.

Solution 1

$('#txtQuantity').on('keypress', function (event) {
       if(event.which === 13){

     var quantity = parseFloat($(this).val()) || 0;
     var amount = parseFloat($('#txtAmount').val());
     var evt = (amount * quantity);
     $('#txttotal').val(evt);
     }
 });

Solution 1 Demo

Solution 2

$('#txtQuantity').bind('input',function(){ 
     var quantity = parseFloat($(this).val()) || 0;
     var amount = parseFloat($('#txtAmount').val());
     var evt = (amount * quantity);
     $('#txttotal').val(evt);
});

Solution 2 Demo

Note: In HTML5 there is a new event, "input", which behaves exactly like you seem to think "change" should have behaved - in that it fires as soon as a key is pressed to enter information into a form. older browsers you can use the "Keyup" event.

edited Mar 23, 2015 at 12:57

answered Mar 22, 2015 at 16:34

tech-gayan

1,4431 gold badge11 silver badges25 bronze badges

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

15 Comments

Myra Syrn Bel-ot Over a year ago

Hi! Thank you for responding immediately ! I really appreciate it ! I tried your code like this ==> <script src="jquery-1.11.2.min.js"></script> <script> $('#txtQuantity').on('keypress', function (event) { if(event.which === 13){ var quantity = parseFloat($(this).val()) || 0; var amount = parseFloat($('#txtAmount').val()); var evt = (amount * quantity); $('#txttotal').val(evt); } }); </script> .. however it did not work and i'm not so sure if the problem is how i called the function or i'm not really sure. :( Please help me analyze it.

Myra Syrn Bel-ot Over a year ago

i also tried this ==> <script src="jquery-1.11.2.min.js"></script> <script> var e = $.Event( "onchange", { which: 13 } ); $('#txtQuantity').trigger(e); function jsComputeTotal(evt){ var quantity = parseFloat(document.js.txtQuantity.value) || 0; var amount = parseFloat(document.js.txtAmount.value); var evt = parseFloat(document.js.txttotal.value); evt = (amount * quantity); document.getElementById("txttotal").value = evt ; return false; } </script> and adding onchange="return jsComputeTotal(event)" to txtQuantity but it did not work :(

Myra Syrn Bel-ot Over a year ago

i saw your Demo, and it is also the same as my code above sir... I would really like to compute without pressing enter?

tech-gayan Over a year ago

what is the event you want to trigger.

tech-gayan Over a year ago

if you want to trigger the event without pressing enter use change event.

|

João Gomes · Accepted Answer · 2015-03-24 07:29:41Z

0

If you need to compute the value immediatly whithout the user pressing enter, bind a keyup event to the text box

var compute = function(){
     var quantity = parseFloat($("#txtQuantity" ).val()) || 0;
     var amount = parseFloat($('#txtAmount').val());
     var total = (amount * quantity);
     $('#txttotal').val(total);
}

 $( "#txtQuantity" ).keyup(compute);

edited Mar 24, 2015 at 7:29

answered Mar 22, 2015 at 16:36

João Gomes

3326 silver badges16 bronze badges

2 Comments

Myra Syrn Bel-ot Over a year ago

Hi! Thank you for responding so fast.. I tried your code sir .. i just put this in the script var compute = function (){ var quantity = parseFloat(document.js.txtQuantity.value) || 0; var amount = parseFloat(document.js.txtAmount.value); var compute = parseFloat(document.js.txttotal.value); compute = (amount * quantity); } $("#txtQuantity").change(compute); $("#txtAmount").change(compute);.. but then it is not working. Please help me analyze your code maybe i did not understand your instruction.. Thank you. Please bare with me.

João Gomes Over a year ago

The solution wasnt working because the change event was being trigged after the element loosed its focus. The new solution shoud work as expected.

Collectives™ on Stack Overflow

how to trigger enter event in text box without pressing enter in javascript

2 Answers 2

15 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related