fokz8 fokz8 - 1 year ago 104
Javascript Question

Hide and show form (panel) onclick

I have a webform in c#, which includes adding some data to database. User has option to "add another product" or "checkout".

If user clicks "add another product", current form should hide and open a new one, which should offer him to add another product. If he clicks checkout, it should redirect him to checkout. Well the last step is no problem.

If possible, i would like to hide form in a type of accordion, and display new one like that. If not, just a normal hide and show. Also the page shouldn't reload and loose data.

So far what i've tried:

rotected void btnAddNewProduct_Click(object sender, EventArgs e)
form1.Visible = false;

Second option:

$(document).ready(function () {
function HideElement()
document.getElementById("form1").style.display = "none";

<asp:Button ID="btnAddNewProduct" runat="server" class="form-control" Text="Add procut" OnClientClick="btnAddNewProduct_Click"/><br />

Also tried inputing:

<div class="accordion">
<form id="form1" runat="server">

<link rel="stylesheet" href="// /base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src=""></script>
<script src=""></script>
$( function() {
$( "#accordion" ).accordion();
} );

But it doesn't seem to work.

Any help? I would be really happy if i could do it using accordion


Answer Source

If it's a client side operation forget the ASP controls and use normal web controls with the JQuery:

<button id="btnAddNewProduct">Add new</button>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download