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.

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

Is it possible for me to create a list in alphabetical order beginning with the letter B instead of A

My task involves creating a summary of locations using the Google Maps API. The map displays letters corresponding to different waypoints, and I have a separate <div> containing all the route information. Currently, I have the route information stru ...

What is causing the tabs to not update the navigation in nav-tabs?

I recently implemented a tab list using Bootstrap, similar to the one shown in the image below: https://i.sstatic.net/KEy7F.png However, I encountered an issue where clicking on "Profile" or "Contact" tabs does not change anything. Even though I inclu ...

Combining Various Data Types in a Flexible List

I'm looking for a way to dynamically add rows to a table. Right now, I have the input type on the server (whether it's int, bool, string, etc), but I want to know how to implement a field accept combobox. Here is the code in cshtml: <tr ng-r ...

focusing on a single div amidst a sea of interwoven dynamically generated divs

I am currently working with the liferay framework and I am facing a challenge where I need to apply inline JavaScript to target a very specific div on my webpage. The catch is that this div is nested within multiple dynamically added divs with varying clas ...

Using v-model in Vue with jQuery integration

I wrote a jQuery code that is executed when the mounted hook runs mounted() { this.$progress.finish(); var geocoder = new google.maps.Geocoder(); var marker = null; var map = null; function initialize() { var $latitude = document.getEl ...

Storing chosen data from Gridview into a Mysql database

I am currently working on a project that involves using a gridview with radio buttons. My goal is to send the selected rows' values to a database when a button is clicked. However, I am encountering an error stating "object reference not set to an ins ...

Adaptive Images with jQuery Mobile Listview

I have been experimenting with the classic listview example featuring thumbnails from the jquery mobile documentation. However, when I upload images of different sizes, they do not display properly due to resolution issues. How can this be resolved? Here ...

Having trouble storing data in a MYSQL database with NodeJS and ReactJS

When trying to submit the form, a "Query Error" popup appears and data is not being saved in the database. API router.post("/add_customer", (req, res) => { const sql = `INSERT INTO customer (name, mobile, email, address, state, city, policytype, insu ...

Puppeteer exhibiting unexpected behavior compared to the Developer Console

My goal is to extract the title of the page using Puppeteer from the following URL: Here's the code snippet I am working with: (async () => { const browser = await puppet.launch({ headless: true }); const page = a ...

Guide on how to use Vue's watch feature to monitor a particular property within an array

I am interested in observing the "clientFilter" within an array TableProduit: [ { nr_commande: 0, date_creation: "", id_delegue: "1", clientFilter: "" } ], ...

Using a PHP WordPress Loop, eliminate the comma following the final object in the Schema array

My Google Schema Markup for a "Product" includes a loop that displays "Reviews". Below is an excerpt of the code: "review": [ <?php $args = array( 'post_type' => 'my_reviews', & ...

Box containing text going in both directions

I am trying to recreate a div structure that features a circle emoji at the top and two text elements at the bottom. However, my attempt is not producing the desired result. Here is my current code: .container { width: 70px; height: 400px; backgroun ...

Utilizing Skeleton to create a cropped text button on an iPhone

I am currently using Skeleton for my simple CSS needs. While it works fine on desktop, I have noticed that on an iPhone, the text in my button gets cropped as shown in the picture. https://i.stack.imgur.com/EYo2P.png Below is the HTML code I'm using ...

Is there a way to automatically update the button text based on the route name without requiring user interaction?

I need to dynamically change the text on a button in my header based on the current route. When on the login page, the button should say "Signup" and when on the signup page, it should say "Login". I want this text change to happen without having to click ...

Methods that are static and defined within the Promise constructor

While examining the static methods of the Promise constructor, I noticed that there are two methods called resolve and reject: console.log(Object.getOwnPropertyNames(Promise)) // Array(7) [ "all", "race", "reject", "resolve", "prototype", "length", "name" ...

When encountering error code EINTEGRITY during npm installation, a warning about a potentially corrupted tarball may be displayed

I have been facing an issue for the last three days with my react+vite project on Windows 10. Whenever I attempt to install dependencies using npm install, I encounter the following error: npm WARN tarball tarball data for fast-levenshtein@https://registry ...

Which is more recommended to use in AJAX (XMLHttpRequest) - eventListener or readyStateChange method?

As I revisited a video from WWDC12 discussing advanced effects with HTML5, I couldn't help but notice that for the demo they utilized req.addEventListener("load",callback,true) instead of the usual onreadystatechange. This made me wonder: what differ ...

Observing changes in the dimensions of flex children using MutationObserver

Considering the following structure of the Document Object Model... <div id="outer-container"> <div class="side-panel"><div width="200px"/></div> <div id="content"><!-- some content --></div> <div class=" ...

Navigating with AngularJS through link redirection using anchor tags

How can I achieve smooth scrolling to a specific section using angularJS when clicking on a link? When clicking on a link like this: The page instantly redirects to the specified footer section. I want to implement an angular controller to handle this fun ...

Unable to load the CSS file

Having trouble with the folder structure in my content directory: -Content --jquery-ui-1.10.4.custom --------------------------css --------------------------smoothness ------------------------------------jquery-ui-1.10.4.custom.css ----------------------- ...