javascript - On key up or change event, fire Ajax to send data in jQuery - Stack Overflow

admin管理员组

文章数量:1421689

I've tried both keyup and change functions and here's why they don't do the trick. The user enters a voucher code and I want to send and ajax request which checks if the voucher exists in the database. I've tried:

$('#discount-voucher').keyup(function(event) {
    // Get the value
    let value = $(this).val()

    // Check if exists
    $.ajax({
        url: '{{ route('get-voucher') }}',
        type: 'POST',
        data: {_token: '{{ csrf_token() }}', code: value}
    })
    .done(function(data) {
        if (data == 'error') {
            $('span#voucher-error').text('Неавлиден ваучер')
        }
    })
    .fail(function() {
        console.log("error")
    })
    .always(function() {
        console.log("plete")
    })
})

But those vouchers will be sent by email and let's say the user copy paste them. It will not work. And with the change function the user has to click outside of the input or to press enter for the function to take effect and I don't want that neither I want a tip/hint which says "click outside the input ot press enter to check if the voucher is valid". So the things I need is something like the change function which takes effect without clicking or pressing enter

I've tried both keyup and change functions and here's why they don't do the trick. The user enters a voucher code and I want to send and ajax request which checks if the voucher exists in the database. I've tried:

$('#discount-voucher').keyup(function(event) {
    // Get the value
    let value = $(this).val()

    // Check if exists
    $.ajax({
        url: '{{ route('get-voucher') }}',
        type: 'POST',
        data: {_token: '{{ csrf_token() }}', code: value}
    })
    .done(function(data) {
        if (data == 'error') {
            $('span#voucher-error').text('Неавлиден ваучер')
        }
    })
    .fail(function() {
        console.log("error")
    })
    .always(function() {
        console.log("plete")
    })
})

But those vouchers will be sent by email and let's say the user copy paste them. It will not work. And with the change function the user has to click outside of the input or to press enter for the function to take effect and I don't want that neither I want a tip/hint which says "click outside the input ot press enter to check if the voucher is valid". So the things I need is something like the change function which takes effect without clicking or pressing enter

• javascript
• jquery

Share Improve this question Follow edited Nov 6, 2017 at 13:14 Hassan Raza 1161212 bronze badges asked Nov 6, 2017 at 12:54 Angel MiladinovAngel Miladinov 1,65544 gold badges2525 silver badges4646 bronze badges 3

• Why won't keyup/keydown work? – freginold Commented Nov 6, 2017 at 12:59
• Because there are other ways to input values beside the keyboard. he says that in his question. – Mark Baijens Commented Nov 6, 2017 at 13:01
• @MarkBaijens Ah, got it, thanks. Thought he meant copying/pasting from the form at first. – freginold Commented Nov 6, 2017 at 13:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

There is a paste event, you can set multiple eventlisteners like following:

$('#discount-voucher').on('keyup paste change', function () {
      //Do something  . . . .
});

also you may need to throttle the ajax request so it doesn't get called too often by typing.

本文标签： javascriptOn key up or change eventfire Ajax to send data in jQueryStack Overflow