CODEWITHSUNDEEP
c#asp.net
SummerDays
SummerDays

Reputation: 57

Two panels with forms that switch based on radio button

I have 2 panels that each have a form. They are hidden at first, and a radio button selection will make 1 panel visible. One is for credit card payments, and the other is for echecks. The code works for this, but there is one glitch. The echeck option first clears the form on submission and then will submit the form in the second click.

How can I get the 2nd panel (checks) to submit the form when it is selected by the radio button for the first time? Does it have to do with Page.IsPostBack or maybe how my if statements are in the Page_Load section?

Here are the 2 radio buttons

  <asp:RadioButton ID="RadioButton1" runat="server"  GroupName="RbPayment" OnCheckedChanged="RadioButton1_CheckedChanged" Text="Credit Card" Checked="True" AutoPostBack="True" /> 
  <asp:RadioButton ID="RadioButton2" runat="server" GroupName="RbPayment" OnCheckedChanged="RadioButton2_CheckedChanged" Text="Check" AutoPostBack="True" />

This is where I have the 2 panels and forms

<asp:Panel ID="PanelCard" runat="server" Visible="false" OnLoad="RadioButton1_CheckedChanged">
       <%--Form here--%>
       <asp:Button ID="Button1" runat="server" Text="Submit Payment" ClientIDMode="Static" CssClass="formbutton" />
</asp:Panel>
<asp:Panel ID="PanelCheck" runat="server" Visible="false" OnLoad="RadioButton1_CheckedChanged">
       <%--Form here--%>
       <asp:Button ID="Button1" runat="server" Text="Submit Payment" ClientIDMode="Static" CssClass="formbutton" />
</asp:Panel>

I have this code to swap between the panels when a radio button is selected

protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
    {
        if (RadioButton1.Checked)
        {
            PnlCard.Visible = true;
            PnlCheck.Visible = false;
        }

        if (RadioButton2.Checked)
        {
            PnlCard.Visible = false;
            PnlCheck.Visible = true;
        }

    }

    protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
    {
        if (RadioButton1.Checked)
        {
            PnlCard.Visible = true;
            PnlCheck.Visible = false;
        }

        if (RadioButton2.Checked)
        {
            PnlCard.Visible = false;
            PnlCheck.Visible = true;
        }
    }

This is where I think the problem is but I am not sure what needs to be fixed

  protected void Page_Load(object sender, System.EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BtnSubmitCard.PostBackUrl = "https://secure2.authorize.net/gateway/transact.dll";
            //Other code here for the form
            }

        if (PnlCard.Visible == true)
        {
            BtnSubmitCard.PostBackUrl = "https://secure2.authorize.net/gateway/transact.dll";
            //Other code here for the form
        }

        if (PnlCheck.Visible == true)
        {
            BtnSubmitCheck.PostBackUrl = "https://secure2.authorize.net/gateway/transact.dll";
           //Other code here for the form
        }
    }

Upvotes: 0

Views: 1848

Answers (1)

user2366842
user2366842

Reputation: 1216

Your code side appears to be solid, but as was suggested by the first comment, this is indeed a postback issue. You need to use an UpdatePanel for each of the sections to change visibility on the fly like that, see below:

<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Panel ID="PanelCard" runat="server" Visible="false" OnLoad="RadioButton1_CheckedChanged">
   <%--Form here--%>
   <asp:Button ID="Button1" runat="server" Text="Submit Payment" ClientIDMode="Static" CssClass="formbutton" />
   </asp:Panel>
   <asp:Panel ID="PanelCheck" runat="server" Visible="false" OnLoad="RadioButton1_CheckedChanged">
   <%--Form here--%>
   <asp:Button ID="Button1" runat="server" Text="Submit Payment" ClientIDMode="Static" CssClass="formbutton" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

Optionally, you could use two separate update panels as opposed to one large one as well, simply wrap each of the standard panels in an update panel. This will reduce the amount of data being partially posted back each time.

EDIT: Also you'll need to add a script manager to the page if it doesn't exist.

Upvotes: 2

Related Questions