Having issues with a basic javascript bookmarklet that isn't functioning properly due to a clientside validation script error. Any suggestions on how

Seeking assistance, as I am facing a challenge with transferring a large amount of data from a spreadsheet into a web form located at . Manually inputting this data is time-consuming, so I explored different options and concluded that a javascript bookmarklet would simplify the process by automatically populating the necessary input fields. While the bookmarklet successfully fills in the fields, the website does not recognize the input data when entered via javascript. This issue triggers a client-side javascript validation error. Here is a snippet of the javascript code:

javascript: (() => {
  document.getElementById('patientid').value = "TESTTEST";
})();

Although the value is correctly inserted into the field, the client-side javascript continues to report an error as if no text has been entered. I have included a screenshot of the error for reference.

Despite the text being visible in the field, the form does not register it. Any insights into why this occurs? This obstacle renders my solution ineffective, forcing me to manually fill out the entire form. Is there a way to modify the client-side script to recognize the text input? I acknowledge that the elogbook website may contribute to this issue, although I have no control over it. Is there a clever method using the bookmarklet to bypass the validation and submit the form? Any guidance would be greatly appreciated, as the solution might be straightforward but eludes me.

When examining the underlying html of the form control using Chrome's document inspector, I observed the structure shown in this document inspector screenshot. It appears to utilize angularJS, a framework which I am unfamiliar with. Despite trying various approaches to validate and interact with the object, I remain stuck in resolving this issue.

Answer №1

Appreciate the assistance, activating the change event appears to resolve the issue, it seems that changing the form value through JavaScript does not automatically trigger the change event

javascript: (() => {
  var el = document.getElementById('patientid');
  el.value = "TESTTEST";
  el.dispatchEvent(new Event('change'));
})();

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

Show text using AJAX when the form is submitted

I'm in the process of creating a basic form with a submit button (see below). My objective is to allow users to enter text into the input box, click submit, and have the page refresh while displaying the entered text in a div element. The user's ...

How can I expand all nodes using breezejs?

Is it possible to expand all child nodes within an entity using the breezejs query statement, perhaps even up to 2 levels deep? The situation is that I am creating a partial entity for the list page, but when editing a single entity, I want to display all ...

Unable to apply CSS modifications to child elements in AngularJS

angular.element($document[0].querySelector("table > tbody > tr")).mouseover().css("background-color", "red"); <table> <thead> <tr> <th>Name</th> < ...

Tips on positioning content beneath a fixed header or navigation bar when viewed in a web browser

Hi, I'm having an issue with creating a fixed header using HTML and CSS. When I set my header to be in a fixed position, it covers up the content below it. I want the content to be positioned under the header when the page is loaded. Additionally, I&a ...

Issue with Github actions: Failure in mark-compacts process due to ineffective operation near heap limit causing allocation failure - running out of memory in

Whenever I try to build my library files, I keep encountering an out of memory error. In my local setup, I was able to resolve this problem by executing the command export NODE_OPTIONS="--max-old-space-size=8192". Unfortunately, no matter how mu ...

Using recycled frame buffers in a threejs fragment shader

I'm currently working on a project to develop an app that emulates the effect of long exposure photography. The concept involves capturing the current frame from the webcam and overlaying it onto a canvas. As time progresses, the image will gradually ...

Tips for transferring information from an express rendering to a Vue component?

When working with an express route, page.js router.post('/results', (req, res, next) => { output.terms = "hello" output.results = [{"text": "hello world"}, {"text": "hello sunshine"}] res.render("/myview",output) }) The cod ...

Conflicting behavior between jQuery focus and blur functions and retrieving the 'variable' parameter via the $_GET method

There is a simple focus/blur functionality here. The default value shown in the 'Name of Venue' input field changes when the user clicks on it (focus) and then clicks away(blur). If there is no text entered, the default value reappears. Input fi ...

Tips for automatically loading a new page or URL when a user scrolls to the bottom

I am working on implementing infinite scroll functionality, where a new page loads automatically when the user reaches the bottom of the page or a particular div. Currently, I have this code that loads a new page onclick. $("#about").click(function(){ ...

AngularJS: Transforming form field inputs into JSON format

I am curious about how I could create a function (either a directive or controller) that can convert all of my form inputs into JSON, including their current values. The JSON format I have in mind is something like this: { fields: [ {fi ...

What causes the appearance of 'GET/ 304 --' in my code? (vue.js, express)

While attempting to fetch data on the client-side using axios in vue.js, I encountered a server-side error with the code 'GET/ 304 --' The reason for this occurrence is unclear to me and I am unsure of how to troubleshoot or resolve it. If I re ...

Tips for sending multiple post parameters to a web API in Angular using TypeScript

I am looking to send multiple values to a web API using AngularJS TypeScript. // POST api/values public void Post([FromBody]string value1, [FromBody]string value2) { } I want to make the method call like this: $http.post('api/values', ???) I ...

Tips for updating the CSS properties of the "html" element

html { width:100%; } Looking to dynamically update the CSS of the html tag upon button click using JavaScript. The goal is to modify the existing HTML CSS code as shown below, but achieving this dynamically with a script. Is it possible? html { w ...

Using Material-UI version 1, pass the outer index to the MenuItem component when clicked

Within my component, there is a Table that displays rows generated from a custom array of objects. In the last TableCell, I aim to include an icon button that, upon being clicked, opens a Menu containing various MenuItem actions (such as edit and delete). ...

How can we transmit a list of data from an AngularJS application to a web service

Currently, I am developing an app in the Ionic 1 platform using AngularJS. I am facing a challenge where I need to pass a list of objects to a web service. Can someone guide me on how to achieve this? I attempted to do it but was unsuccessful in sending a ...

Steps for wrapping a class with a higher order component

Is it feasible to encapsulate a class component within a higher order component (HOC) that is also a class? import React, { Component } from "react"; import { View } from "react-native"; import { Toast } from "react-native-easy-toast"; const withToast = ...

Successful Mongoose query in Node.js, however the array remains empty even after using forEach loop. Issue with MongoDB integration

After performing a forEach inside an asynchronous method, I am trying to return an array of names. The issue is that despite the forEach working correctly, the array always ends up empty. On the website side, here is my request: function retrieveCharity( ...

Guide on setting up Tailwind CSS and material-tailwind concurrently within the tailwind.config.js configuration file

I am looking to integrate both Tailwind and Material Tailwind in a Next.js 14 project. Below is my customized tailwind.config.ts file (already configured with Tailwind CSS): import type { Config } from 'tailwindcss' const config: Config = { ...

"I encountered an error stating that res.json is not a function while trying to establish a connection between ReactJS

dataset.list.js import React, { Component } from "react"; import Datasets from "./data"; import axios from "axios"; class App extends Component { render() { return <Datasets datasets={this.state.datasets} />; } ...

Form calculation

An issue has arisen with my calculating form for a client where an incorrect amount is displayed when 0.93 is entered into the percentage box. Original calculation: 10 x 10 x 15 x 0.93 = 13.95 Corrected calculation: 10 x 10 x 15 x 0.93 = 1.395 I am seek ...