Right now I have to click the Login button in order to send a form to the server.
I would like to press the Enter key while on the password field.
This is the code:
<%# Page Language="VB" AutoEventWireup="False" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>
<title>Login Page</title>
<SCRIPT language="javascript" src="commonpages/js/Utility.js" type="text/javascript"></SCRIPT>
<script>
function GoBtn_ServerClick(oButton, oEvent) {
}
</script>
</head>
<body style="background-color:AliceBlue">
<div id="main0">
<!--<input id="auto" type=button value="Print test" onclick="Printtest();">-->
<table width=800 align=center height=600px style="background-color: AliceBlue;">
<tr>
<td width=25></td>
<td width=750 align=center><form runat="server">
<table ><tr><td colspan="2">
</td></tr>
<tr><td align=left>
Login:</td><td align=right>
<input id="login" runat=server type=text style="width: 100px"/></td>
</tr><tr><td align=left>
Password:</td><td align=right>
<input id="pw" runat=server type=password style="width: 100px"/>
</td></tr>
<tr><td align=center colspan=2>
<input type=button runat=server id=GoBtn value=Login style="width: 60" CausesValidation="False" />
</td></tr></table></form>
</td>
<td width=25></td>
</tr>
</table>
</div>
</body>
</html>
I have searched Stack Overflow for similar questions, but they show examples of using ASP controls rather than HTML controls.
Change the 'type=button' to be 'type=submit' on your GoBtn, and it should get triggered when you press Enter.
Alternately, you could use jQuery to 'click' the button when the Enter key is pressed in the Password field:
$(document).ready(function(){
$('#pw').keypress(function(e){
if(e.keyCode==13)
$('#GoBtn').click();
});
});
Related
Masterpage.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'>
</script>
<script src="Chrome.js" type="text/javascript"></script>
</head>
<body>
<form id="Master" runat="server">
<table style="width:987px; margin:auto; height: 86px;">
<tr style="background-color:#FFFFFF">
<td class="style2">
<img src="images/logo.jpg" alt="" width="235" height="73" />
</td>
<td style="vertical-align:middle;"class="style1">
<div style="float:right; width:153px; height: 22px;">
<asp:TextBox ID="TextBox1" runat="server" Height="20px"
style="margin-left: 0px" Width="140px">
</asp:TextBox>
</div>
Forget Password? </span></span>
</td>
<td class="style33">
<div style="float:right; width:157px; height: 20px; margin-right: 1px;">
<asp:TextBox ID="TextBox2" runat="server" Height="20px"
style="margin-left: 0px; margin-top:
Width="147px"></asp:TextBox>
</div>
New User Registration </span>
</td>
<td class="style40">
<div style="height: 67px; width: 81px;">
 <asp:Button ID="btnlogin" runat="server" style="color:White; background-color:#404040;font-family:Verdana;font-size:10pt; height: 29px; margin-top: 12px;" Text="Login" onclick="btnlogin_Click1" /></div>
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color:#207DA8">
<td class="style39">
</td>
<td class="style39">
</td>
</tr>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</td>
</tr>
<img alt="" src="images/rgt.jpg" style="width: 471px; height: 247px" />
</td>
</tr>
<tr style="vertical-align=top;background-color=#D4D3D9">
<td style="height:1;">
</td>
</tr>
</tbody>
</table>
</tbody>
</table>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
RegisterPage.aspx
<%# Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Registration.aspx.cs" ValidateRequest="false" Inherits="Paragraphreader.Registration" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery.validation.js" type="text/javascript"></script>
<script>
$("#Register").submit(function () {
return $(this).validation();
alert("submitted");
});
</script>
<script>
function validate() {
var a = 0, rdbtn = document.getElementsByName("gender");
for (i = 0; i < rdbtn.length; i++) {
if (rdbtn.item(i).checked == false) {
a++;
}
}
if (a == rdbtn.length) {
document.getElementById("RadioButtonList1").style.border = "2px solid red";
return false;
} else {
document.getElementById("RadioButtonList1").style.border = "";
return true;
}
}
</script>
<link href="Career.css" rel="stylesheet" type="text/css" />
<link href="Chrome.css" rel="stylesheet" type="text/css" />
<link href="Styles.css" rel="stylesheet" type="text/css" />
<form id="Register" runat="server">//A page can have only one form tag
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="FormUpdatePanel" runat="server">
<ContentTemplate>
I am getting error(A page can have only one server side cof while compiling RegisterPage.aspx.In the master page i have a form tag and server side code
In the Register page i have a form tag and server side code.how to avoid this error
Master pages should not contain form tags in general because they are meant to be used only as the base layout of your content page. Remove the form tag from the Master page and the error will go away.
If you want to define a common "Login" section for all your pages (this appears to be your intent), you can instead create a UserControl to do this. You would then define a section inside your Master page to contain this user control making sure that the ContentPlaceHolder of the Login UserControl always ends up enclosed inside the content page's form. That way, when you submit the form, the btnlogin_Click1 click event is triggered.
In conclusion: re-arrange your page in a way that you have one form tag per page, since ASP.NET does not allow having more than one and try to define your form's inside the content pages and not the Master page.
Here is my effort for using JQuery mobile with asp.net webform. Below is the code I have used in the Default.aspx page. It's a very simple code
Below is the complete code of the aspx page.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title> Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Mobile Login</h1>
</div><!-- /header -->
<div data-role="content">
<table width="100%">
<tr width="100%">
<td width="30%" align="right" valign="middle">
<asp:Literal ID="lblUserName" runat="server" Text="User Name"></asp:Literal>
</td>
<td width="50%">
<input type="text" maxlength="20" id="UserName" style="width:50%;" runat="server" />
</td>
</tr>
<tr width="100%">
<td width="50%" align="right">
<asp:Literal ID="Literal1" runat="server" Text="Password"></asp:Literal>
</td>
<td width="50%">
<input type="text" maxlength="20" id="Password" style="width:50%;" runat="server" />
</td>
</tr>
<tr width="100%">
<td width="50%" align="right">
</td>
<td width="50%">
<table width="100%">
<tr>
<td width="30%">
<asp:Button ID="btnLogin" runat="server" Text="Login"
OnClick="btnLogin_Click" />
</td>
<td width="30%">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="ui-btn-active"
OnClick="btnCancel_Click" />
</td>
<td width="40%">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div><!-- /content -->
<div data-role="footer">
<h4>
# All right reserved.
</h4>
</div><!-- /footer -->
</div><!-- /page -->
</form>
</body>
</html>
Now on the server side
protected void btnLogin_Click(object sender, EventArgs e)
{
Response.Redirect("Home.aspx",true);
}
protected void btnCancel_Click(object sender, EventArgs e)
{
UserName.Value = "";
Password.Value = "";
}
but when I am clicking the login/cancel button nothing happen other than the Url is changed from
http://localhost:2278/Mobile/Default.aspx
to
http://localhost:2278/Mobile/Default.aspx#/Mobile/Default.aspx
What is wrong in my code? Can't I access Server side functions from ASP.NET server controls in JQuery Mobile? I am aware that it can be done better in MVC but that's not a option for me in this case.
Please help
This is because .net adds type="submit" to Button control by default. You need to set that to false and I would also set CausesValidation to false too, like this:
<asp:Button ID="btnLogin" runat="server" Text="Login"
OnClick="btnLogin_Click" CausesValidation="False" UseSubmitBehavior="False" />
in all fairness however, I wouldn't have used a server-side event just to navigate away on button click. You can achieve that with much easier way:
Login
..that's, of course, assuming you don't have to do any other server-side operations before navigating away.
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
.style1
{
width: 50px;
height: 323px;
}
.style2
{
width: 650px;
height: 323px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td style="width:30px; height:20px;">
<img src="Image/Blue%20hills.jpg"
style="height: 83px; width: 734px;" />
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="background-color:Black; background-image:url('~/Images/Bluehills.jpg');" class="style1">
</td>
<td class="style2">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
reserved © softech infoways
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Try like this:
<td style="background-color:Black; background-image:url('<%= ResolveUrl("~/Images/Bluehills.jpg") %>');" class="style1">
</td>
and make sure that the /Images/Bluehills.jpg image actually exists (I see that in your <img> tag you are using a different image name, one with a space in its name and located in the Image folder instead of Images).
Also make sure that you define some height and width of the <td> or the image might not display:
<td style="background-color:Black; width: 100px; height: 100px; background:url('<%= ResolveUrl("~/Images/Bluehills.jpg") %>') no-repeat;" class="style1">
</td>
I would also strongly recommend you using FireBug to inspect what images are loaded and for those that are not loaded see the reason. It is an excellent tool and a must-have for every web developer.
Found a strange but got the image to display
Here is solution i used it without tilde sign and it work don't know why please if u know help me to understand
Small line Code is
<td style="background-image:url(Image/Bluehills.jpg);" class="style1">
oiyhoyhobhobjho
jgkifjklhjljh
hghdoyjofjohjypt
dhgijrlyjhoftjpohktpu
</td>
By using this image get displayed
In the code below, I am trying to apply a Dijit theme to the controls in my .aspx page. However, the controls persist in their normal, unthemed appearance.
Anybody know why?
Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="WebJournalEntryClient.Main" %>
<!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 runat="server">
<title>My Web Application</title>
<link rel="stylesheet" href="dojoroot/dijit/themes/tundra/tundra.css" />
<script type="text/javascript" src="dojoroot/dojo/dojo.js"/>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ComboBox");
</script>
</head>
<body class = "tundra">
<form id="form1" runat="server">
<div>
<div>
This is potentially space for a header bar.
</div>
<table>
<tr>
<td>
Maybe <br /> a <br /> Side <br /> bar.
</td>
<td>
<asp:ContentPlaceHolder ID="CenterPlaceHolder" runat="server"/>
</td>
</tr>
</table>
<div>
This is potentially space for a footer bar.
</div>
</div>
</form>
</body>
</html>
Content Page:
<%# Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="LogIn.aspx.cs" Inherits="WebJournalEntryClient.LogIn" %>
<asp:Content ID="Content" ContentPlaceHolderID="CenterPlaceHolder" runat="server">
<div>
User ID: <asp:TextBox ID = "UserName" dojoType="dijit.form.TextBox" runat="server" /><br />
Password: <asp:TextBox ID = "PassWord" dojoType="dijit.form.TextBox" runat="server" /><br />
<asp:Button ID="LogInButton" Text="Log In" dojoType="dijit.form.Button" runat="server" />
</div>
</asp:Content>
You need to add djConfig="parseOnLoad: true" to you script tag.
<script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="parseOnLoad: true"/>
Or
dojo.parser.parse();
Could be the path is wrong. Use Firebug to see if it's reading any css.
I am not sure about what ASP.net is doing with your page.
However in any case can you double check with firebug wheather your body has "tundra" class in the Browser Output ?? I am assuming that the CSS is comming properly (: as you mentioned in above comment)
I have a asp.net page that has a master page and it contain RadioButtonList1 and I try to do the following:
<script type="text/javascript">
var radioButtonList = document.getElementById('<%=RadioButtonList1.ClientID%>');
if(radioButtonList[0].checked)
document.getElementById("_secondTR").style.display = "block";
else if (radioButtonList[1].checked )
document.getElementById("_secondTR").style.display = "none";
}
</script>
<table style="width: 100%">
<tr id="Tr1">
<td>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" BackColor="#FFCC99"
RepeatDirection="Horizontal" Width="117px" onclick="ShowHide()">
<asp:ListItem Value="1">Yes</asp:ListItem>
<asp:ListItem Value="0">No</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr id="_secondTR" runat="server" style="display: none">
<td>
<asp:RadioButton ID="Five" runat="server" GroupName="1" BackColor="#669999" />
<asp:RadioButton ID="Four" runat="server" GroupName="1" CausesValidation="True" BackColor="#669999" />
</td>
</tr>
</table>
I can't get RadioButtonList1 from JavaScript.
THE FOLLOWING IS THE actual javascript code seen by the browser
<!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><title>
Untitled Page
</title>
</head>
<body>
<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTY3MTM1NjkwNw9kFgJmD2QWAgIDD2QWAgIBD2QWAgIBD2QWAgIBDxYCHgVzdHlsZQUNZGlzcGxheTpub25lO2QYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgQFLmN0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkV2ViVXNlckNvbnRyb2wxJEZpdmUFLmN0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkV2ViVXNlckNvbnRyb2wxJEZpdmUFLmN0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkV2ViVXNlckNvbnRyb2wxJEZvdXIFLmN0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkV2ViVXNlckNvbnRyb2wxJEZvdXLEUVfizbUknWTXdgpHXciIE+acfQ==" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBgLV9tHzCQLJ7qOsBgLW7qOsBgLGgYnCCgKixI2BBALP88ewCU+8LBEmqBjXFfT7h0XYnYX89px3" />
</div>
<div>
asda sd sd as das
<script type="text/javascript">
function ShowHide()
{
var radioButtonList = document.getElementById('ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1');
if(radioButtonList[0].checked)
document.getElementById("_secondTR").style.display = "block";
else if (radioButtonList[1].checked )
document.getElementById("_secondTR").style.display = "none";
}
</script>
<table style="width: 100%">
<tr id="Tr1">
<td>
<table id="ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1" onclick="ShowHide()" border="0" style="background-color:#FFCC99;width:117px;">
<tr>
<td><input id="ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1_0" type="radio" name="ctl00$ContentPlaceHolder1$WebUserControl1$RadioButtonList1" value="1" /><label for="ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1_0">Yes</label></td><td><input id="ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1_1" type="radio" name="ctl00$ContentPlaceHolder1$WebUserControl1$RadioButtonList1" value="0" /><label for="ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1_1">No</label></td>
</tr>
</table>
</td>
</tr>
<tr id="ctl00_ContentPlaceHolder1_WebUserControl1__secondTR" style="display:none;">
<td>
<span style="background-color:#669999;"><input id="ctl00_ContentPlaceHolder1_WebUserControl1_Five" type="radio" name="ctl00$ContentPlaceHolder1$WebUserControl1$1" value="Five" /></span>
<span style="background-color:#669999;"><input id="ctl00_ContentPlaceHolder1_WebUserControl1_Four" type="radio" name="ctl00$ContentPlaceHolder1$WebUserControl1$1" value="Four" /></span>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
.net is generating a table for your list of buttons, radioButtonList referseto that table,
to get the buttons you need to add the following :
radioButtonList = radioButtonList.getElementsByTagName ('input');
That solves your immediate problem, but getElementById ('_secondTR') throws an error.
Changing the javascript to the following appears to do what you want.
function ShowHide () {
var radioButtonList = document.getElementById ('ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1');
radioButtonList = radioButtonList.getElementsByTagName ('input');
if (radioButtonList[0].checked)
document.getElementById ("ctl00_ContentPlaceHolder1_WebUserControl1__secondTR").style.display = "block";
else if (radioButtonList[1].checked )
document.getElementById ("ctl00_ContentPlaceHolder1_WebUserControl1__secondTR").style.display = "none";
}
I will have to defer to a .net expert to tell you how to cleanly generate this script.