Tap on the key within the input field

Completing a login form programmatically:

     document.getElementById('i0116').value = email;
     document.getElementById('i0118').value = password;
     document.getElementById('idSIButton9').click();

A challenge arises when the form recognizes that the values are not filled using key events. Even after filling the form, the placeholders remain and upon submission, an error stating that the fields are empty is displayed.

I attempted to solve this by triggering a keypress event on the input box before entering the value, but was unsuccessful. Here is what I tried:

var target = document.getElementById('email');
var evt = document.createEvent("Events");

evt.initEvent("keypress", true, true);

evt.view = window;
evt.altKey = false;
evt.ctrlKey = false;
evt.shiftKey = false;
evt.metaKey = false;
evt.keyCode = 0;
evt.charCode = 'a';

target.dispatchEvent(evt);

In addition, I tested using "UIEVENTS" and "KEYEVENTS", but none of them resolved the issue. I am using the Chrome browser.

javascriptkey-events

Answer №1

Just figured out how to achieve what you're aiming for. To clear off the placeholder value onClick() and restore it using onBlur(), you can use the following code:

function clearPlaceholder(id){
      document.getElementById(id).placeholder = "";
  };

function restorePlaceHolder(id, placeHolderText){
      document.getElementById(id).placeholder = placeHolderText;
  };
<input id="10116" placeholder="email" onClick="clearPlaceholder('10116')" onBlur="restorePlaceHolder('10116','email')">
<input id="10118" placeholder="password" onClick="clearPlaceholder('10118')" onBlur="restorePlaceHolder('10118','password')">

Does this meet your requirements?

Answer №2

After encountering an issue, I found a solution by:

let element = document.getElementById('idTxtBx_SAOTCC_OTC');    
let evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);

The problem was related to knockout js, which prevented simply setting the value of the element from working. Therefore, I attempted to simulate a keypress event. The 'change' event triggers "textInput" for knockoutjs, instead of just updating the .value attribute.

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

Angular's getter value triggers the ExpressionChangedAfterItHasBeenCheckedError

I'm encountering the ExpressionChangedAfterItHasBeenCheckedError due to my getter function, selectedRows, in my component. public get selectedRows() { if (this.gridApi) { return this.gridApi.getSelectedRows(); } else { return null; } } ...

javascripthtmlangulartypescript

Node.js and Express throwing errors when trying to access a certain endpoint with HTTPS and passing parameters

I am experiencing issues with my node.js express webserver that operates on both HTTP and HTTPS, specifically related to express's route parameters and HTTPS. Express allows for parameters in the routing, such as: app.get('/users/:userid', ...

javascriptnode.jsexpresshttpsruntime-error

Steps to avoid reinitializing the component upon changing routes in an Angular 9 component

In my component, the width of a chart is stored in a variable (because I can't use style for d3). However, every time the route changes, all variables in this class component become undefined. I have tried using ngIf, services (which also become unde ...

javascriptangular

Troubleshooting Proxy.php issues in conjunction with AJAX Solr

Attempting to access a Solr 4.5.0 instance located on a private server, http://12.34.56.789:8983/ The application resides at this web server address, http://www.mywebapp.com To facilitate accessing the JSON object within the Solr instance, I decided to ...

javascriptphpajaxsolrproxy

Exploring the Reach and Sequence of AJAX Callbacks

This particular piece of code aims to achieve three main tasks: 1) validate the online status of users, 2) retrieve their information from a slightly different URL, and 3) present both sets of data in HTML format. The implementation appears functional bu ...

javascriptjqueryajaxasynchronouscallback

Are there alternative methods for handling routes in React, other than using the react-router-dom@latest library?

Currently, I am focused on a frontend project. One of the tasks at hand is to configure the network of routes. During my research, I came across react-router-dom@latest as a potential solution. However, I am curious to explore alternative options availa ...

javascriptreactjs

The angular.copy() function cannot be used within angular brackets {{}}

Within my controller, I am utilizing the "as vm" syntax. To duplicate one data structure into a temporary one, I am employing angular.copy(). angular.copy(vm.data, vm.tempData = []) Yet, I have a desire to transfer this code to the template view so that ...

javascripthtmlangularjs

Transform JSON array containing identical key-value pairs

My array is structured as follows: [ { "time": "2017-09-14 02:44 AM", "artist": "Sam", "message": "message 1", "days": 0 }, { "time": "2017-09-14 02:44 AM", " ...

javascriptjqueryhtmlangularjsfrontend

Error: The function cannot be called because it is undefined

As a newcomer to JavaScript, I recently copied a script from jqueryui.com for the dialog widget and pasted it into my Yii project. However, upon testing the code, I encountered an error: Uncaught TypeError: undefined is not a function associated with the ...

javascriptjqueryjquery-uiyii

Seems like the ng-show events inside are not being triggered, almost like an invisible image

I am encountering an issue where no JavaScript events are triggering inside an ng-show div in my code. You can access my code through the following link on Plnkr: http://plnkr.co/edit/kGqk8x?p=preview Upon loading data from JSON, I set ng-show to true. Ho ...

javascripthtmlangularjsjsonajax

Encountering a problem when trying to utilize material-ui icons in a React application

After installing the Material-UI core and icons packages using npm install @material-ui/core and npm install @material-ui/icons in my React app, I tried to use the FileUploadIcon. Here's how I imported it: import { FileUploadIcon } from '@materia ...

javascriptreactjsmaterial-ui

Having trouble retrieving the value of the second dropdown in a servlet through request.getParameter

I am facing an issue with storing the value of the second dropdown in a servlet after utilizing an ajax call in Java to populate it based on the selection made in the first dropdown. While I was able to successfully store the value of the first dropdown ...

javascriptjavaajaxpostgresqlservlets

Uploading a file from a React contact form using Axios may result in S3 generating empty files

I have set up a test contact form that allows users to upload image attachments. The presignedURL AWS Lambda function is working properly After uploading, the image file (blob) appears as an image in the HTML, indicating successful addition Upon posting t ...

javascriptnode.jsreactjsamazon-s3axios

Troubleshooting Issue with Node.js and Postman: Error encountered while attempting to

Consider the following code snippet: const fs = require('fs'); const express = require('express'); const app = express(); const bodyParser = require('body-parser') // using middleware app.use(express.json()); app.use(bodyPar ...

javascriptnode.jsexpresspostman

Using the onMessage event in React Native WebView does not seem to have any functionality

I'm having trouble with the onMessage listener in React Native's WebView. The website is sending a postMessage (window.postMessage("Post message from web");) but for some reason, the onMessage listener is not working properly. I can't figure ...

javascripthtmlreact-nativewebview

An AJAX function nested within another AJAX function

Is there a way for me to return the second ajax call as the result of the ajax function? I could use some assistance with this. function ajax(url: string, method:string, data:any = null) { var _this = this; return this.csrfWithoutDone().done(funct ...

javascriptjqueryajax

Throttle the asynchronous function to guarantee sequential execution

Is it possible to use lodash in a way that debounces an async function so it runs after a specified delay and only after the latest fired async function has finished? Consider this example: import _ from "lodash" const debouncedFunc = _.debounc ...

javascriptnode.jstypescriptasync-awaitlodash

Dilemma: Navigating the Conflict Between Context API and Next.js Routing in React

Recently, I was following a Material UI tutorial on Udemy and decided to set up a Context API in Create React App without passing down props as shown in the tutorial. Later on, when I tried migrating to Next JS with the same Context API, I started encounte ...

javascriptreactjsnext.js

Secure your text input with a masked Textfield component in Material-UI

I'm struggling to implement a mask for a TextField component, but so far I have not been successful. Although I attempted this solution, it did not work. No matter what method I try, the masking functionality just won't cooperate. Following the ...

javascriptreactjsfrontendmaterial-ui

Jquery and CSS3 come together in the immersive 3D exhibit chamber

Recently, I stumbled upon an amazing 3D image gallery example created using jQuery and CSS3. http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/ Excited by the concept, I attempted to incorporate a zoom effect (triggered every time a user clic ...

javascriptjquerycss