I have two textboxes in my web application for login page, RegNo and Address. Now I want that if the page loads then cursor should be on RegNo textbox . After entering RegNo it must goes to Address after press Enter. How to do This?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body bgcolor="#CCCCCC" >
<form id="form1" runat="server">
<div>
<asp:TextBox ID="RegNo" runat="server" Text=""></asp:TextBox>
<asp:TextBox ID="Name" runat="server" Text=""></asp:TextBox>
<asp:TextBox ID="Address" runat="server" Text=""></asp:TextBox>
<asp:Button CssClass="sCancel" ID="btnCancel" runat="server" Text="Close" onclick="btnCancel_Click" Width="84px" />
<asp:Button CssClass="sUpdate" ID="btnUpdate" runat="server" Text="Update" onclick="btnUpdate_Click" Width="84px" style="margin-left: 0px"/>
<asp:Button CssClass="sAdd" ID="Add" runat="server" Text="Add" Width="84px" onclick="Add_Click" />
</div>
</form>
</body>
</html>
Well, I assume what you ask is how to change focus from userid to password and you don't need to move cursor itself.
Note that there is no need to do this in server side. You are able to simply do this in client side with JQuery. If you are not familiar with JQuery see here to understand how to add JQuery to your client side code.
Now I assume code in your client side is something like this:
Username: <asp:TextBox name="userid" id="userid" /><br>
Password: <asp:TextBox name="password" id="password" />
I will provide two examples with JQuery for this, in first example the focus will jump to password when user press Enter:
$('#userid').keydown(function (e) {
if (e.keyCode == 13) {
$("#password").focus();
return false;
}
});
In next example we change focus to password when userid reaches a specific lengths. for example 6:
$('#userid').keydown(function (e) {
if ($("#userid").val().length > 5) {
$("#password").focus();
}
});
UPDATE
It should work in your code:
<head runat="server">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#RegNo').keydown(function (e) {
if (e.keyCode == 13) {
$("#Name").focus();
return false;
}
});
});
</script>
</head>
<body bgcolor="#CCCCCC">
<form id="form1" runat="server">
<div>
<asp:TextBox ID="RegNo" runat="server" Text=""></asp:TextBox>
<asp:TextBox ID="Name" runat="server" Text=""></asp:TextBox>
</div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#RegNo').keydown(function (e) {
if (e.keyCode == 13) {
$("#Name").focus();
return false;
}
});
$('#Name').keydown(function (e) {
if (e.keyCode == 13) {
$("#Address").focus();
return false;
}
});
$('#Address').keydown(function (e) {
if (e.keyCode == 13) {
$("#Add").focus();
return false;
}
});
});
</script>
You can achieve this by the use of Tabindex Property of TaxtBox.
First, You set the Tabindex=1 to Textbox1
then,set the Tabindex =2 to TextBox2 and so on..
By this when your page is load then it look tabindex of control which is less it focus on that.
Thanks
Related
I have the following code to submit a form with a hidden value.
The problem is - I can't set the value of MyNewValue before the form is submitted to the remote address https://some-remote-site/Form.aspx.
Does anybody know how I can set the hidden value when the user clicks the button and then submit the form to the same address?
MyFile.aspx
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body style="height: 370px">
<form id="myForm" method="post" runat="server" action="https://some-remote-site/Form.aspx">
<fieldset>
<asp:HiddenField id="MyNewValue" Value="X" runat="server" />
<p>
<label for="Username">Username:</label>
<asp:TextBox id="Username" Text="Username" runat="server" />
</p>
<asp:Button ID="SubmitForm" runat="server" onclick="SubmitForm_Click" Text="Button" />
</fieldset>
</form>
</body>
MyFile.aspx.cs
// Not executed because action="https://some-remote-site/Form.aspx" is set
protected void SubmitForm_Click(object sender, EventArgs e)
{
MyNewValue.Value = DateTime.Now.ToString();
}
You can do it client-side using jQuery. So when the user clicks submit, and before submitting the form, you can update your hidden input and then return true to proceed the submission of your form.
This is it could be done:
$(document).ready(function(){
$('#myForm').on('submit', function(){
$('#MyNewValue').val('YOUR_VALUE');
return true;
})
});
I need to Stop Button1_Click fire after Jquery function return false..This is my Code ...
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript" src="http://code.jquery.com/Javascript/jquery-1.4.2.min.js"></script>
<script src="Scripts/a.js" type="text/javascript"></script>
<script runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return x();" OnClick="Button1_Click" />
OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
js File
function x() {
alert('');
return false;
}
this is my HTML generated File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<script type="text/javascript" src="http://code.jquery.com/Javascript/jquery-1.4.2.min.js"></script>
<script src="Scripts/a.js" type="text/javascript"></script>
<title>
</title></head>
<body>
<form method="post" action="Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExNTM0OTE4ODNkZI8CSkltDp/afauc6DGl2D8JvNnVI1ffgzykF0L2alVM" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAOSROoMi8eHXeBzZ77oKwMrESCFkFW/RuhzY1oLb/NUVM34O/GfAV4V4n0wgFZHr3eJjGQabRwzK4TIMzE2tX2gN9468Yg/u6i/oj/9EvNo1w==" />
</div>
<div>
<input name="TextBox1" type="text" id="TextBox1" />
<input type="submit" name="Button1" value="Button" onclick="return x();" id="Button1" />
</div>
</form>
</body>
</html>
I also tried Similar links :
Why doesn't returning false from OnClientClick cancel the postback
In this case a handler for the one more click event was registered via jquery ..I think it is not in my case
ASP.NET OnClientClick="return false;" doesn't work
there should not be a click event handler (registered via jquery) which returns true .whats mean by that ?Does it mean that i need to remove onClick function ... i dont wanna do it
I also tried other suggested Code :
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="if (!x()) return
false;" OnClick="Button1_Click" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="javascript:return
x();"OnClick="Button1_Click" />
they are also not working
Plese suggest
This worked for me...
.aspx page
<asp:Button id="btn" runat="server" Text="Button" onclientclick="if (!x()) { return false; }" onclick="btn_Click" />
<script type="text/javascript">
function x() {
return false;
}
</script>
Reference Help
Update from an external javascript file working code
external.js
function x() {
var result = confirm("Sure");
if (result)
return true;
else
return false;
}
.aspx page
<form id="form1" runat="server">
<asp:Button id="btn" runat="server" Text="Button" onclientclick="if (!x()) { return false; }" onclick="btn_Click" />
</form>
<script src="external.js" type="text/javascript"></script>
Hope it helps..!!
You can also put all the code in single file. Attaching handler directly from jQuery
jQuery(document).ready(function () {
AttachDeleteButtonHandler();
});
function AttachDeleteButtonHandler() {
var btnDelete = $("div[class='page']").find("table[id$='tblButtons']").find("input[id$='btnDelete']");
btnDelete.click(
function () {
return ConfirmDelete();
}
);
}
function ConfirmDelete() {
var msg = $('div[id="hdnElements"]').find('span[onclick*="translatedMsgText"]').text();
if (confirm(msg)) {
return true;
}
else {
return false;
}
}
I got stuck in JavaScript validation in product adding form.
In that page I have file upload control to upload product image. I am not getting how to validate that using JavaScript.
If image is not uploaded to that control I want to display Upload Image message in Label.
How to accomplish this? Please help me.
The script I have written is:
var fileup = document.getElementById('<%=FileUploadImg.ClientID %>').value;
if (fileup == "")
{
document.getElementById("lblFileUploadImg").innerHTML = "<font color='red'>
Upload Image File</font>";
document.getElementById('<%=FileUploadImg.ClientID %>').focus();
return false;
}
else
{
document.getElementById("lblFileUploadImg").innerHTML = "";
}
The control I have used is:
<asp:FileUpload ID="FileUploadImg" runat="server" Width="217px" Height="20px" />
<asp:Label ID="lblFileUploadImg" runat="server" >
With jQuery you could simply do this:
$('#myFile').bind('change', function() {
if(this.files[0].size>...){
alert('File is too big');
};
});
maybe this is what you are looking for:
$("input:file").change(function () {
if ($(this).val() !== "") {
var ul_file = $(this).val();
var extension = ul_file.substr((ul_file.lastIndexOf('.') + 1));
var accepted_file_endings = ["jpg", "jpeg", "bmp", "gif", "tif", "png"];
extension = extension.toLowerCase()
if ($.inArray(extension, accepted_file_endings) !== -1) {
...
You can get validate file uploading using JavaScript like this.
<script type="text/javascript">
function validate() {
var uploadcontrol = document.getElementById('<%=FileUploadImg.ClientID%>').value;
//Regular Expression for fileupload control.
var reg = /(.doc|.docx|.pdf)$/i;
if (uploadcontrol.length > 0)
{
//Checks with the control value.
if (reg.test(uploadcontrol))
{
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "<font color='green'>Upload Image File</font>";
return true;
}
else
{
//If the condition not satisfied shows error message.
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "Error while upload image";
return false;
}
}
} //End of function validate.
</script>
<asp:FileUpload ID="FileUploadImg" runat="server" Width="217px" Height="20px" />
<asp:Label ID="lblFileUploadImg" runat="server" />
<asp:Button runat="server" Text="Upload" ID="btnupload" onclientclick="return validate();" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function Validate() {
var fileup = document.getElementById('<%=FileUploadImg.ClientID %>').value;
if (fileup == "") {
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "<font color='red'>Upload Image File</font>";
document.getElementById('<%=FileUploadImg.ClientID %>').focus();
return false;
}
else {
document.getElementById('<%=lblFileUploadImg.ClientID%>').innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUploadImg" runat="server" />
<asp:Label ID="lblFileUploadImg" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return Validate();" />
</div>
</form>
</body>
</html>
I have a main page which has some pagemethod called to perform some activities. A popuppanel(popuppanel content page also have pagemethods) is used within this main page to show some details. If the same is executed multiple times (i.e., opening the popup panel many times), it is working in all other browsers other than IE9 (working even in IE8). However, first time execution is successful. The code that is being used is provided below.
Scriptmanager used as follow:
<ajaxToolkit:ToolkitScriptManager runat="server" ID="TSCM1" EnablePageMethods="true" />
Script In Main Page:
function Clkd(){
var ppnl=document.getElementById("if1");
ppnl.src="Test1.aspx";
$find('<%= MPE.ClientID %>').show();
}
function Clkd2(){
var ppnl=document.getElementById("if1");
ppnl.src="";
$find('<%= MPE.ClientID %>').hide();
}
$(document).ready(function(){
PageMethods.mainPageMethod("MainTest",cbackfn);
});
function cbackfn(str){
alert(str);
}
Page method:
[System.Web.Services.WebMethod(EnableSession = true)]
public static string mainPageMethod(String mainStr)
{
return mainStr + " Ok";
}
Test1.aspx page Details (this is the page loaded inside the popup panel):
Script code below :
$(document).ready(function(){
PageMethods.Testpm("Test",fnd);
});
function fnd(str){
alert(str);
}
Page method:
[System.Web.Services.WebMethod(EnableSession = true)]
public static string Testpm(String alrt)
{
return "Ok";
}
The following error is thrown if the same is executed the second time (in IE9 only)
SCRIPT5007: Unable to set value of the property '_UpdateProgress': object is null or undefined
ScriptResource.axd?........
SCRIPT5007: Unable to get value of the property 'WebServiceProxy': object is null or undefined
Test1.aspx, line 66 character 1
SCRIPT5007: Unable to get value of the property 'DomElement': object is null or undefined
ScriptResource.axd?......, line 2 character 18851
SCRIPT5007: Unable to get value of the property 'add_init': object is null or undefined
Test1.aspx, line 97 character 122
SCRIPT438: Object doesn't support property or method 'Testpm'
Test1.aspx, line 11 character 4
Important Note: if main page does not have any pagemethods then its working fine.
please help me out from this issue..
You should have added relevant HTML, that might have helped others to help you out.
Well I used your code and added missing code and when I runt it, it is working fine in all browsers including IE9.
Please find below code:
Main Page (Default.aspx):
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
function Clkd() {
var ppnl = document.getElementById("if1");
ppnl.src = "test.aspx";
$find('<%= MPE.ClientID %>').show();
}
function Clkd2() {
var ppnl = document.getElementById("if1");
ppnl.src = "";
$find('<%= MPE.ClientID %>').hide();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager runat="server" ID="scriptmanager1">
</cc1:ToolkitScriptManager>
<asp:Panel ID="pnl1" runat="server">
<iframe id="if1"></iframe>
<asp:Button ID="btnHidePopup" runat="server" Text="Hide" />
</asp:Panel>
<asp:Button ID="btnShowPopup" runat="server" Text="Show" OnClientClick="Clkd();" />
<cc1:ModalPopupExtender ID="MPE" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnl1"
DropShadow="true" OkControlID="btnHidePopup" OnOkScript="Clkd2()" CancelControlID="btnHidePopup">
</cc1:ModalPopupExtender>
</form>
</body>
Test.aspx:
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
PageMethods.Testpm("Test", fnd);
});
function fnd(str) {
alert(str);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:ToolkitScriptManager runat="server" ID="scriptmanageriframe" EnablePageMethods="true">
</cc1:ToolkitScriptManager>
Hello World this is game.
</div>
</form>
</body>
Test.aspx.ce (Webmethod):
[System.Web.Services.WebMethod(EnableSession = true)]
public static string Testpm(String alrt)
{
return "Ok";
}
I hope it helps!
U can try with different popUp
for Example:
asp:ModalPopupExtender also available in ajaxtoolkit
jquery dialog popup.
I will prefer you to go with jquery dialog popup instead of ajaxpopup panel using the same web method in c# and jquery code you have written.
Use ClientIdMode="Static" on the MPE and use MPE id directly in $find().
ASPX Code:
<asp:ModalPopupExtender ID="modalpopup" ClientIDMode="Static" runat="server" CancelControlID="btnCancel"
OkControlID="btnOkay" TargetControlID="Button1" PopupControlID="Panel1"
Drag="true" >
</asp:ModalPopupExtender>
Javscript code:
$find('modalpopup').show(); // to show popup
$find('modalpopup').hide(); // to hide popup
IE9 has problem with pagemethods while having pagemethods in bothpage (mainpage,popuppanelpage).
you can use pagemethods in webservice(.asmx) file
i tried like below:
defaultpage.aspx
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function fnd123(str){
alert(str);
}
function objFailed1(data) {
fnd123(data);
}
function objGot1(data) {
fnd123(data.d);
}
function Clkd(){
var ppnl=document.getElementById("if1");
$.ajax({
url: "Testser.asmx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:'{"FileName":"Data from default page"}',
type: 'POST',
success:objGot1,
error: objFailed1
});
ppnl.src="Test1.aspx";
$find('MPE').show();
}
function Clkd2(){
var ppnl=document.getElementById("if1");
ppnl.src="";
$find('MPE').hide();
//PageMethods.clearPageData("/Test1.aspx",fnd1);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" EnablePageMethods="true" EnablePartialRendering="false"/>
<div>
<input type="button" onclick="javascript:Clkd();return false;" value="Click" />
<div>
<asp:ModalPopupExtender ID="MPE" PopupControlID="popupPanel" PopupDragHandleControlID="popupPanel"
runat="server" Enabled="True" TargetControlID="btnOk" CancelControlID="BtnCancel"
BackgroundCssClass="PopupBackground" Drag="True" EnableViewState=true >
</asp:ModalPopupExtender>
<asp:Button Style="display: none" ID="BtnOk" runat="server"></asp:Button>
<asp:Button Style="display: none" ID="BtnCancel" runat="server"></asp:Button>
</div>
<div>
<asp:Panel ID="popupPanel" runat="server" Style="overflow: hidden; z-index: 100000;
display: none; background-color: White; filter: alpha(opacity=100); opacity: 1.0;
height: auto;">
<asp:Panel ID="pnlLoginHeader" runat="server" CssClass="" Style="display: none;">
<table width="100%">
<tr style="text-align: center">
<td style="width: 97%;">
<p class="popupTitle">
<asp:Label runat="server" ID="lblTitle" Text=""></asp:Label>
</p>
</td>
<td style="width: 3%;">
<p style="text-align: right;">
<span id="lblPopupClose" style="cursor: pointer; color: White">Close</span>
</p>
</td>
</tr>
</table>
</asp:Panel>
<iframe id="if1" src="" class="" style=""></iframe>
</asp:Panel>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Redirect" />
</div>
</div>
</form>
</body>
Test1.aspx
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript">
function fnd(str){
alert(str);
}
function objFailed1(data) {
fnd(data);
}
function objGot1(data) {
fnd(data.d);
}
function Clkdwebservice(){
$.ajax({
url: "Testser.asmx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
data:'{"FileName":"Data from test page"}',
type: 'POST',
success:objGot1,
error: objFailed1
});
}
</script>
</head>
<body>
<form id="form1" runat="server" enableviewstate="false">
<asp:ToolkitScriptManager runat="server" ID="ToolkitScriptManager1" EnablePageMethods="true" />
<div>
<input type="button" onclick="javascript:Clkdwebservice();return false;" value="Click" />
<input type="button" onclick="javascript:parent.Clkd2();return false;" value="Close" />
</div>
</form>
</body>
Testser.asmx.cs
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
[ToolboxItem(false)]
public class Testser : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public String GetData(String FileName)
{
string msg = FileName;
return msg;
}
}
its working fine for me.please check it
I have a dropdownlist control ddlAffilation, a panel pnlForms, a panel Complete, a button Submit, a button Return.
I have a validationcontrol on the dropdownlist.
here is my jquery code
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function () {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
});
$("#<%= Return.ClientID %>").click(function () {
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
});
});
</script>
I have 2 problems:
1) With this jQuery code, I can go back and forth (fade out pnlForms, fade in Complete when click on Submit and vice versa when click on Return) only when i don't choose any value in the dropdownlist box. If I choose any value in the dropdownlist, the Return button doesn't work.
2) The jquery code bypass the .net server validation control. I need the code not do anything if no value is selected from the dropdownlist. I have tried
var isValid = true;
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
isValid = false;
return false;
}
if (isValid == true) {
...
but it doesn't work. What's the best way to do this?
Thanks,
==================================================================================
I can't add an answer to my own question so I reply to John here:
Thanks John. I have my code like this and it solves problem 2.
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#<%= Return.ClientID %>").click(function () {
alert('blah2');
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
});
</script>
However, problem 1 still exists. Let me clarify. I have a few textboxes, a dropdownlist and a submit button to collect feedback from the users. They are all in the panel pnlForms.
All controls can be empty except for the dropdownlist. We took care of this using your code and a server validation control.
when the users click the submit button, I want the pnlForms to fadeOut and a hidden panel called pnlComplete to fadeIn. The pnlComplete has a text saying thanks for the feedback and a button called Return that let the users send another feedback.
When the users click on the Return button, the opposite happens here. The pnlComplete fadeOut and the pnlForms fadeIn.
The Submit button works well but the Return button doesn't work at all. I set some alert() inside the Return.click(function but it doesn't hit.
Any ideas?
Here is the code of the whole page.
<%# Page Title="" Language="C#" MasterPageFile="~/Master.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="content" runat="Server">
<asp:UpdatePanel ID="pnlForms" runat="server">
<ContentTemplate>
<fieldset>
<legend>Your Information</legend>
<ol>
<li>
<label for="ctl00_content_name">
Your Name:</label>
<asp:TextBox ID="Name" runat="server" Width="150px"></asp:TextBox>
<em class="optional">Optional </em></li>
<li>
<label for="ctl00_content_status">
Your Affiliation:*</label>
<asp:DropDownList ID="ddlAffilation" runat="server" Width="155px">
<asp:ListItem Text="--Select One--" Value="" Selected="True" />
<asp:ListItem>F</asp:ListItem>
<asp:ListItem>S</asp:ListItem>
<asp:ListItem>T</asp:ListItem>
</asp:DropDownList>
<em class="required">Required
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage=" - Please select your affiliation"
ControlToValidate="ddlAffilation" SetFocusOnError="True" ForeColor=""></asp:RequiredFieldValidator>
</em></li>
</ol>
</fieldset>
<div style="text-align: center;">
<asp:Button ID="Submit" runat="server" Text="Submit" OnClick="submit_Click" /></div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="Complete" style="display: none;">
<asp:UpdatePanel ID="pnlComplete" runat="server">
<ContentTemplate>
<p>Thank you</p>
<div style="text-align: center;">
<asp:Button ID="Return" runat="server" Text="Return" /></div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="cpClientScript">
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#<%= Return.ClientID %>").click(function () {
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(1000).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
});
</script>
</asp:Content>
I'm not sure if I read your question right or not, but if your issue is that you don't want the jquery to continue firing and allow the form to submit if the dropdown is empty do this:
Instead of attaching a .click event to your button, attach a .submit event to your form. Then you want to use e.PreventDefault() to stop the main submit execution if its not valid
Eg:
$("#FORMNAME").submit(function(e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
// Submitting form...
}
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
Also, you should ALWAYS do server validation along with your client validation.. otherwise all someone has to do is directly submit / bypass your javascript checks
Edit for your edit:
Is the return button being created dynamically or is it there on page load? If its dynamic, its probably never getting assigned to in your jquery, as it doesn't exist when it runs.
Here is a quick test you could try:
var returnButton = $("#<%= Return.ClientID %>");
alert(returnButton.attr("id");
If you don't get back the ID of your return button, its not matching up in your code and thats why your click event isn't working. If thats the case, do a view source on your page and find out what the actual return button ID is set to (this is easier with FireBug or similar tool)
Adding this as a separate answer since its just a huge chunk of code that isn't exactly related to the original answer, but does work as intended. I took the code you gave and converted to basic html from asp.net, and it does work correct, does it work for you?
Could you try posting the output from the asp.net page instead of the code itself? Maybe something isn't being set right on the button element's ID.
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js" type="text/javascript"></script>
</head>
<body>
<div ID="Content1">
<div ID="pnlForms">
<fieldset>
<legend>Your Information</legend>
<ol>
<li>
<label for="ctl00_content_name">
Your Name:</label>
<textbox ID="Name" runat="server" Width="150px"></TextBox>
<em class="optional">Optional </em></li>
<li>
<label for="ctl00_content_status">
Your Affiliation:*</label>
<select ID="ddlAffilation" Width="155px">
<option Value="" Selected="True">--Select One--</option>
<option>F</option>
<option>S</option>
<option>T</option>
</select
</li>
</ol>
</fieldset>
<div style="text-align: center;">
<Button ID="Submit" Value="Submit" OnClick="submit_Click">Submit</Button></div>
</div>
<div id="Complete" style="display: none;">
<div ID="pnlComplete">
<p>Thank you</p>
<div style="text-align: center;">
<Button ID="Return" Value="Return">Return</Button></div>
</div>
</div>
</div>
<div ID="Content3">
<script type="text/javascript">
$(document).ready(function () {
$("#Submit").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#pnlForms").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#Return").click(function () {
$("#Complete").fadeOut('slow');
$("#pnlForms").delay(1000).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#ddlAffilation").val() == "") {
return false;
}
return true;
}
});
</script>
</div>
</body>
</html>