i have added modalPopupExtender in my Page and inside that i am calling another page in Iframe. And on button Click i am doing some processing, i just want to know how can i close the modalPopUpExtender on submit click of that button.
My code is -
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DynamicServicePath="" Enabled="True" PopupControlID="PP"
TargetControlID="btnCounceller" BackgroundCssClass="modalBackground"
CancelControlID="btnclose">
</cc1:ModalPopupExtender>
<asp:Panel ID="PP" runat="server" BackColor="white" Height="200px" Width="350px">
<table class="style1">
<tr>
<td> </td>
<td>
<iframe ID="ff" runat="server" frameborder="0" src="Order.aspx" style="width:350px; height:200px;"></iframe>
</td>
<td>
<asp:Button ID="btnclose" runat="server" Text="X" />
</td>
</tr>
</table>
</asp:Panel>
and My Order.aspx Contains
<table>
<tr>
<td>First Name :</td>
<td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Mobile:</td>
<td><asp:TextBox ID="txtMobile" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label ID="lblMessage" runat="server" Visible="false"></asp:Label></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnSubmit" runat="server" Text="Submit"
onclick="btnSubmit_Click" /></td>
</tr>
</table>
Now i just want to close my modalPopUp on click of Submit Button from IFrame
<asp:Panel ID="PP" runat="server" BackColor="white" Height="200px" Width="350px">
<table class="style1">
<tr>
<td> </td>
<td>
<asp:Button ID="btnclose" runat="server" Text="X" OnClick="btnclose_Click" />
</td>
<td>
<iframe ID="ff" runat="server" frameborder="0" src="Order.aspx" style="width:350px; height:200px;"></iframe>
</td>
</tr>
</table>
</asp:Panel>
Protected void btnclose_Click(Object sender, EventArgs e)
{
response.redirect("yourpage.aspx");
}
You can use jQuery as below
$("#btnSubmit").click(function() {
$("#<%= btnclose.ClientID %>").click();
});
This will fire click event of your cancel control btnclose for the modal popup extender on clicking btnSubmit from your iframe. You need to find and replace the actual ID for your iframe button btnSubmit.
Related
I am trying to hide and show text boxes by radio button using jquery. I can show and hide text boxes but the error is I have a drop-down list. When I select drop-down value the page getting refreshed. After page refresh I am unable to do hiding and showing of text boxes. I have update panel for ajax. Why I am unable to hide and show text boxes after page refresh? Here is my source code. Please help me.
<%# Page Title="" Language="C#" MasterPageFile="~/Home.Master" AutoEventWireup="true" CodeBehind="ExperienceADD.aspx.cs" Inherits="Manjilas.WebForm31"%>
<%# Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<head>
<script src="Scripts2/jquery-1.7-vsdoc.js"></script>
<script src="Scripts2/jquery-1.7.js"></script>
<script src="Scripts2/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function () {
$('input[name="type"]').on('click', function () {
if ($(this).val() == 'Experienced') {
$('#txtcomp').Show();
$('#txtfrom').Show();
$('#txtto').Show();
} else {
$('#txtcomp').hide();
$('#txtcomp').hide();
$('#txtfrom').hide();
$('#txtto').hide();
}
});
});
</script>
</head>
<div class="container-fluid">
<div class="row-fluid">
<div class="well span5 center login-box">
<div class="alert alert-info">
<b><font size="4">ADD EXPERIENCE DETAILS</font></b>
</div>
<form id="form1" runat="server">
<asp:UpdatePanel ID="updatepanel1" runat="server"><ContentTemplate>
<div>
<ajaxToolkit:ToolkitScriptManager runat="server">
</ajaxToolkit:ToolkitScriptManager>
<asp:UpdatePanel ID="updatepanel2" runat="server"></asp:UpdatePanel>
<fieldset>
<table class="ui-accordion">
<tr>
<td align="left" class="style2">
MachID</td>
<td align="left">
<%-- <div class="input-prepend" title="Select Country Name">--%>
<asp:DropDownList ID="ddid" runat="server" AutoPostBack="True"
onselectedindexchanged="ddid_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:Label ID="Empcode" runat="server" Text="EmpCode"></asp:Label>
<td align="left">
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left" class="style2">
</td>
<td align="left">
<input type="radio" name="type" value="Fresher" />Fresher
<input type="radio" name="type" value="Experienced" />Experienced
</td>
</tr>
<tr>
<td align="left" class="style2">
Company</td>
<td align="left">
<div class="input-prepend" title="Autogenerated District ID" data-rel="tooltip">
<asp:TextBox ID="txtcomp" runat="server" TextMode="SingleLine"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left" class="style2">
From Date</td>
<td align="left">
<div class="input-prepend" title="Enter District Name" data-rel="tooltip">
<asp:TextBox ID="txtfrom" runat="server" TextMode="SingleLine"></asp:TextBox>
<ajax:CalendarExtender ID="Calendarextender1" TargetControlID ="txtfrom" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender>
</td>
</tr>
<tr>
<td align="left" class="style2">
To Date</td>
<td align="left">
<div class="input-prepend" title="Enter District Name" data-rel="tooltip">
<asp:TextBox ID="txtto" runat="server" TextMode="SingleLine"></asp:TextBox>
<ajax:CalendarExtender ID="Calendarextender2" TargetControlID ="txtto" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td align="left">
<asp:Button ID="Button1" class="btn-primary" runat="server" Text="Add"
Height="36px" Width="74px" onclick="Button1_Click" />
<asp:Button ID="Button2" class="btn-primary" runat="server" Text="Cancel"
Height="36px" Width="74px" PostBackUrl="~/districtDetails.aspx" />
</td>
</tr>
<tr>
<td class="style2">
</td>
<td align="left">
<asp:Label ID="Label2" runat="server" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</form>
</div><!--/span-->
</div><!--/row-->
</div>
</div>
</asp:Content>
It's because you're using an UpdatePanel, it will refresh everything inside it's <ContentTemplate>, which in your case has input[name="type"] inside it.
Because it's refreshed, the on('click', function() { isn't binding the current radiobutton with the name="type" anymore, thus make the click never triggered after you select one item inside the dropdown, what you need is to wrap the UpdatePanel only for things that you want to be refreshed or changed only, like this for your case:
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<tr>
<td align="left" class="style2">
MachID
</td>
<td align="left">
<asp:DropDownList ID="ddid" runat="server" AutoPostBack="True"
onselectedindexchanged="ddid_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:Label ID="Empcode" runat="server" Text="EmpCode"></asp:Label>
</td>
<td align="left">
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
Other Way
Use the jQuery on click selector, you just need to change
$('input[name="type"]').on('click', function () {
if ($(this).val() == 'Experienced') {
$('#txtcomp').show();
$('#txtfrom').show();
$('#txtto').show();
}
too
$('.ui-accordion').on('click', 'input[name="type"]', function () {
if ($(this).val() == 'Experienced') {
$('#txtcomp').show();
$('#txtfrom').show();
$('#txtto').show();
}
The show function is k senstive. Try this:
$('#txtcomp,#txtfrom,#txtto').show();
I need to use a modal popup extender object to allow a user to download a file from the server. The user clicks a button to show the popup, gives some input and presses a submit button on the panel embedded in the extender. The file is then generated and downloaded. All of that works perfectly now. The only problem I am having is getting the popup to hide again after the user clicks submit. I have a clear event set up that the code walks through, and if I comment out the download code it hides correctly. Here is my code:
ASP page:
<act:ModalPopupExtender ID="mpeMailMerge" runat="server" PopupControlID="pnlMailMerge" TargetControlID="btnGenerateMailMerge" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlMailMerge" CssClass="modalPopup" style="width:300px" runat="server">
<asp:UpdatePanel ID="upMailMerge" runat="server">
<ContentTemplate>
<asp:HiddenField ID="hfIsSubmitted" Value="" runat="server" />
<table>
<tr>
<td>
<h3>What woud you like to do?</h3>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<dnr:CheckBox ID="chkFirstMailMergeGeneration" Field="" Name="First Mail Merge Generation" runat="server" OnCheckedChanged="MailMergeCheckBoxChange" AutoPostback="true"/>
</td>
<td>
First Mail Merge Generation
</td>
</tr>
<tr>
<td>
<dnr:CheckBox ID="chkSubsequentGenerations" Field="" Name="Subsequent Generations" runat="server" OnCheckedChanged="MailMergeCheckBoxChange" AutoPostback="true" />
</td>
<td>
Subsequent Generations
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<dnr:Label ID="lblSubsequentMailMergeCount" For="txtSubsequentMailMergeCount" runat="server" />
</td>
<td>
 
</td>
<td>
<dnr:Number ID="txtSubsequentMailMergeCount" DecimalDigits="0" Field="" Name="Generation Number " runat="server" Enabled="false" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
 
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnCountOfRowsToBeGenerated" Text="Generate Row Count" Name="Count of Rows to be generated" runat="server" Enabled="false" OnClick="BtnCountOfRowsToBeGenerated_Click" AutoPostback="true"/>
</td>
<td>
 
</td>
<td>
<dnr:Number ID="txtMailMergeRowCount" Field="" Name="Mail Merge Row Count" runat="server" ReadOnly="true" />
</td>
</tr>
<tr>
<td>
 
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmitMailMerge" OnClick="BtnSubmitMailMerge_Click" Enabled="false" Text="Submit" runat="server" />
</td>
<td>
 
</td>
<td>
<asp:Button ID="btnCancelMailMerge" OnClick="BtnCancelMailMerge_Click" Text="Cancel" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnCountOfRowsToBeGenerated" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="chkFirstMailMergeGeneration" EventName="CheckedChanged" />
<asp:AsyncPostBackTrigger ControlID="chkSubsequentGenerations" EventName="CheckedChanged" />
<asp:PostBackTrigger ControlID="btnSubmitMailMerge" />
<asp:PostBackTrigger ControlID="btnCancelMailMerge" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
C# behind:
protected void BtnSubmitMailMerge_Click(object sender, EventArgs e)
{
if (this.chkFirstMailMergeGeneration.Checked || this.chkSubsequentGenerations.Checked)
{
MailMergeGenerator gen = new MailMergeGenerator();
if (this.chkFirstMailMergeGeneration.Checked)
{
// File download method
gen.DownloadMailMerge(0, this.Context);
}
else if (this.chkSubsequentGenerations.Checked)
{
// File download method
gen.DownloadMailMerge((int)this.txtSubsequentMailMergeCount.Value, this.Context);
}
this.BtnCancelMailMerge_Click(null, null);
}
}
public void DownloadMailMerge(int timesGenerated, HttpContext context)
{
System.Linq.IQueryable<MailMergeReport> report = this.GetMailMergeReport(timesGenerated);
// export report
FileInfo file = new FileInfo("/MailMerge.xlsx");
ExcelPackage excelPackage = new ExcelPackage(file);
context.Response.AddHeader("Content-Disposition", "attachment;filename=\"MailMerge.xlsx\"");//cause Save As prompt
context.Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";//set the document MIME type
context.Response.Expires = -1;
context.Response.BinaryWrite(excelPackage.GetAsByteArray());
context.Response.Flush();
context.Response.Close();
}
Any help anyone could give me on this would be really appreciated.
It can be done in three steps:
Download and reference jquery.cookie.js to your porject.
Create cookie response to tell Javascript that the creation of file is done.
Create Javascript that can notify the cookie.
In your case, you can do like these:
Make your "btnSubmitMailMerge" button "ClientIDMode" to be "static" (need to trigger click event by javascript)
Add:
context.Response.AppendCookie(new HttpCookie("download_flag", "trans_success"));
Within Javascript:
$(document).ready(function () {
$('#btnSubmitMailMerge').on('click', function () {
var fileDownloadCheckTimer;
ModalShow();//show your modal here
fileDownloadCheckTimer = window.setInterval(function () {
var cookieValue = $.cookie('download_flag');
console.log(cookieValue + "---> Cookie Value;");
if (cookieValue == "trans_success")
finishDownload();
}, 1000);//Check if receive cookie from server by second
function finishDownload() {
ModalHide();//hide your modal.
console.log("finish");
$.cookie("download_flag", null, { path: '/' });//clear cookie
window.clearInterval(fileDownloadCheckTimer); //clear timer
}
});
});
Hi I have two usercontrols.
The first user control has a button and the second user control has a popup control.
I registered the second user control in the first user control with id=ctlPopUp
Onclick event of button I have to display the popup control.
I tried with
protected void btnUser_Click(object sender, EventArgs e)
{
var userCtlPopup = ctlPopUp.FindControl("pcDownload");
userCtlPopup.Visible = true;
}
It doesn't work. Can you please suggest?
Hi here is the user control markups:
POpupUsercontrol:
<div id="divDownload" runat="server" visible="true">
<dx:aspxpopupcontrol id="pcDownload" runat="server" showpagescrollbarwhenmodal="true"
clientinstancename="pcDownload" enableclientsideapi="true" modal="True" popuphorizontalalign="WindowCenter"
popupverticalalign="WindowCenter" showheader="false" allowdragging="True" enableanimation="False"
enableviewstate="False" width="600px" autoupdateposition="true" closeaction="CloseButton">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl4" runat="server"
Width="100%">
<dx:ASPxPanel ID="ASPxPanel3" runat="server">
<PanelCollection>
<dx:PanelContent ID="PanelContent4" runat="server">
<div>
<table class="cChildTable">
<tr>
<td>
<h3>Download</h3>
</td>
</tr>
<tr>
<td class="auto-style1">
<div class="hr">
</div>
<asp:Label ID="lblDownLoadMessages" runat="server" CssClass="cMessageArea"></asp:Label>
</td>
</tr>
</table>
<table class="cChildTable" border="0">
<tr><td style="font:bold" colspan="2"><asp:Label ID="Title" runat="server" Text="Content Link Title"></asp:Label></td></tr>
<tr>
<td style="vertical-align: top; width: 30px; padding: 2px" rowspan="8">
<asp:CheckBox ID="chkImg" runat="server" AutoPostBack="True" Checked="true" />
</td>
<td style="vertical-align: top" rowspan="3">
<asp:Image runat="server" ID="imgUpload" Width="100px" Height="100px" Style="top: 0px;" AlternateText="No Image" />
</td>
<td>
<asp:CheckBox ID="chkName" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblName" runat="server" Text="Name:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtName" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkCompany" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblCompany" runat="server" Text="Company:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCompany" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkAddress" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblAddress" runat="server" Text="Address:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtAddress" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td rowspan="5" style="vertical-align:top"><asp:LinkButton ID="lnkAddImg" runat="server"> </asp:LinkButton></td>
<td>
<asp:CheckBox ID="chkCtyStateZip" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblCtyStateZip" runat="server" Text="City, State Zip:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCtyStateZip" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkPhone" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblPhone" runat="server" Text="Phone:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtPhone" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkFax" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblFax" runat="server" Text="Fax:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtFax" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkEmail" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblEmail" runat="server" Text="Email:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkOther" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblOther" runat="server" Text="Other:" Width="90px "></asp:Label>
</td>
<td>
<asp:TextBox ID="txtOther" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="4">
<div class="buttons">
<span id="span2" class="cBtnLeft"><span class="cBtnMid"><span class="cBtnRight">
<asp:Button ID="btnDownLoad" runat="server" Width="65px" CssClass="cBtnRight" Text="Download"
OnClick="btnDownLoad_Click"/>
</span></span></span><span id="span1" class="cBtnLeft"><span class="cBtnMid"><span
class="cBtnRight">
<asp:Button ID="btnCancel" runat="server" Width="65px" CssClass="cBtnRight" Text="Cancel"
Visible="true" OnClick="btnCancel_Click" />
</span></span></span>
</div>
</td>
</tr>
</table>
</div>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxPanel>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:aspxpopupcontrol>
</div>
Usercontrol where the popup user control is called
<asp:Panel runat="server" ID="pnlCategoryDetail" Width="100%">
<dx:ASPxDataView ID="dvMARCCategoryDetail" runat="server" Width="100%"
ClientInstanceName="dvMARCCategoryDetail" style="clear: both" ColumnCount="2" RowsPerPage="2" OnPageIndexChanged="dvMARCCategoryDetail_PageIndexChanged">
<itemtemplate>
<table>
<tbody>
<tr>
<td>
<table>
<tr>
<td>
<asp:Image ID="ModelImage" runat="server" ImageUrl='<%#Eval("ImageUrl") %>'>
</asp:Image>
</td>
<td>
<div style="width: 5px" class="Spacer">
</div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<asp:Label ID="ModelLabel" runat="server" Text='<%# Eval("DocumentName") %>' Font-Bold="True"
>
</asp:Label></td>
</tr>
<tr>
<td style="text-align:left;padding-bottom:1em;">
<asp:Label ID ="txtText1" runat="server" Text="The May edition of News Brief contains seven newsworthy articles"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID ="txtText2" runat="server" Text="Suggested Subject Line: The May 2014 News Brief has arrived!"></asp:Label>
</td>
</tr>
<tr>
<td style="white-space:nowrap;">
<a id="clink2" style="width:60px">Content Link 1</a>
<asp:ImageButton ID="ImageButton2" runat="server" OnClick="btnArrow_Click" ImageUrl="~/Images/DownloadArrow.png" ToolTip="Download Item" style="padding-top:8px"/>
<asp:ImageButton ID="ImageButton1" runat="server" OnClick="btnAdd_Click" ImageUrl="~/Images/Add.png" ToolTip="Add Item" style="padding-top:8px"/>
</td>
<td> </td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</itemtemplate>
<paddings padding="0px" />
<itemstyle height="50px">
</itemstyle>
</dx:ASPxDataView>
</asp:Panel>
<div id="divCategoryPopup" runat="server">
<downloadPopUp:categoryPopup id="ctlPopUp" runat="server"></downloadPopUp:categoryPopup>
</div>
On click of btnArrow_Click the popup user control should be displayed
I have a two-step form that I set up with validation on the fields.
The validation for the first two fields (first name / last name) works as desired.
However the last two fields (user/password) get validated two soon.
I would like the user / password fields to get validate only on "submit button" click...
Here's a working example and my code.
www.smithy.somee.com
<script language="javascript" type="text/javascript">
$(document).ready(function () {
if (Page_ClientValidate("personalGroup")) {
$('#form-part-1').hide();
$('#form-part-2').fadeIn();
}
if (Page_ClientValidate("accountGroup")) {
$('#form-part-2').hide();
}
});
</script>
<form id="signup" runat="server">
<div>
<table id="validators">
<tr>
<td>
<asp:ValidationSummary ID="personalGroupSummary" runat="server" ValidationGroup="personalGroup" />
<asp:ValidationSummary ID="accountGroupSummary" runat="server" ValidationGroup="accountGroup" />
</td>
</tr>
</table>
<table id="form-part-1">
<tr>
<td>First Name:</td>
<td><asp:TextBox ID="txtFname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Last Name:</td>
<td><asp:TextBox ID="txtLname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="continue" runat="server" causesvalidation="true" validationgroup="personalGroup" Text="Continue" />
</td>
</tr>
</table>
<table id="form-part-2">
<tr>
<td>Username:</td>
<td><asp:TextBox ID="txtUser" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password:</td>
<td><asp:TextBox ID="txtPass" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSubmit" runat="server" validationgroup="accountGroup" Text="Submit" OnClick="btnSubmit_Click" />
</td>
</tr>
</table>
<!-- output -->
<table>
<tr>
<td>First: </td>
<td><asp:Label ID="lblFname" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>Last:</td>
<td><asp:Label ID="lblLname" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>User:</td>
<td><asp:Label ID="lblUser" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>Pass:</td>
<td><asp:Label ID="lblPass" runat="server" Text=""></asp:Label></td>
</tr>
</table>
</div>
<!-- validators -->
<asp:requiredfieldvalidator id="fvFname" runat="server" validationgroup="personalGroup" Display="None" ControlToValidate="txtFname" ErrorMessage='"First Name" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="fvLname" runat="server" validationgroup="personalGroup" Display="None" ControlToValidate="txtLname" ErrorMessage='"Last Name" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="fvUser" runat="server" validationgroup="accountGroup" Display="None" ControlToValidate="txtUser" ErrorMessage='"Username" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="fvPass" runat="server" validationgroup="accountGroup" Display="None" ControlToValidate="txtPass" ErrorMessage='"Password" is required'></asp:requiredfieldvalidator>
<!-- validators -->
</form>
try adding EnableClientScript="False" to your validators
<asp:requiredfieldvalidator id="fvFname" runat="server"
EnableClientScript="False"
validationgroup="personalGroup" Display="None"
ControlToValidate="txtFname"
ErrorMessage='"First Name" is required'>
</asp:requiredfieldvalidator>
It turns out that Panel controls is the answer to my issue. I found a solution on this website. (compliments of Doug Seven). Built it and tested and works like a charm.
http://devproconnections.com/database-development/create-multistep-forms
I am completely new to C# and I am trying to figure out form validation.
More specifically, I have a webform (C#) that I've split into to parts "form-part-1" and "form-part-2".
By default "form-part-2" is hidden. Once all fields in "form-part-1" are completed, you should be able to proceed to "form-part-2" by clicking on the "Continue" linkButton.
The jQuery part works well, showing and hiding form sections as desired.
But the validation is not enforced anymore.
I have validators in place but at this point I can proceed to "form-part-2" without filling out the "form-part-1" fields.
I would like the validation to be enforced before proceeding to "form-part-2".
Any tips and suggestions how to do it would be greatly appreciated.
Thanks in advance.
Here's my code:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#continue").click(function (event) {
$('#form-part-1').hide();
$('#form-part-2').fadeIn();
});
});
</script>
<form id="SignUp" method="post" runat="server">
<table id="validation">
<tr>
<td colspan="2" vAlign="top">
<asp:ValidationSummary ID="vsSignupValidation" runat="server"></asp:ValidationSummary></td>
</tr>
</table>
<table id="form-part-2">
<tr>
<td width="150">
<label class="">
<asp:label id="lblSignupFirstName" Runat="server">First Name:</asp:label>
<span style="color:red">*</span>
</label>
</td>
<td>
<asp:TextBox size="30" CssClass="input" ID="txtSignupFirstName" TabIndex="1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="150">
<label class="">
<asp:label id="lblSignupLastName" Runat="server">Last Name:</asp:label>
<span style="color:red">*</span>
</label>
</td>
<td>
<asp:TextBox size="30" CssClass="input" ID="txtSignupLastName" TabIndex="1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<!-- validate and continue -->
<asp:LinkButton ID="continue" runat="server" onclientclick="return false;">Continue</asp:LinkButton>
<!-- validate and continue -->
<table id="form-part-1">
<tr>
<td width="150">
<label class="">
<asp:label id="lblSignupUserID" Runat="server">UserID:</asp:label>
<span style="color:red">*</span>
</label>
</td>
<td>
<asp:TextBox size="30" CssClass="input" ID="txtSignupUserID" TabIndex="1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="150">
<label class="">
<asp:label id="lblSignupPassword" Runat="server">Last Name:</asp:label>
<span style="color:red">*</span>
</label>
</td>
<td>
<asp:TextBox size="30" CssClass="input" ID="txtSignupPassword" TabIndex="1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="150">
<label class="">
<asp:Label class="formtxtsm" ID="lblSignupConfirmPassword" runat="server">Confirm password</asp:Label>
<span style="color:red">*</span>
</label></td>
<td>
<asp:TextBox size="30" ID="txtSignupConfirmPassword" TabIndex="10" runat="server" TextMode="Password" CssClass="input"></asp:TextBox>
</td>
</tr>
</table>
<!-- validators -->
<asp:requiredfieldvalidator id="rfvSignupFirstName" runat="server" Display="None" ControlToValidate="txtSignupFirstName" class="formerrortxt" ErrorMessage='"First Name" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="rfvSignupLastName" runat="server" Display="None" ControlToValidate="txtSignupLastName" class="formerrortxt" ErrorMessage='"Last Name" is required'></asp:requiredfieldvalidator>
<asp:RequiredFieldValidator ID="rfvSignupUserID" runat="server" Display="None" ControlToValidate="txtSignupUserID" ErrorMessage='"Username" is required.'></asp:RequiredFieldValidator>
<asp:requiredfieldvalidator id="rfvSignupPassword" runat="server" Display="None" ControlToValidate="txtSignupPassword" ErrorMessage='"Password" is required.'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="rfvSignupConfirmPassword" runat="server" Display="None" ControlToValidate="txtSignupConfirmPassword" ErrorMessage='"Confirm password" is required.'></asp:requiredfieldvalidator>
<asp:customvalidator id="cvSignupPasswordMatch" runat="server" Display="None" ErrorMessage='"Password" and "Confirm password" must match exactly.'></asp:customvalidator>
</form>
**** EDIT:
Thanks Phx & Daniel for your feedback. Very helpful!
I got things working with one exception. The "form-part-2" fields get validated before I even get to the step 2. Any tips how to validate the username / password fields only after I get to the "form-part-2"? Thanks in advance!
here's my most recent version:
www.smithy.somee.com
and the code:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
if (Page_ClientValidate("personalGroup")) {
$('#form-part-1').hide();
$('#form-part-2').fadeIn();
}
if (Page_ClientValidate("accountGroup")) {
$('#form-part-2').hide();
}
});
</script>
<form id="signup" runat="server">
<div>
<table id="validators">
<tr>
<td>
<asp:ValidationSummary ID="personalGroupSummary" runat="server" ValidationGroup="personalGroup" />
<asp:ValidationSummary ID="accountGroupSummary" runat="server" ValidationGroup="accountGroup" />
</td>
</tr>
</table>
<table id="form-part-1">
<tr>
<td>First Name:</td>
<td><asp:TextBox ID="txtFname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Last Name:</td>
<td><asp:TextBox ID="txtLname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="continue" runat="server" causesvalidation="true" validationgroup="personalGroup" Text="Continue" />
</td>
</tr>
</table>
<table id="form-part-2">
<tr>
<td>Username:</td>
<td><asp:TextBox ID="txtUser" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password:</td>
<td><asp:TextBox ID="txtPass" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSubmit" runat="server" validationgroup="accountGroup" Text="Submit" OnClick="btnSubmit_Click" />
</td>
</tr>
</table>
<!-- output -->
<table>
<tr>
<td>First: </td>
<td><asp:Label ID="lblFname" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>Last:</td>
<td><asp:Label ID="lblLname" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>User:</td>
<td><asp:Label ID="lblUser" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>Pass:</td>
<td><asp:Label ID="lblPass" runat="server" Text=""></asp:Label></td>
</tr>
</table>
</div>
<!-- validators -->
<asp:requiredfieldvalidator id="fvFname" runat="server" validationgroup="personalGroup" Display="None" ControlToValidate="txtFname" ErrorMessage='"First Name" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="fvLname" runat="server" validationgroup="personalGroup" Display="None" ControlToValidate="txtLname" ErrorMessage='"Last Name" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="fvUser" runat="server" validationgroup="accountGroup" Display="None" ControlToValidate="txtUser" ErrorMessage='"Username" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="fvPass" runat="server" validationgroup="accountGroup" Display="None" ControlToValidate="txtPass" ErrorMessage='"Password" is required'></asp:requiredfieldvalidator>
<!-- validators -->
</form>
As you wrote: I would like the validation to be enforced before proceeding to "form-part-2".
You need to create validations groups in order to validate first N fields and the another N Fields.
So create Validation groups for your controls:
http://msdn.microsoft.com/en-us/library/vstudio/ms227424(v=vs.100).aspx
<asp:textbox id="AgeTextBox"
runat="Server">
</asp:textbox>
<asp:requiredfieldvalidator id="RequiredFieldValidator2"
controltovalidate="AgeTextBox"
validationgroup="PersonalInfoGroup"
errormessage="Enter your age."
runat="Server">
</asp:requiredfieldvalidator>
<!--When Button1 is clicked, only validation
controls that are a part of PersonalInfoGroup
are validated.-->
<asp:button id="Button1"
text="Validate"
causesvalidation="true"
validationgroup="PersonalInfoGroup"
runat="Server" />
<asp:textbox id="CityTextBox"
runat="Server">
</asp:textbox>
<asp:requiredfieldvalidator id="RequiredFieldValidator3"
controltovalidate="CityTextBox"
validationgroup="LocationInfoGroup"
errormessage="Enter a city name."
runat="Server">
</asp:requiredfieldvalidator>
<!--When Button2 is clicked, only validation
controls that are a part of LocationInfoGroup
are validated.-->
<asp:button id="Button2"
text="Validate"
causesvalidation="true"
validationgroup="LocationInfoGroup"
runat="Server" />
Then use a Diferent validation summary for each group.
Perhaps you need a button for each validation but you can do the trick and use the same button for multiple validation groups:
http://www.aspsnippets.com/Articles/Validate-Multiple-Validation-Groups-with-one-Button-in-ASPNet.aspx
Another example here
http://www.codeproject.com/Tips/401611/Validate-multiple-Validation-group-both-client-and
Phx gives a partial answer. Use his suggestion to create ValidationGroups. Put all your validators in part 1 and part 2 in separate groups.
JQuery does not automatically trigger validation.
You need to call the validation manually with your JavaScript. This can be done by calling Page_ClientValidate which will validate all validators for the passed ValidationGroup.
For example:
$("#continue").click(function (event) {
if (Page_ClientValidate("group1")) {
$('#form-part-1').hide();
$('#form-part-2').fadeIn();
}
});