How to Have more than one Form to a single page to submit different-2 portions of Aspx page.

Question

User1945137292 posted

Hi,

I have designed a Login Page, and Using easy tabs on that Login page.

i.e. after opening the Login page I have two tabs on login page, 1st one is for Admin Login, and 2nd one is for User login.

on that page I have two div, 1 div contains the data of Admin Login: - User Name, Password, and Login Button.

on LoginButton_Click I retrieve the data from Admin table and validate to grant the access to Admin.

2nd div has the User Login Form: - User Name, Password, and Login Button

On the click of this button i retrieve data from User Table and validate to grant access to User.

For this I have 4 text boxes, and all four text boxes are set as "required" If I am using all these under single form then on click of Admin Login Button or User Login Button my form is not being submitted. because If admin wants to take login he is able to see only two text boxes another 2 text boxes are hidden. but they are required so form is not being submitted.

I tried using two form tag, but two form tag runat server is not allowed also.

So, please suggest the best possible method to do this.

Thank You.

Answer 1

User-1716253493 posted

You can hide both textbox and validator

TextBox1.Visible = false
RequiredFieldValidator1.Visible = false

or use multiview

    <asp:MultiView ID="MultiView1" runat="server">
        <asp:View ID="View1" runat="server">
            form1
        </asp:View>
        <asp:View ID="View2" runat="server">
            form2
        </asp:View>
    </asp:MultiView>

You can set MultiView1.ActiveViewIndex property

Answer 2

User1644755831 posted

Hello vishal tripathi,

You could try to add required attribute dynamically. For example when admin tab is selected you can set required attribute to true on the two text box that are for admin only and set other to false.

//make admin name required and other not required. 
$('#txtadminname').prop('required',true);
$('#txtusername').prop('required',false);

and when user click user panel do opposite

//make admin name not required and user name required. 
$('#txtadminname').prop('required',false);
$('#txtusername').prop('required',true);

Hope this helps.

With Regards,

Krunal Parekh