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

Exiting a void method in JavaScript/Typescript using the return or break statement

Using Vue's mdi icons within a string

Tips for implementing a single function across multiple HTML classes using JavaScript

The Angular $http.jsonp() function can only be executed one time

Assign the array value to all inputs that share the same class tag

Step-by-step guide on incorporating a hyperlink within a row using @material-ui/data-grid

Integrate your React Native application with a Node.js backend on your local machine

Encountering the issue of receiving an undefined value for a variable despite having previously defined it within

Error in Discord Bot: discord.js showing TypeError when trying to read the length of an undefined property

JavaScript math validations not functioning correctly

Using Jquery to set values for css properties

How can I implement a for loop in Node.js?

Transforming a JavaScript chained setter into TypeScript

Expanding Vendor Class in Laravel

Paper.js: Is there a way to prevent canvas height and width from changing when the window is resized?

Troubleshooting: Issue with Updating Views in Angular JS

Encountering a PHP error in Laravel Vapor when attempting to upload a file from the front-end

I am looking to have the first option in the dropdown menu appear as a placeholder text

Retrieve the user ID during the login process using LoginController.php in Laravel

How to make Sails.js package accessible across all modules