Tips for displaying an asp.net form using javascript functions

I am currently developing a login page in asp.net and have utilized a template from CodePen at http://codepen.io/andytran/pen/PwoQgO

It is my understanding that an asp.net page can only have one form tag with runat="server". However, I need to incorporate code behind functionality into two form tags.

<form runat="server" visible="true" id="form1">
       .....
</form>

<form runat="server" visible="false" id="form2">
        ........
</form>

I have a div tag that serves as a toggle button:

<div class='switch' onclick="show();" >
<i class='fa fa-pencil fa-times' onclick="show()"></i>

Here is the JavaScript being used:

function show()
{
document.getElementById("form2").style.visibility = "visible";
}

Unfortunately, this code is not functioning as expected. Any assistance would be greatly appreciated.

javascripthtmlcssasp.net

Answer №1

If you hide a form on the server, it will not be visible to the client until you apply CSS to make it visible.

<form style="display:none" />

Then, use the following code snippet to display the form:

..style.display="block";

It's important to note that your forms are unlikely to be named form1 and form2 unless you have specifically set them up with those static IDs.

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

Eliminate a specific element from the dataset

My question revolves around a data array used to populate three drop down <select> boxes. How can I eliminate duplicate values within the drop downs without affecting the array itself? For example: data = { firstbox_a: ['grpA_1','gr ...

javascripthtmlarraysjsonhtml-select

Flot Graphs: A unique dual-axis line chart with the ability to stack data on one axis

Is it possible to utilize the FLOT Javascript library for creating a chart with dual axis and three data sets? I am specifically looking to have one data set on the left axis and two on the right axis. Ideally, I want to stack the two datasets on the right ...

javascripthtmlchartsflot

Is Kendo Telerik grid capable of applying conditional formatting while filtering?

Is it feasible to modify the background color of rows in a Kendo Telerik grid when a filter is implemented within an ASP.NET MVC application? ...

javascriptasp.net-mvckendo-uitelerik

Leverage the power of Reactjs to add hover effects to a mapped

I am facing a challenge in styling the ListItem on hover. The issue arises when the list is dynamically generated, causing all list items to change style simultaneously when hovered over. How can I target only one element for styling? Below is the code sni ...

javascriptcssreactjsmaterial-ui

Is there a way to implement absolute imports in both Storybook and Next.js?

Within my .storybook/main.js file, I've included the following webpack configuration: webpackFinal: async (config) => { config.resolve.modules = [ ...(config.resolve.modules || []), path.resolve(__dirname), ]; return ...

javascriptnext.jsstorybook

Incorporate Live Data into Google Charts Using Ajax Response for a Dynamic Visualization

I am struggling to successfully load a responsive Google Line Chart after an Ajax call. I have attempted to place the entire Google Chart code within the success part of the Ajax call, but it does not seem to work as expected. Below is my current Ajax code ...

javascriptphpjqueryajaxgoogle-visualization

Error occurs when attempting to write to a Node stream after it has already

I'm experimenting with streaming to upload and download files. Here is a simple file download route that unzips my compressed file and sends it via stream: app.get('/file', (req, res) => { fs.createReadStream('./upload/compres ...

javascriptnode.jsexpressstreamgzip

Tips for optimizing the placement of div elements for top advertisements on Amazon's website

I'm looking to overlay some divs on top of Amazon.com ads, similar to the image above. This is part of a personal project where I need to position these divs precisely over the ads. To achieve this effect, I've been using getBoundingClientRect t ...

javascripthtmlcss

Concealing a division element if there is no content inside of it

As a newcomer to jQuery, I am experimenting with setting up a code that hides a div when the 'innerHTML' is null. However, my attempt using the code below is not working. Can anyone point out where I might be going wrong? if (($("#php-errors").h ...

javascriptjqueryinnerhtml

"Modifying Code Aesthetics in WebStorm/IDEA: A Step-by-

Here is the code style I am currently using in my JavaScript project: var obj = { a: 1 , b: 2 , c: 3 } var arr = [ 'a1' , 'a2' , 'a3' ] const w = 1 , w2 = 2 , w3 = 3 The team claims they are following npm's co ...

javascriptnode.jsintellij-ideanpmwebstorm

Keep table header stationary while accommodating varying column widths

I have come across various solutions for freezing a table header row, such as creating a separate table containing only the header and hiding the header of the main table. However, these solutions are limited to cases where column widths are predetermine ...

htmlcsshtml-table

How to effectively manage an overflowing navigation bar

I am currently facing a challenge with the main navigation bar on my website, specifically with how it handles an overflow of links on smaller screen resolutions. I have attempted to adjust the height of the navigation bar at smaller media queries, but I&a ...

phpjqueryhtmlcss

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

javascripthtmlcsscss-selectors

Combining all code in Electron using Typescript

I am currently working on developing a web application using Electron written in Typescript and I am facing some challenges during the building process. Specifically, I am unsure of how to properly combine the commands tsc (used to convert my .ts file to ...

javascripttypescriptnpmelectron

attempting to retrieve the selected values from within an iframe

I'm attempting to access the values of an iframe element select within a dialog on my page. In my JS file, I wrote code to access a select with the ID "firstSelectms2side__sx", but it didn't work as expected. Setting aside the iframe, I also tr ...

javascriptjqueryiframe

Is there a way to verify the presence of a specific word within a classname?

My goal is to verify if the string ("Pre laminated ") matches the css class name I am checking. I only need confirmation of whether the given word is present in the classname: Output "pass" if it exists, output "fail" if it does not. ...

javacssseleniumclassname

I encountered an issue with my h3 element's margin not being applied properly when I attempted to add

I'm facing an issue with the margin for <h3> tag in my HTML code. I want to create some space between the form and the h3 element. Here is the CSS: *{ margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } body{ background-ima ...

htmlcss

The HTML navbar seems to have a mind of its own, disappearing and shifting around unpredictably as I zoom in or resize

WHEN DISPLAYING THIS CODE, IT IS ADVISED TO VIEW IN FULL PAGE MODE This code includes navigation, header, and styling elements. However, when the browser is zoomed in or out, the navbar tends to move around and eventually disappears off the screen if wind ...

htmlcsswebnavigation

The second click on ng-click does not seem to be functioning properly

Hello, I am new to AngularJS. I have managed to fetch the required data, but I'm facing an issue where clicking doesn't work for the second time. I have tried multiple solutions but none seem to be working. Could someone please help me solve this ...

jqueryasp.netangularjs

Stop the form submission from redirecting or refreshing by utilizing JavaScript

I'm facing an issue with a page on my website that includes textboxes generated from php, along with two buttons - GetData and SaveData. My goal is to enable users to press the enter key while editing a textbox and trigger the same action as clicking ...

htmlformssubmit