Update the placeholders and values of BootStrapVue forms dynamically using innerHTML

Imagine we have created a basic form with BootstrapVue that includes only one field:

<div id="myForm">
    <b-form-group horizontal :label-cols="4" required label="Specify the date"> 
          <b-form-datepicker v-model.trim="date"></b-form-datepicker>
        </b-form-group>
</div>

Whenever a specific button is clicked in my application, it triggers a JavaScript function (let's name it functA). The goal is to modify both the value and placeholder of the date field in the form using innerHTML.

Essentially, this would involve something like this:

functA(newPlaceHolder) {   //This function is designed to change the date field's placeholder in the form
document.getElementById("myForm").innerHTML=' [...]change the placeholder of the attribute *date* to match the parameter passed to the function';

}

Is there a way to accomplish this task? I've attempted different methods previously, but none have been successful.

I appreciate your help. Thank you very much.

Answer №1

When using getElementById, it's important to remember that the div is not meant to hold text directly. Instead, you should target an attribute that contains the text content and use getElementById("") to access it through innerHTML.

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

What are the steps to correctly shut down an ExpressJS server?

I am facing a challenge with my ExpressJs (version 4.X) server - I need to ensure it is stopped correctly. Given that some requests on the server may take a long time to complete (1-2 seconds), I want to reject new connections and wait for all ongoing req ...

Is there a way to use ng-click to switch the ng-src of one image with that of another?

*I made updates to the plunkr and code to reflect my localhost version more accurately. It turned out that the AngularJS version was not the issue even after fixing the previous plunkr.* Let me start by saying that I am facing some challenges with Angular ...

Issue with setting multiple checkboxes in AG Grid

I have a situation where I am trying to select multiple checkboxes on different rows in my application. Each time I click on one checkbox, it gets selected just fine. However, when I click on another checkbox in a different row, the previously selected che ...

The printout of the webpage is not aligning properly on an A4 page

Currently, I have been utilizing the JavaScript function window.print() to print a webpage that contains a header and footer. The height of this webpage is dynamic, as it is dependent on the content of an HTML table within the page. However, I have encou ...

Using jQuery, you can disable an option upon selection and also change its border color

learn HTML code <select name="register-month" id="register-month"> <option value="00">Month</option> <option value="01">January</option> <option value="02">February</option> <option value="03"& ...

Guidelines for choosing AngularJS checkboxes to exclusively choose distinct matching items

Need help with selecting common items using Angular checkboxes. Below is the mock UI-Table: Order Id | Delivery Mode | Select 1 | Speed | ::checkbox:: 2 | Normal | ::checkbox:: 3 | Contractor | ::che ...

Updating the web browser does not display the changes made on the page

Currently diving into the world of Angular and I've successfully cloned the repository. After installing the dependencies using npm, I have the web server up and running smoothly. Accessing the page on localhost:4000 works like a charm. Interestingly ...

Issue with Bcrypt comparison resulting in constant false output

Attempting to implement password verification using bcryptjs, const bcrypt = require('bcryptjs'); login(post){ this.uid = post.uid; this.pin = post.pin; this.getUser(this.uid); if(this.checkUser != undefined ...

Convert information into an Observable

I have a scenario where I am fetching a list of items from an Observable in my Angular service. Each item contains an array of subjects, and for each subject, I need to make a separate API call to retrieve its details such as name, description, etc. Data ...

Is it possible to adjust the points on a current path using Snap?

I have an SVG containing a path element: <path d="M54.7,0.8 L111.8,73.4 L79.9,126.1 L27.9,128.7 L0.5,74.2 L54.7,0.8 Z" id="Shape"></path> After exploring the meanings of SVG paths, I've learned that: M signifies moving to a point The L ...

Fixed positioning of a div causes it to move further away when zooming out

Greetings to all! I am looking to achieve a scrolling effect for a div area as I scroll down the page. To accomplish this, I have utilized the CSS property position:fixed to lock the div area within another div called "page". Below is the corresponding CSS ...

Steps for adding a row as the penultimate row in a table

There aren't many solutions out there that don't rely on jQuery, but I'm looking to avoid it. The row content needs to be generated dynamically. Here is my flawed approach: function addRow() { let newRow = '<tr><td>B ...

Error message encountered: React hydrate TypeError - the function __webpack_require_.i(...) is not recognized as a

I encountered a webpack TypeError while attempting to use hydrate() in my index.js file. Strangely, the error does not appear when I use ReactDOM.render() instead of hydrate. My intention behind using hydrate was for server-side rendering. src/index.js i ...

Progressing through a series of step-by-step Ajax requests

I am currently exploring ways to dynamically change the content of a div. Here is an example of an ajax request that I am working on: $.ajax({ url:'/foos', cache: false, type: 'get', }).done( function( foo_array ) { fo ...

Refreshing the page in VueJs does not trigger the axios function

I've encountered an issue with my VueJs app after purchasing the Vuexy template from ThemeForest. I created a new component called CountryTable.vue, and while it works initially, it fails to display data when I refresh the page. It only shows data whe ...

Adding an external JavaScript file to an HTML document by importing an array

Having trouble loading an array from an external JS file into my HTML. Snippet from js.js: var temp_max = [4,9,2,5,8,4,2,10]; In the HTML: Note: Be sure to download DateJS and place it in "DATE-JS"!! <!doctype html> <html> ... (HTML c ...

Using the PhoneGap Back Button to gracefully exit the Application

My current project involves developing Mobile Apps using PhoneGap (Cordova 2.2), JQuery, and Javascript. The landing page is the Login Page. However, after successfully logging in and reaching the Dashboard Page, pressing the BACK BUTTON redirects me back ...

Grouped format of a Highcharts Stacked Column Chart

Looking to replicate the chart image below using Highchart.js instead of Excel. If anyone can assist in creating this chart with different color combinations, it would be greatly appreciated. Image Preview I've already attempted a similar implementa ...

I keep encountering an error in the console log, any tips on resolving it?

Whenever I use replit, the console log keeps indicating that a script is missing every time I attempt to run it. Despite having run = "npm start" in the replit file, running it prompts an error saying that the script "start" is not found. You c ...

Interacting between Angular controllers and services to efficiently showcase JSON information

Recently, I started working with Angular 1.5+ and I'm facing some challenges with the basics, particularly when it comes to displaying data from a JSON file on the DOM. Although I can fetch the data successfully (at least I think so, as it console lo ...