Before we begin, I would like to convey that I have limited to no knowledge on the JavaScript language. The only things I've used is JQueryUI - and even that is copy paste.
Currently, I have a user registration page, with all the standard TextBox inputs. I would like to, however, slide down a secondary 'Confirm email' and 'confirm password' whenever a user enters text into the original text box.
I understand the community likes to help those who can prove they helped themselves, but the only thing I currently have to show is me trying to lookup solutions for this and failing.
Could someone please show me a way to do this?
Edit: Code of the password box
<div class="ctrlHolder">
<asp:Label ID="Label9" runat="server" Font-Bold="True" Text="Password"></asp:Label>
<asp:Label ID="Label11" runat="server" CssClass="styleLabelWatermarkWashout" Text="**********"></asp:Label>
<br />
<%--data-default-value="Placeholder text"--%>
<asp:TextBox ID="txtRegisterPassword" runat="server" CssClass="textInput styleTextBoxCenter required"
TextMode="Password" MaxLength="20"></asp:TextBox>
</div>
So, assuming you can create markup similar to this:
<div class="ctrlHolder">
<asp:Label ID="PasswordLabel" runat="server" Font-Bold="True" Text="Password"></asp:Label>
<asp:Label ID="Label11" runat="server" CssClass="styleLabelWatermarkWashout" Text="**********"></asp:Label>
<br />
<%--data-default-value="Placeholder text"--%>
<asp:TextBox ID="txtRegisterPassword" runat="server" CssClass="textInput styleTextBoxCenter required" TextMode="Password" MaxLength="20"></asp:TextBox>
</div>
<div id="confirm-password-box" class="ctrlHolder">
<asp:Label ID="ConfirmPasswordLabel" runat="server" Font-Bold="True" Text="Confirm Password"></asp:Label>
<asp:Label ID="Label12" runat="server" CssClass="styleLabelWatermarkWashout" Text="**********"></asp:Label>
<br />
<%--data-default-value="Placeholder text"--%>
<asp:TextBox ID="txtConfirmRegisterPassword" runat="server" CssClass="textInput styleTextBoxCenter required" TextMode="Password" MaxLength="20"></asp:TextBox>
</div>
You'd want to add some CSS rules to make #confirm-password-box hidden by default. Then, add this script code somewhere on the page (preferably as close to closing </body> tag as possible):
<script>
$(function(){
$('#<%: txtRegisterPassword.ClientID %>').on('blur', function(event){
$('#confirm-password-box').slideToggle('slow');
});
});
</script>
The blur event occurs when the control loses focus. You don't really want to listen for keyup, since that would require this code being called every time a user entered a character into the password box...
Note that this particular chunk of jQuery code requires jQuery 1.7 or higher, so use NuGet to update your script reference (if you're not using anything else that requires an older version of jQuery).
I would add a reference to jquery to the page you are working on.
Then make a new script (on the page or in a separate .js file) which attaches a new function to the onkeyup event for the textboxes. Something like this.
$(document).ready(function()
{
$('mytextbox').bind('keyup', function() {
$('myCOnfirmationTextbox').slideDown();
};
});
This will attach this function to all elements corresponding to the "mytextbox" class or ID. So if you have an input <input type="text" id="email" class="emailInput"/> then you would use $('#email') to bind the event to this particular element. Or you use $('.Emailinput') to bind to all input elements for emails.
By the way, I haven't tested the code, but this or something very similar should work.
If you use a separate .js file, then don't forget to reference it in your page as well.
You can use innerHTML to have a new textbox beneath the email textbox once that box is filled. I could give you the code if you can post the code over here
Replace the controls ids in this answer as per your html.
You can show the confirm controls in the following way.
$('#password').onfocusout(function() {
// This will show once you complete entering Email and Password.
$('#confirmEmail').attr('display', 'inline');
$('#confirmPassword').attr('display', 'inline');
});
Let me tell how you can achieve confirm Email. Same thing can be used to achieve confirm password.
When you focus out of confirm email textbox compare the emails entered by the user in Email and Confirm Email textboxex.
This can be done in following way
$('#confirmEmail').onfocusout(function() {
if($('#confirmEmail').val() == $('#Email').val())
{
// Emails entered are same
}
else
{
alert('Emails entered are not matching. Please reenter emails.');
}
});
Similarly you can check for confirm password.
Related
This is highly likely to be a stupid question, so my apologies. But I can't seem to find an answer anywhere. I am brand new to ASP.net and I'm using C# for the code behind (I have experience with C# from a WinForms project I did, also in Visual Studio)
I have a page, a register for an account page, on the website and I want to be able to access the TextBox that contains email and password etc. I thought it would be something like textboxname.getText() or similar to get what the user has typed into that box when they press submit (clicking submit is my Event) but I don't now how to make it recognize that textboxname is the ID.
For example:
<input type="email" class="form-control" placeholder="Enter Email" id="email"/>
My email TextBox has an ID of 'email'. In code, if I try to type email.getText(), it does not recognize that email refers to that TextBox. If I could even get it to recognize the ID, I could figure out the rest from there.
Thank you for listening to my excessive beginner ranting! If any extra details are necessary I'll add them, just ask.
Resolved! - For some reason it did not generate a designer for my pages when i created the web forms, so i regenerated the design.cs and it is working! :D Thanks for help anyway!
Be sure your markup is correct on front end - even if you are a space off between quotes it can mess things up.
<asp:TextBox id="email" runat="server" Text="Email" />
email.Text = "your text here";
You should use email.Text; (since it's a property, no a method) instead of email.getText(). Also make sure your control has runat property equals to "server" on HTML.
On your page
you have to declare a form with a submit button and within this form you can have your textbox.
<form id="myForm" runat="server">
<asp:TextBox id="TB_Email" placeholder="Enter Email" runat="server"></asp:TextBox>
<asp:Button ID="Btn_Submit" runat="server" Text="Submit" OnClick="Btn_Submit_Click" />
</form>
Code behind
protected void Btn_Submit_Click(object sender, EventArgs e)
{
// here you can access the value of your email-textbox
String email = TB_Email.Text;
}
Use:
<input type="email" class="form-control" placeholder="Enter Email" id="email" runat="server"/>
or alternatively,
<asp:TextBox id="email" runat="server"/> /*Add any other attributes you need*/
In the code behind:
email.Text="your text here";
Without runat="server" attribute, your control is just a HTML control and hence you cannot access it from the server side code(code behind).
I have a dnn site, which has a label and an imagebutton, clicking on which replaces the label with textbox and user can enter their text, once submitted the label will be updated with this text. Now clicking on the imagebutton causes the page to postback, i don't want a postback for this, hence i have placed telerik RadAjaxLoadingPanel control, so the cool loading div gets displayed while processing is going on, but for some reason it's not working, It always throws below error:
Please, see whether wrapping the code block, generating the exception, within RadCodeBlock resolves the error.
Below is the markup of my page: (I tried the wrapping the code with RadScriptBlock and RadCodeBlock, in both case it throws same error as above)
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<a class="subscribetoday" href="#">
<strong>Subscribe Today!</strong> <asp:Label ID="lblsubscribemsg" runat="server" Text="12 issues for $14.95"></asp:Label>
<asp:ImageButton ID="imgEditSubscribe" runat="server"
OnClick="imgEditSubscribe_Click" ToolTip='Edit' ImageUrl="~/images/edit.gif" AlternateText='Edit' Visible="false" />
<div id="editsubscribe" runat="server" visible="false">
<asp:TextBox ID="txtSubscribe" runat="server"></asp:TextBox> <asp:ImageButton ID="imgSave" runat="server"
OnClick="imgSave_Click" OnClientClick="return validateSubscribeNote();" ToolTip='Save' ImageUrl="~/images/save.gif" AlternateText='Save' /> <asp:ImageButton ID="imgCancel" runat="server"
OnClick="imgCancel_Click" ToolTip='Cancel' ImageUrl="~/images/cancel.gif" AlternateText='Cancel' />
</div>
<img src="img/prosound-subscribe.png" alt="Subscribe Today!">
</a>
</telerik:RadScriptBlock>
</telerik:RadAjaxPanel>
Can anyone tell me where i am going wrong with this.
The problem is with other server code blocks on the page (<%=%> for example, generally - <% ... %>), not with this concrete piece of code you are trying to AJAX-enable. You can read more here: http://docs.telerik.com/devtools/aspnet-ajax/controls/ajax/radcodeblock-and-radscriptblock
So, you should find the place where those code blocks are used and wrap THEM in a RadCodeBlock controls. It is often scripts that reference controls, e.g.:
<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
<script>
function getReference() {
return $find("<%=someControl.ClientID%>");
}
</script>
</telerik:RadCodeBlock>
With DNN, however, I cannot say where these may originate.
Thus, your other option is to use an <asp:UpdatePanel> control to get AJAX requests instead of full postbacks. The native AJAX toolset also offers the <asp:UpdateProgress> control that you can use instead of RadAjaxPanel.
I have looked at other questions and answers and still cant seem to solve my issue.
I am using jQuery UI tabs with 3 tabs: Basic Info, Payment, Confirmation
What I want to do is pass the values on the basic information tab textbox's, and payment tab into a label that is on the confirmation tab
ASPX:
<ul>
<li>Basic Information</li>
<li>Payment Information</li>
<li>Confirmation</li>
</ul>
<div id="tabs-1">
<asp:Label runat="server" ID="lblFirstName" Text="First Name" />
<asp:TextBox runat="server" ID="tbFirstName" AutoPostBack="true"/>
<asp:Button runat="server" ID="btnContinue" Text="Continue" CssClass="nexttab" />
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
<asp:Label runat="server" ID="lblConfirmFirstTitle" Text="First Name" />
<asp:Label runat="server" ID="lblConfirmFirst" />
</div>
</div>
Script in head:
$("#btnContinue").click(function () {
$("#lblConfirmFirst").html($("#tbFirstName.").val());
});
The next tab function works fine, and the values retain in the textbox when the next tab is selected, however it wont pass to the label on the 3rd tab.
I think the problem is asp.net rename your server controls if the page has a master page.
add the attribute: ClientIDMode="Static" to your asp controls.
As you are using the ASP.NET controls, the ID will get changed while rendered. Use the jQuery Ends With selector for selecting the elements.
Use jQuery text method for ASP.NET Labels (i.e. html span), and jQuery val method for ASP.NET Toolboxes (i.e. html input).
Also, as the button is ASP.NET button, it gets post back every time you clickit, so use return false; at the end of button click method.
You have a AutoPostBack="true" for textbox, which might also create problem by resetting the label text while post back.
Below code will work if AutoPostBack="true" is removed from textbox.
$(document).ready(function () {
$(function () {
$("#tabs").tabs();
});
$("input[id$=btnContinue]").click(function () {
$("span[id$=lblConfirmFirst]").text($("input[id$=tbFirstName]").val());
return false;
});
});
I am sure this question comes up a lot, but I didn't find an answer in your archives.
Here is my ASP code:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="RCC_ChangePassword.ascx.cs" Inherits="Regal.Web._Tester.RCC.RCC_ChangePassword" %>
<div id="modal-password-change">
<div class="modal-contents">
<h1>Change Password</h1>
<div class="intro">Use the form below to change the password for your RCC account. Use the new password next time you log in.</div>
<asp:Label ID="CurPass" Text="Current Password" runat="server"></asp:Label>
<asp:Textbox id="CurrentPass" runat="server" CssClass="required"></asp:Textbox>
<asp:Label ID="NwPass" Text="New Password*" runat="server"></asp:Label>
<asp:Textbox id="NewPass" runat="server" CssClass="required"></asp:Textbox>
<asp:Label ID="CnfPass" Text="Confirm Password" runat="server"></asp:Label>
<asp:Textbox id="ConfirmPass" runat="server" CssClass="required"></asp:Textbox>
<h4>Your password must include ALL of the following</h4>
<ul class="notes">
<li>At least 8 characters (not more than 16 characters)</li>
<li>At least one number</li>
</ul>
<asp:Button ID="submit" Cssclass="btn blue wide" runat="server" Text="Save Changes" OnClick="btnSubmit_click"></asp:Button>
</div>
</div><!-- #modal-password-change .modal -->
And here is the line that I am getting the error on:
// Change actual password for the new password
String testPass1 = NewPass.Text;
if (regalMemberRepo.ChangePassword(oUser.Email, oUser.Password, testPass1))
can you see anything odd about my code?
Thank you in advance.
This happens to me often with VS. Take a look in the designer file and see if VS created an entry in there for the text box? Make sure you don't have another file somewhere with a similar declaration.
Many times, best way to fix this is to delete, re-create and re-name the form. We're not supposed to edit the designer file ourselves.
After adding a TextBox programmatically I received this error when trying to access its Text property. Here's a quick function I used to access it:
private string GetTextFromTextBox(string strTextBoxName)
{
Control[] txtBox = Controls.Find(strTextBoxName, true);
if (txtBox != null)
{
return txtBox[0].Text;
}
else
{
return null;
}
}
I am facing a problem in my asp.net web application that i need to display a java script confirmation box on click of Update button and this as per requirements given to me.
Currently I am using onclient click
<asp:Button ID="btnCustomerUpdate" runat="server" CssClass="applybuttonstyle"
Text="Update" onclick="btnCustomerUpdate_Click"
OnClientClick="return confirm('Do you really want to update?');"/>
It's working fine but the problem is i also applied some validation controls on my form fields so if a user leave any field blank and click update button then it shows javascript confirm box and the validation message below that form field.
And it is not desired behavior it should not show the confirmation box until unless all validation are passed.
I hope this is due to because i am using this on client click so please tell me a better solution for that.
Thanks in advance.
you can use Page_ClientValidate in your own confirm function to decide whether to display the confirmation dialog.
Something like:
function validateAndConfirm(message){
var validated = Page_ClientValidate('group1');
if (validated){
return confirm(message);
}
}
And on the server you will have something like:
<asp:textbox id="TextBox1" runat="server"/>
<asp:requiredfieldvalidator ValidationGroup="group1"
ErrorText="Need to Fill in Value!"
ControlToValidate="TextBox1"
runat="server"/>
<asp:textbox id="TextBox2" runat="server"/>
<asp:requiredfieldvalidator ValidationGroup="group1"
ErrorText="Need to Fill in Value!"
ControlToValidate="TextBox2"
runat="server"/>
And your button code will change to:
<asp:Button ID="btnCustomerUpdate" runat="server" CssClass="applybuttonstyle"
Text="Update" onclick="btnCustomerUpdate_Click" ValidationGroup="group1"
OnClientClick="return validateAndConfirm('Do you really want to update?');"/>
Obviously, I cannot test this, but you get the idea.
If you will be using Page_ClientValidate you might find this SO question useful.
You can call the Page_ClientValidate method to ensure the page is valid before asking the user:
if (typeof(Page_ClientValidate) == 'function' && Page_ClientValidate() == false) {
return false;
} else {
return confirm('Do you really want to update?');
}
You should atleast apply validation on client side first and than open a confirmation dialog,
while on server, you have to use server side validation first too in case if user has disabled javascript, and than update the record.
You can also use AJAX to update record, so if a validation message occurs, shows error message and if the validation passed, than you can alert the user but the only disadvantage of using that is you have to re-post the data again. To mitigate this problem you either have to save in temporary table, until user gave confirmation and than delete it from temporary table but obviously it takes a lot of work.