How to Stop Form from Automatically Submitting in Laravel 5.5 and vue-typeahead's onHit method

Question

How to Stop Form from Automatically Submitting in Laravel 5.5 and vue-typeahead's onHit method

I have integrated the vue-typeahead component into my Laravel project using vue-typeahead.

However, I am facing an issue where when I select an entry from the result list by pressing the "enter" key, the form automatically submits. Is there a way to prevent this behavior in the onHit method?

Below is the code snippet of my component:

    import VueTypeahead from 'vue-typeahead';
    import Axios from 'axios';
    Vue.prototype.$http = Axios;

    var elem;

    export default {
        extends: VueTypeahead,
        props: ['targetInput', 'keywordCategory', 'append'],

        data () {
            return {
                src: '/api/autocomplete',
                data: {
                    query: this.query,
                    category: this.keywordCategory,
                    append: this.append
                },
                limit: 10,
                minChars: 3,
                selectFirst: true,
                queryParamName: 'search'
            }
        },

        methods: {
            onHit (item) {
                elem = document.getElementById(this.targetInput);
                if(this.append !== undefined && elem.value !== '') {
                    elem.value += this.append + item.name;
                } else {
                    elem.value = item.name;
                }
            }
        }
    }

javascript laravel laravel-5 vue.js vue-component

Answer 1

Answer №1

Your current code most likely resembles the following:

<form>
    <input type="text">
</form>

To prevent form submission when pressing enter, you can handle the submit event like this:

<form  @keypress.enter="$event.preventDefault()">
    <input type="text">
</form>

The @keypress.enter is used to trigger a function when the user presses the enter key on an input element within the form.

By using $event.preventDefault(), you are disabling the default action of submitting the form in this scenario.

In this case, there is no need to modify onHit.

(Update) If you want to achieve the same result without modifying the form element, you can add a Vanilla JS event listener for the form within Vue's mounted function.

For example:

<script>
    export default {
    ...
    mounted() {
        document.querySelector('#test-form').addEventListener('keypress', function (e) {
            var key = e.which || e.keyCode;
            if (key === 13) { // 13 represents the enter key
                // Code to execute on enter press
                e.preventDefault();
            }
        });
    }
}

</script>

For an example, refer to the ./components/Hello.vue file in https://codesandbox.io/s/720zzmj7z1.

Answer 2

Your current code most likely resembles the following:

<form>
    <input type="text">
</form>

To prevent form submission when pressing enter, you can handle the submit event like this:

<form  @keypress.enter="$event.preventDefault()">
    <input type="text">
</form>

The @keypress.enter is used to trigger a function when the user presses the enter key on an input element within the form.

By using $event.preventDefault(), you are disabling the default action of submitting the form in this scenario.

In this case, there is no need to modify onHit.

(Update) If you want to achieve the same result without modifying the form element, you can add a Vanilla JS event listener for the form within Vue's mounted function.

For example:

<script>
    export default {
    ...
    mounted() {
        document.querySelector('#test-form').addEventListener('keypress', function (e) {
            var key = e.which || e.keyCode;
            if (key === 13) { // 13 represents the enter key
                // Code to execute on enter press
                e.preventDefault();
            }
        });
    }
}

</script>

For an example, refer to the ./components/Hello.vue file in https://codesandbox.io/s/720zzmj7z1.

How to Stop Form from Automatically Submitting in Laravel 5.5 and vue-typeahead's onHit method

Answer №1

Similar questions

jQuery Autocomplete - Showing array of options upon selecting input field in Internet Explorer

Encountered an issue while compiling code using the Istanbul plugin

Limit users to entering either numbers or letters in the input field

detecting key presses on documents using javascript

How to efficiently manage drop-down menus on a website using VBA specifically designed for Internet Explorer

Send the Vue component as an argument to the function

Transfer a file from the file:///var/mobile/Applications/ directory to an accessible location for reading in Cordova/PhoneGap

Activating a function that requires locating a dynamically loaded element on the webpage using AJAX

Merging Documents in PouchDB

The issue persists with UIkit modal element remaining in the DOM even after the parent component in Vue.js is destroyed

Restricting the Vue for-loop results to display only the current item in use

Loop through a non-array or non-object / handling both arrays and non-arrays equally

Clickable Angular Material card

What steps can be taken to ensure that a dropdown menu responds instantly to the JavaScript code provided?

Angular JS is failing to update views when passing dynamic IDs

Unable to specify a particular <div> for fetching data using jQuery AJAX in ASP.NET

Tips for utilizing CDN in vue cli?

Imitating the Frameset Separator's Actions

Using PHP and JavaScript to enhance functionality around a hyperlink

When conducting tests using Selenium and the headless Google Chrome browser in Java, the dynamic JS content fails to load