Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field.

How can this be achieved? Is it possible for the value in the disabled field to update in real-time as the user types into the enabled fields?

https://i.sstatic.net/kW2aA.png

I attempted the following code:

$('#productNameInput').keyup(function(e) {
    $("#productIDInput").html($(this).val());
}).keypress(function(e) {
    return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});

However, it seems that everything I tried is deprecated and I'm unsure of the next steps. Any guidance on resolving this issue would be greatly appreciated. Thank you :)

Answer №1

Big thanks to @Rajesh for catching my oversight: The correct code should use .val instead of .html -

$('#productNameInput').on('keyup', function() {
    $('#productIDInput').val($(this).val());
}).on('keypress', function(e) {
    return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});

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

Using an AngularJS array with ng-repeat

As soon as a websocket message is received, the code below executes: connection.onmessage = function (eventInfo) { var onConnectionMessage = JSON.parse(eventInfo.data); if (onConnectionMessage.messageType === "newRequest") { getQuizRequests(); } } T ...

Using HTML and CSS to Trigger Animation of Gif (or video) Upon Mouse Hover, Depending on Mouse Position

Is there a way to create an animation for a gif or video that changes based on the position of the mouse relative to the frame? For example, if the gif shows someone turning around 360 degrees, I would like the person to be facing forward when the mouse i ...

What is the best way to show an element when hovering over another element?

I'm looking for a CSS-only solution (NO JQuery) to display a FontAwsome icon (<i class='fas fa-arrow-alt-circle-left fa-lg arrowbounce text-success hidearrowbounce'></i>) only when hovering over another element. However, despite ...

What is the formula for determining the REAL innerWidth and innerHeight?

I am currently working on a responsive website using Bootstrap and I am looking to create an element that perfectly fits the screen size. When I set the height/width to 100%, the browser includes the toolbar, other tabs, and the Windows taskbar in the cal ...

Dividing an AngularJS module across multiple iFrames on a single webpage

Currently, I am working on a web application that consists of 1 module, 5 pages, and 5 controllers. Each HTML page declares the same ng-app. These pages are loaded within widgets on a web portal, meaning each page is loaded within an iFrame in the portal. ...

Tips for targeting an element for focus following a re-render in ReactJS

Within my web application, when a user hits the enter key, they are able to save the current record. A message confirming that the "record has been successfully saved" is then displayed. However, I have noticed that the blinking cursor in one of the input ...

Tips for creating a responsive CSS "drawing"

I've created an "aquarium" using HTML and CSS, Now, I want to make the entire page responsive so that the elements shrink and grow based on the browser resolution. The first step is determining how the container should be structured. Is it acceptabl ...

the correct data format for posting using axios

I am looking to use axios for posting data in a specific format using jQuery's ajax post method. https://i.stack.imgur.com/SwKuS.jpg var data = {}; data.params = querystring.stringify({'cmd': 'getUnreadCount', 'isNewAdmin&ap ...

Utilizing inputRef in conjunction with MUI's useAutocomplete

Is there a way to pass the "inputRef" to Material UI's useAutocomplete? I'm looking to set a custom reference on the input, but the getInputProps() method from useAutocomplete already requires its own reference. I've attempted various appr ...

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...

Guide to incorporating a logo into a personalized WordPress theme

In the process of creating a WordPress theme from scratch, I've hit a roadblock while trying to incorporate a logo in the top left corner of the page where the title would normally be displayed. <h1> <a href="<?php echo home_url(); ?> ...

Grid alignment issue with images on Bootstrap 4.0 - resolution needed

Currently, I am working on a mini project that involves recreating a website using Bootstrap 4. I am at a stage where I need to display three images in a grid format with two on the top and one on the bottom. The challenge is to make the top two images eve ...

In Google Chrome, the input types for email, URL, and search feature a thin 1px padding on the left and right sides

If you are a user of Google Chrome (the only browser I am familiar with that exhibits this behavior), please visit this example, uncheck the "Normalized CSS" box, and observe the input elements. In Google Chrome, the email, URL, and search input fields ha ...

The onClick event in ReactJs appears to be ineffective when used with a button HTML element

Can someone help me troubleshoot this issue in my ReactJs app? import React from 'react' import '../../../assets/styles/authentication/login.css' import '../../../assets/bootstrap/css/bootstrap.min.css' import { login } fro ...

Transfer files and data efficiently using Ajax

I am facing an issue while trying to send a file and data together to the Controller. When I only send the file, it works correctly. However, when attempting to send both data and a file, nothing seems to work. contentType: false, processData: false, Rem ...

Tips for closing print window dialog during Protractor testing

Currently, I am performing end-to-end testing using protractor. During a specific test, I need to verify if the print button is successfully creating a PDF. When the test clicks on the button, it triggers a print window dialog as shown below: https://i.st ...

The initial render in a Kanban board seems to be causing issues with the functionality of react-beautiful-dnd

I recently integrated a Kanban board into my Next.js and TypeScript project. While everything seemed to be working fine, I encountered a minor glitch during the initial rendering. Interestingly, when I refreshed the page, the drag and drop functionality st ...

JS: I'm struggling to understand the scope

I've been working on adapting CouchDB's JS API to function asynchronously, but I'm encountering an unresolved error: You can find my version of the JS API here on Pastebin. Whenever I execute (new CouchDB("dbname")).allDocs(function(result) ...

Building a React component that's a table containing rows that can be scrolled and elements that are clickable

Imagine having a set of events and their respective participants: const myData = { "event_1": ["1", "2","3"], "event_2": ["11", "5","8", "9"], "event_3&quo ...

There is plenty of negative space within masonry design

I'm having trouble configuring a masonry layout for my cards. $('.grid').masonry({ fitWidth: true, horizontalOrder: true, // set itemSelector so .grid-sizer is not used in layout itemSelector: '.grid-item', // us ...