Is there a way to refresh autocomplete/autofill after form submission with a custom JavaScript function?

I've developed a Vue application that includes a form. Once the user clicks on submit, an Ajax request is made using Axios through a JavaScript function. The data being sent is a custom JSON object that I have constructed by combining the information from the input fields. Below is a simplified version of the code:

<form method="post" v-on:submit.prevent>
    <input name="emailAddress" v-model="emailAddress" autocomplete="email"/>
    <button type="submit" v-on:click="submit()">Submit</button>
</form>

submit: function(){
    var jsonObject = {testValue : this.emailAddress +"123"};
    axios.post(MY_URL, jsonObject)
        .then(response => {
            ...
        })
        .catch(error => {
            ....
        })
}

Upon submitting and reloading the page, my expectation was to see suggestions for the recently entered email when filling out the email input field again. However, this does not occur. My assumption is that it could be due to not submitting the form with the email input in multipart/form-data format.

Is there a way to update the browser's autocomplete/autofill feature when submitting the form as I currently am doing?

Answer №2

Make sure to indicate the type when creating an input field, such as type="email"

Please remember that the autocomplete attribute is compatible with various types including text, search, url, tel, email, password, datepickers, range, and color.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can theme changes be carried over between different pages using Material UI?

I've encountered an issue with MUI 5.14.1 where I'm getting an error every time I attempt to save themes across pages using localStorage. Any suggestions on how to resolve this problem or recommendations on a different approach would be greatly a ...

Leverage i18n capabilities by integrating with data sourced from the Wordpress RestAPI

I've been struggling with this problem for a while now and I can't seem to find any answers or people who have faced the same issue. Also, English is not my first language and I'm new to programming, so please forgive me if my approach se ...

Integrate Vue to automatically generate a new dynamic form input upon entering a value into the previous input field

I am trying to implement a feature where a form input is created every time the user adds a value to the previous input. Although I have found some helpful resources on creating dynamic forms and watching form inputs to call a function, I am struggling to ...

What could be causing my JavaScript alert to not appear on the screen?

Essentially, I've been attempting to trigger a Javascript alert using PHP. However, the alert isn't functioning at all. This is my echo statement that dynamically generates the alert echo "<script>alert('Uploaded file was not in the ...

Running globally installed node modules on Windows 7 is not supported

Note: Despite scouring various posts on this issue, I have not found a solution that works for me. That's why I am reaching out here. Problem: I am facing an issue while trying to set up the http-server package on my Windows 7 system using the comman ...

Unable to export to Excel using TableTools feature

Trying to export a DataTable view to Excel using the TableTools plugin, but encountering issues with the "Excel" button not working. Without a step-by-step tutorial for guidance, here's the code used in a test HTML: <!DOCTYPE html> <html ...

Angular promise fails to resolve after an extended period of waiting for a response

My application is designed to send GET requests to my node/express server. In order to monitor changes in the server code, I have implemented a setTimeout function. While the promise function on the client side initially functions properly for a short peri ...

jQuery Issue: Submission Count Doubling with Each POST Request

My current issue involves using jQuery to send data to a PHP file, but I've noticed that each time I submit the form, the data gets duplicated. Initially, it posts once when I press the submit button. However, upon returning to update the form and sub ...

Dynamically obtaining the content of a tag using jQuery

Although this question may have been asked multiple times before, I am encountering a peculiar issue. Let me explain the scenario: Within this tag, there is a dynamically loaded integer: <i id="my_id">{{integer value}}</i> I am attempting t ...

"Bringing in a Nunjucks Macro - How to Easily Use It

I've been working on a script that renders a nunjucks contact.html template with the following code: let fs = require('fs'); let nj = require('nunjucks'); var contact = fs.readFileSync('./src/contact.html',&a ...

Using jQuery to populate an array with selected table items

Issue Description: I am working on an HTML page with two add buttons and two tables. Currently, when the add button is clicked, rows are appended to their respective tables. However, in the backend, I need to gather all row elements when a specific "button ...

What is the explanation behind the functionality of "this.$store._modules.root" in nuxt?

Hi there, I'm just starting to learn JavaScript and Vue. (I apologize if my question sounds silly or if my English is not great.) I decided to try console.log(this) in Nuxt out of curiosity, and was surprised to see a huge object. Here' ...

React Native: Troubleshooting Issue with Shallow Copying of Nested JSON Objects

I have a JSON structure with nested objects like this: {"name", "children": [JSON objects]}. I am attempting to add a new child to the object based on a variable path, which is an array of names. Strangely, my code works fine in the Ch ...

Implementing automatic selection mode in Kendo MVC grid

Seeking to modify the SelectionMode of a Kendo MVC Grid, I aim to switch from single to multiple using Javascript or JQuery upon checkbox selection, and revert back when the checkbox is unchecked. Is this feasible? Additionally, I am successfully binding a ...

Chart showing a Google Timeline: Allow for each bar to be colored differently when there are multiple bars on the same line

It appears that the Google Timeline charts have a feature to color individual blocks on the timeline as indicated in the documentation at However, there seems to be an issue when two bars overlap on the same line, which is evident in this fiddle: http://j ...

Make real-time edits to JavaScript code on a webpage

Is there a method aside from using Firebug in the DOM view to edit live JavaScript embedded within an HTML page? For example, code like this within a .html file: <script type="text/javascript> // code here </script> Thank you. ...

What could be causing my script files to not load when I use ajax load() to bring external content into a #content div?

I am currently troubleshooting why my JS files, or script files, are not loading when I bring external content into the #content DIV. While the HTML and CSS load correctly, the scripts do not. Upon page load, my index page, complete with head, body, sc ...

Is there a way to alter the data type of a JavaScript object?

Currently, I'm developing a browser-based text adventure game that takes inspiration from classics like Hitchhiker's Guide to the Galaxy and the Zork series. In order to allow players to save their progress, I store important objects such as loca ...

What is the method for identifying modules that rely on a specific module?

Is it possible to view all dependencies modules of a specific module, similar to this: npm-remote-ls <module-name> But how can we see the modules that depend on a particular module? Any help would be appreciated. Thank you. ...

Struggling to access specific data within a JSON object? Wondering how to extract and display data from a JSON object in VUE?

Despite my extensive searching on Stack and the internet, I have not been able to find a solution to my problem. Currently, I am attempting to retrieve data from a JSON file located in the Vue src folder. The file contains three arrays with names that inc ...