Automatically populate login page fields with JavaScript code

I'm having trouble getting my JavaScript code to autofill credentials on a login webpage. Here's the code:

Can anyone spot what I'm doing wrong?

<!DOCTYPE html>
<html>

<body>
  <form id="formulario" name="formulario" method="post" target="_top" action="https://www.allianz.pt/area-privada">

    <input id="usuario" name="_58_login" type="text" value="examplelogin" runat="server" />
    <input id="password" name="_58_password" type="password" value="examplepassword" runat="server" />

    <button onclick="Test()" id="btn">Submit</button>

  </form>

  <script>
    function Test() {
      document.getElementById("usuario").value = "examplelogin";
      document.getElementById("password").value = "examplepassword";

      document.forms["formulario"].submit(); //form submission
    }
  </script>
</body>

</html>

Appreciate any assistance you can provide.

Answer №1

When submitting data to a URL within an HTML document that includes a <form>, the submitted data will not automatically fill in the form on the page.

In order for this to occur, the server receiving the request would need to dynamically generate the HTML document and explicitly transfer the data into the form fields.

Attempting to make a browser load a third-party page with provided data is generally not feasible due to potential security risks such as Cross-Site Request Forgery (CSRF) or Cross-Site Scripting (XSS) attacks, which most websites are protected against.

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

Container will keep items from spreading out

Experiencing an issue with the card layout in my weather dashboard app. The cards within a container are not spreading out evenly to match the 100% width of the header. I want the container with the 5 cards to be the same width as the header and wrap prope ...

When trying to execute an Axios POST request to the backend endpoint '/user/signup', it leads to an unexpected Internal Server Error

I'm facing a challenging issue with my web application. Whenever I try to sign up a user by making an Axios POST request to the '/user/signup' endpoint, I encounter an Internal Server Error (HTTP 500). The error message doesn't provide ...

using jquery to select the nearest or following div

My HTML structure is as follows: <table> <tr> <td> <button class="popup" id="$row[0]"></button> </td> </tr> </table> <div class="details"> <div id="section-2"> </div> < ...

Trouble accessing state when React child calls parent method

Within my project, I am working with 3 components that are nested as follows: App->GameList->GameItem The App (parent) component has a method that is triggered by the onClick event within the GameItem (child) component Upon clicking the GameItem co ...

$rootScope:task_in_prog The action is currently underway and cannot be started again

Working with Angular Material has posed challenges for me, particularly in grasping the intricacies of the $scope.apply functionality. Whenever I attempt to notify the UI of changes by invoking apply, it consistently fails with an error. While similar ques ...

The process of deleting elements from an array once they have been placed in a drag area using jQuery

Implementing jquery ui for dragging objects, my current setup involves an array structured as follows: var animals = ['cat', 'dog', 'monkey']; var output = []; for (var i = 0; i < animals.length; i++) { output.push(&ap ...

GraphQL File Uploads: A Seamless Way to Upload Files using

In the process of developing my Express-GraphQL API, I have reached a stage where I am working with MongoDB. At this point, I have defined the following: Project Mongo model: const { Schema, model } = require("mongoose"); const projectSchema = new Schema ...

Odd replication occurring while storing object attributes in an array

JSFiddle I am trying to iterate through an object, make changes to each property, and then add them to an array. Each property is added multiple times (in the JSFiddle example, I have set it to be added twice for simplicity). Each iteration should have so ...

Display the result from Ajax in the div of the main webpage

On the homepage, there is a <div> with the id of "search_result" where all search results are displayed. These results are loaded through an AJAX call and directly inserted into the div. Within these search results, I am able to capture click events ...

Develop a search feature that automatically filters out special characters when searching through a

I am currently developing a Vue-Vuetify application with a PHP backend. I have a list of contacts that include first names, last names, and other details that are not relevant at the moment. My main query is how to search through this list while disregardi ...

Looking to extract the full page source with Selenium and Node.js? Having trouble getting the complete source using driver.page_source as it

Having trouble fetching the full page source with Selenium web driver in Node.js I attempted using driver.page_source but it returns undefined in the console if(this.driver.findElement(By.id("ap_error_page_message")).isDisplayed()){ console.log(t ...

Challenges encountered while trying to integrate Bootstrap4 with Datatables

Trying to integrate datatables with bootstrap 4 is causing some conflicts. While the page navigation and buttons appear in the style of bootstrap 4, my table looks like a plain HTML table with randomly bolded borderlines. I suspect that my styles are being ...

JavaScript automatic clipboard functionality is not correctly copying data

I can't seem to get my javascript/HTML autocopy function working properly. Every time I click the button (<i class="far fa-clipboard">), it ends up copying the Donate BTC value instead of the ETH or LTC value. This is the javascript code I&apos ...

Data vanishing upon selection of a date or update of the month

I have implemented VanillaCalendar to display events on specific days. You can view the complete demo in the code snippet provided below or by visiting it on CodePen The functionality involves iterating through JSON data and adding a div element to days ...

What is the best way to create a dynamic route in CodeIgniter based on a database entry

Within my routes.php file, I've included the following code for routing: $route['report/:num'] = "home/reportcard/$1"; As for my controller code: <?php defined('BASEPATH') OR exit('No direct script access allowed&apo ...

CSS for aligning div logo in the center

I am currently working on optimizing the mobile version of our website and have encountered a roadblock while trying to center the logo in the header section. I have attempted using the flex property along with justify-content:center;. Here is the snippet ...

Executing Sequential Jquery Functions in ASP.Net

I have successfully implemented two JQuery functions for Gridview in ASP.Net 1. Enhancing Gridview Header and Enabling Auto Scrollbars <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script& ...

Enhance ngx-bootstrap's tab content with ngx-scrollbar functionality

Currently in my project, I am utilizing bootstrap 4 and ngx-bootstrap. One requirement I have is to develop a component consisting of 2 scrollable divs that can be switched by tabs. I was hoping to demonstrate a sample application on stackblitz, but unfor ...

The usage of $http.post in combination with TypeScript accessors

Currently, I am developing an AngularJS application (v1.3.15) using TypeScript 1.5 in Visual Studio 2013. I have encountered a challenge related to TypeScript object properties and JSON serialization while utilizing $http.post(). Although I consider myself ...

How can I retrieve the value of an HTML component when submitting a form?

In my ExpressJS application, I have two pages: home and user. In the home.js file, I create a form that navigates to the user.js page when submitted. While I am able to retrieve values from input components, I am facing issues with other components. How ca ...