The submission of the form is not functioning correctly when triggered by JavaScript using a button

My website was designed using a CSS/HTML framework that has been seamlessly integrated into an ASP.NET site.

Within a ContentPlaceHolder, I have implemented a basic login form. The unique aspect is that I am utilizing the onclick event of an image to submit the form. While this method typically functions smoothly, I am currently encountering an issue.

<div id="login">
    <form action="index.aspx" method="post" id="nothingForm" name="nothingForm">
    </form>
    <form action="https://google.com.au" method="post" id="loginform" name="loginform">
        <input type="text" name="uname" value="username" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
        <input type="password" name="pword" value="password" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
    </form>
    <br /><img src="images/login.gif" alt="" onclick="document['loginform'].submit()" />    </div>

To make the onclick="document['loginform'].submit()" function properly, I had to insert another form before the actual form. Ideally, this workaround should not be necessary, but unfortunately, I could not find any solutions for this issue online.

Has anyone else encountered a similar situation like this?

Answer №1

Have you experimented with using

document.getElementById("loginform").submit()
? It seems like a more appropriate approach, as accessing elements directly from the document in that manner is not a common practice. It could potentially lead to unexpected side effects.

Answer №2

The issue lies in the fact that the page currently contains a form encapsulating all the code. Nesting forms is not allowed, which means that the first form tag will be disregarded, and its closing tag will prematurely end the outer form.

To resolve this problem, you must position your form outside of the existing form structure.

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

What is causing gog.com to malfunction when accessed through chromedriver?

Can you figure out why the appearance of gog.com differs between Google Chrome (left) and Chromedriver (right)? It's noticeable that things appear distorted and broken in Chromedriver. Even after comparing the two HTML codes, no significant differenc ...

How can you disable an 'option' HTML5 element using the AngularJS methodology?

How can I disable an 'option' element in HTML5 using AngularJS? Currently, I am working with AngularJS v1.2.25. Here is the Plunk Link for reference: https://plnkr.co/edit/fS1uKZ <!-- CODE BEGIN --> <!DOCTYPE html> <html> ...

the process of triggering animation to start automatically when a button is clicked in Web Development

I'm looking to create a React component that triggers an animation when clicked. I have a few options in mind: If the props are changed in the middle of the animation, it should restart the animation. The props can be changed by clicking a button on ...

The iframe failed to load on the external server

I'm working on a website where the admin can upload PDF files that will be displayed on an HTML page. I'm using an iframe to achieve this, and it works perfectly fine on my local server. However, when I tried uploading it to the remote server, it ...

Guide on How to Include data (PDF Base 64) in angular 6 component

Within my Angular 6 application, I am presenting data (a report) in a new window using the following code snippet. *** The 'result' variable contains Base64 data *** if (result != null) { const pdfWindow = window.open(""); ...

The error message in threejs is "GL_INVALID_OPERATION: Attempting to perform an invalid operation on

I'm having an issue when trying to combine post-processing with the "THREE.WebGLMultisampleRenderTarget." The console shows the error message: [WebGL-000052BE06CD9380] GL_INVALID_OPERATION: Invalid operation on multisampled framebuffer When using th ...

Incorporating Material-UI themes within styled components

Trying to incorporate theme spacing value in a styled component but facing issues. Initially, the style was applied to the button, but now it is not working as expected. You can view the problem here: sandbox. import React from "react"; import ...

Is converting the inputs into a list not effectively capturing the checkbox values?

On my website, I have a div that contains multiple questions, each with two input fields. When a button is clicked, it triggers a JavaScript function to add the input values to a list. This list is then intended to be passed to a Django view for further pr ...

Enforcing the autocompletion selection in jQuery UI

As I was working on my original question, I realized that I needed to ask a separate question because I didn't fully grasp what I was trying to achieve. I am currently utilizing the jquery Tag-it plugin available at https://github.com/aehlke/tag-it a ...

How to keep your vue-router up-to-date

As a newcomer to vuejs, I am using vue cli 3 for my project which consists of various components. One of the components is a menu component where I retrieve all the menu items from an API (code provided below). I have integrated vue-router for routing purp ...

Incorporating Tabs with HTML, CSS, and jQuery

After searching for a way to enable tab selection on click within my HTML fragment representing a tabbed interface, I was unable to find a solution. I resorted to manually programming it using JavaScript, which did work, but I feel there must be a more p ...

What is the best way to display images when a single element in a list created by ngFor is hovered over in Angular 2

displayStar(val) { this.starDisplayed = true; } <ul class="listboxtickets"> <li class="selectlistticket" *ngFor="let item of ticketList" (mouseover)="displayStar(item.id)" (mouseleave)="hideStars()"> <div class="ticket ...

Issues with displaying form/button glyphicon when using a fixed table header in Bootstrap

I have a situation where I have a table with a fixed header. In one of the columns, there are delete buttons within a form. The table structure is as follows: <div class="panel panel-default table-responsive fixedHeader"> <!-- Table --> &l ...

Unleash the full potential of React and material-ui with the Raised Button feature - find out how to effortlessly keep all

This snippet showcases the code for my custom Buttons component: import React from 'react'; import RaisedButton from 'material-ui/RaisedButton'; const style = { button: { margin: 2, padding: 0, minWidth: 1, }, }; cons ...

The contenteditable attribute does not function properly in a foreignobject element on Firefox browsers

<?xml version="1.0" standalone="yes" ?> <svg xmlns="http://www.w3.org/2000/svg"> <foreignObject width="100" height="100" x="20" y="65"> <body xmlns="http://www.w3.org/1999/xhtml"> <p contenteditable="true">text&l ...

Fixing the Responsive Menu Issues

In order to achieve the desired effect of making the text from menu and logo disappear when minimizing the menu, you can use the following approach: Create a function called `smallNav()` to handle the resizing of the sidebar container: function sm ...

Updating a function in jQuery UI after dynamically loading content through AJAX

I've been on a quest for days now, searching high and low for an answer to my dilemma. While I've managed to solve most of the issues that arose after adding AJAX calls to my code, there's one piece that still eludes me. Just to provide som ...

Tips for adjusting style, width, and height on a file upload control button in asp.net

Currently, I am utilizing the FileUpload control on my webpage and it is functioning as expected. However, I have a specific requirement to enlarge the button size in the upload control without altering the textbox size. Is there a way to achieve this? A ...

Combining Angular with MVC partial views

What I'm Looking For I require a sequence of interactive screens that progress to the next screen upon button click. Each previous screen should collapse while loading the new screen using a partial view from the MVC backend. My Current Setup Curre ...

Error in Bootstrap V5 Sass: Mixin not defined - when transitioning from @import to @use module system

Transitioning to the new SASS module system with @use from @import has presented some challenges, especially when working with bootstrap v5: https://i.sstatic.net/8Hy7W.png Old way: @import "~bootstrap/scss/bootstrap"; @import "~bootstrap/ ...