So I am using ASP.NET 4.5 web forms.
I have this form where I want a user to enter data, after the users enters data they should be able to press the next button and they can enter more data.
Is it possible to do this on one ASPX form, or do I need to create another ASPX form.
e.g
Username
Password
--- User clicks the next button---
Email
Phone
--- User clicks finish ---
Yes this is possible through asp.net Wizard control or MultiView control. You should be able to find these controls in ToolBox under standard category.
To learn more about these controls, please follow these links:
https://msdn.microsoft.com/en-us/library/wdb4eb30(v=vs.140).aspx
https://msdn.microsoft.com/en-us/library/ms227665(v=vs.140).aspx
Create two divs, one for username and pwd and another for email and phone.
Using jquery 'hide' and 'show' effects you can control both divs, set 'show' for when user click next button.
I am not sure whether this is a right solution for you.
Try this:
Initially, I hide the email and phone, when the user clicks next, it set the style to display:block to show the two textboxes
<script>
function showDiv() {
document.getElementById('divEmailAndPhone').setAttribute('style', 'display:block');
}
</script>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" Text="Username">
</asp:Label>
<asp:Label runat="server" Text="Password"></asp:Label>
<button onclick="showDiv(); return false;">Next</button>
</div>
<div id="divEmailAndPhone" style="display:none">
<asp:Label runat="server" Text="Email"></asp:Label>
<asp:Label runat="server" Text="Phone"></asp:Label>
</div>
</form>
you can do it in one page.
Just add two other textboxes and set visible false to them.when you press next button change the label text and set visible true to these textbox and hide username and password text box.
Related
Ok so I would like to be able to be in the part number textbox press enter and it do a 'Quick Search'. However when press enter it activates the 'Search' Button instead. The 'Search' Button as the diagram shows is a default button of the panel it is in. But the 'Quick Search' is not in that same panel so I am kinda stumped on how to change this action so it calls click on the button on the 'Quick Search' and not the 'Search'. If this doesn't make since ask more questions and I will update the diagram and question.
Thanks in advance!
New Facts
In the browser Render ... these are in the same form
I want the Quick Search Button to be a client side button which makes it hard to use a panel and a default button
Try to place Part Number textbox and Quick Search button in separate Panel with DefaultButton="bnQuickSearck" attribute like follows:
<asp:Panel runat="server" DefaultButton="bnQuickSearck">
<asp:TextBox ID="tbPartNumber" runat="server"></asp:TextBox>
<asp:Button ID="bnQuickSearck" runat="server" Text="Quick Search" />
</asp:Panel>
EDIT If you have client-based button you can use the following code on javascript:
<div id="divId">
<input id="txtId" type="text" />
<input id="btnId" type="button" value="Quick Search" onclick="alert('test')"; />
</div>
<script>
$("#divId").bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#btnId").click();
return false;
}
});
</script>
Make sure jQuery installed in your web application in this case.
It sounds like you have one big form. If this is the case, when you hit enter in the Part Number field it activates the default action, in this case it would seem to be the "Search" button. If you can break up your forms, they'll each have their own default actions. This will eliminate any need for crazy redirects, AJAX, server-side foo, etc.
I am using button and textbox for searching.its working good whenever I click the search button.
But if I press enter button then it redirects me to another page.
I have tried this in page load but it's not working:
Page.RegisterHiddenField("__EVENTTARGET", "btnSearch")
Page.RegisterHiddenField("__EVENTTARGET", btnSearch.uniqueid)
And also this
Dim cs As ClientScriptManager = Page.ClientScript
cs.RegisterHiddenField("__EVENTTARGET", searchbtn.UniqueID)
Please tell me how we can do this.
You have to set DefaultButton attribute for the form if you want to handle it whole form:
<form id="form1" runat="server" DefaultButton="btnSearch">
you can also set different default button for different panel:
<asp:Panel id="panel1" runat="server" DefaultButton="bt1">
for disabling button in login page(in page load of login page):
Button mpbtnSearch= (Button) Master.FindControl("btnSearch");
mpbtnSearch.UseSubmitBehavior=false;
in master page page load
if(Request.Url.Host.Contains("login.aspx"))
{
btnSearch.UseSubmitBehavior=false;
}
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.
I have 3 different submit buttons(Log In, Search, Insert) in the same page and what I want is to find the best way to have this 3 buttons doing a different things when I press them, or I press enter while I am about to press them.
As you can see from my photo, when I press Log In the Insert is pressed too because I have a global form in my Master Page.
I tried to use different forms, but i can't because I need them to have runat="server", which is not possible for a page to have.
I use asp Texboxes:
<asp:TextBox class="text-input" ID="txtLoginEmail" runat="server"
Height="15px" Width="130px"></asp:TextBox>
and asp Buttons:
<asp:Button class="submit google-button" ID="btnLogin" onclick="btnLogin_Click"
runat="server" Text="Log in" />
except my Search button which is linkButton:
<asp:LinkButton ID="searchLink" runat="server" onclick="searchLink_Click">Search</asp:LinkButton>
You may use Validation Groups to cause only required text boxes validation on specific button click. And then in event handler to concrete button you may execute specific logic.
This is the scenario:
I have a Master Page,
In the Master Page I have a user control
In the User Control there is a code that looks like this
<div>
<a id="p1" runat="server">
<asp:Image ID="Img" runat="server" ImageAlign="AbsMiddle" Style="position:relative;
bottom: 0px;" /></a> -<a id="p2" runat="server">
<asp:Label ID="lblRate" runat="server"></asp:Label>
Rates</a>
</div>
Now, when the user clicks on "Rates" it should focus on an item that is another User Control back in the Master Page.
How can I do this?, this is existing code and can not modify the current structure but what is currently happening is that when "Rates" is clicked it postsback with a parameter goto=rates but doesnt do anything.. I need to make so that when it is clicked it focuses on another UserControl in the Master Page. (but this "Rates" link is User Control too)
I tried in my Master Page the following
if(!Page.Postback)
{
if(Request.Params["goto"] == "rates"){
uControl.Focus();
}
}
No luck, please help :(
So to recap:
MasterPage has UserControl -> UserControl has a link that postsback with parameter goto=rates -> back in the MasterPage I need to focus the screen on another UserControl.
I tried to be as clear as I could
Thank you
not all controls supports focus like this. for your user control, you may need build javascript to setup focus.
Looks like you have a not opperator where you should. You should change if(!Page.Postback) to if(Page.Postback).