Arrange 20 HTML inputs with various data types into grid-columns as the user inputs data. Ensure that the grid container has div elements correctly positioned for output.
Arrange 20 HTML inputs with various data types into grid-columns as the user inputs data. Ensure that the grid container has div elements correctly positioned for output.
It appears you are looking for a way to dynamically display elements within a grid as the user types in real-time.
Here is one approach:
1 - Using HTML directly :
You can utilize the "oninput" property of GlobalEventHandlers along with the value of each input field:
For example, if we have: (USER INPUT)
<input type="text"
id="userName"
oninput="nameOutput.value = userName.value"/>
which corresponds to : (USER OUTPUT)
<input id="nameOutput">
Ensure that you use IDs to link both input fields so that you can obtain the input value in real-time.
2 - Implementing a JavaScript function :
By assigning a JavaScript function to "oninput", you can use innerHTML to change content and classList.add() to style the output accordingly.
Furthermore, you can define CSS classes to position elements within a grid based on your preferences:
.showNameOutput {
grid-column: 5/6;
grid-row: 1/2;
background-color: blue;
}
Then, apply this class to the selected element using JavaScript:
const nameOutput = document.querySelector('.nameOutput');
function myFunction() {
nameOutput.classList.add('showNameOutput');
}
The function will execute whenever the user types in the input, causing the output element to adjust its position within the grid.
You can refer to the provided example for a more visual representation:
Another method involves using a form with an array to store values and display them together upon submission.
I hope this explanation clarifies things for you.
I am facing an issue while trying to fetch data dynamically from firestore using a where() function. The specific error message I encountered is: TypeError: vaccines is not a function The user collection: [![enter image description here][1]][1] Here a ...
I am in the process of creating an Ajax post filter system using radio buttons to allow users to filter through multiple categories. Below is the code I have implemented: Front-end form: <form id="filter"> <?php if( ...
I'm having trouble figuring out why this basic example isn't functioning as expected on Plunker. http://plnkr.co/edit/EfNxzzQhAb8xAcFZGKm3?p=preview var app = angular.module("App",[]); var Controller = function($scope){ $scope.message ="Hel ...
In the past, I have achieved this by using padding. The concept is to have two div elements positioned side by side, where one has a width of 100% and the other has a fixed width of 50px. Here's a rough illustration: ------------------------------- ...
When loading a form, I use AJAX to dynamically populate a select element from a PHP file. Previously, my change function was working fine (it displayed another input when 'other' was selected). However, after implementing the dynamic AJAX populat ...
SOLVED: Big thanks to everyone who offered their assistance. Upon further investigation, I discovered that in the library I was using, the trigger={} functionality is specifically designed to work only with a button element. To address this issue, I took ...
Good day, I created a calendar and now I am attempting to showcase events from a JSON file. I understand that in order to display a list with certain conditions, I need to utilize a computed property. However, I am facing difficulties passing parameters to ...
I have encountered an issue while trying to place my logo on a black background with transparency. Instead of the background being transparent, now my logo is also becoming transparent which was not my intention. Does anyone have any suggestions or ideas ...
My method aims to fetch a value asynchronously and return it, providing a default value if the value does not exist. async get(key: string, def_value?: any): Promise<any> { const v = await redisInstance.get(key); return v ? v : def_value; } W ...
I am working on implementing an event listener that will receive events from a server whenever a specific task is completed. I want to structure each task as a promise to create a more organized and clean workflow. How can I resolve each task promise by i ...
I am currently dealing with an HTML form that fetches values from an array list. The form is submitted using Ajax along with a PHP script. However, I am encountering an issue where clicking on different array items only submits the first value in the array ...
After attempting to use driver.find_element_by_id // link_text // partial link text without success, I'm wondering what method I should be using to access this href. Currently encountering a No Such Element Exception. Any assistance would be greatly a ...
I have the following program running: const { spawn } = require("child_process"); const exitHook = require("exit-hook"); exitHook(() => { console.log("Leaving"); }); spawn("my-program", ["my-args"], { stdio: "inherit" }); // Long running server ...
I have been working with Leaflet, Leaflet-draw, and Cordova Geolocation. Initially, when the map is loaded in globe view, drawing works perfectly. However, when the locate function is called to update the map center and marker position, drawing becomes imp ...
I currently have a home page set up and now I would like to create a homePlus page that is controlled by a localStorage variable called alreadyShown. The concept is that once the homePlus page is shown for the first time, we will change the value of alread ...
I am working with a set of 6 cards that contain basic user information such as first name, last name, and email. On the Users Details Page, I need to implement a dropdown menu with two sorting options: one for sorting by first name and another for sorting ...
For an upcoming interview, I decided to dive into learning Next.js by following the tutorial provided on Next.js official website. Everything was going smoothly until I reached this particular section that focused on implementing getStaticProps. Followin ...
When it comes to PHP, I have found it quite simple to validate Australian phone numbers from input using PHP Regex. Here is the regex pattern I am currently using: /^\({0,1}((0|\+61)(2|4|3|7|8)){0,1}\){0,1}(\ |-){0,1}[0-9]{2}(\ | ...
Despite my efforts, I'm unable to display the updated image in my HTML file. In my TypeScript file, the imageUrl is updating as expected and I've verified this in the console. However, the HTML file is not reflecting these changes. In my researc ...
I received assistance from a friend in creating this progress bar. Everything seems to be working well, except for the fact that the progress bar is not extending to the full width of the parent div. The new width after each input tag is entered using Java ...