jQuery reset on button click

Question

I have this form where a user selects option from dropdown and the respective div is displayed. However my problem is when the submit button is clicked, the on click method is being executed successfully but the current div is hidden and the first div is shown. How can I stop this from happening?

jQuery code:

$(document).ready(function () {
        displayDiv();
        $('#ddlist').change(displayDiv);

        function displayDiv() {
            switch ($("#ddlist").val()) {
                case "addition":
                    $("#addition").show();
                    $('#conversion').hide();
                    $('#triangle').hide();
                    $('#quadratic').hide();
                    break;
                case "conversion":
                    $("#addition").hide();
                    $('#conversion').show();
                    $('#triangle').hide();
                    $('#quadratic').hide();
                    break;
                case "triangle":
                    $("#addition").hide();
                    $('#conversion').hide();
                    $('#triangle').show();
                    $('#quadratic').hide();
                    break;
                case "quadratic":
                    $("#addition").hide();
                    $('#conversion').hide();
                    $('#triangle').hide();
                    $('#quadratic').show();
                    break;
            }
        }
    });

form code:

Please choose required calculation from the following list:
    <select id="ddlist">
        <option value="addition">Addition of three numbers</option>
        <option value="conversion">Convert from Fahrenheit to Celsius</option>
        <option value="triangle">Calculate the side of a right-angled triangle</option>
        <option value="quadratic">Find x using the Quadratic Equation</option>
    </select><br /><br />
</p>

<div id="addition">
    <p>
    Input variable a : <asp:TextBox runat="server" ID="varA" CssClass="numeric"></asp:TextBox><br /><br />
    Input variable c : <asp:TextBox runat="server" ID="varB" CssClass="numeric"></asp:TextBox><br /><br />
    Input variable b : <asp:TextBox runat="server" ID="varC" CssClass="numeric"></asp:TextBox><br /><br />
    <asp:Button ID="additionSubmit" runat="server" Text="Submit"  
            onclick="additionSubmit_Click" /><br /><br />
     <asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

<div id="conversion">
    <p>
    Input Fahrenheit Temperature : <asp:TextBox runat="server" ID="temperatureF" CssClass="numeric"></asp:TextBox><br /><br />
    <asp:Button ID="converstionSubmit" runat="server" Text="Submit" 
            onclick="converstionSubmit_Click" /><br /><br />
     <asp:Label ID="lblConversion" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

<div id="triangle">
    <p>
    Input side a : <asp:TextBox runat="server" ID="tsideA" CssClass="numeric"></asp:TextBox><br /><br />
    Input side b : <asp:TextBox runat="server" ID="tsideB" CssClass="numeric"></asp:TextBox><br /><br />
    <asp:Button ID="triangleSubmit" runat="server" Text="Submit" 
            onclick="triangleSubmit_Click" /><br /><br />
     <asp:Label ID="lblTriangle" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

<div id="quadratic">
    <p>
    Input side a : <asp:TextBox runat="server" ID="sideA" CssClass="numeric"></asp:TextBox><br /><br />
    Input side c : <asp:TextBox runat="server" ID="sideB" CssClass="numeric"></asp:TextBox><br /><br />
    Input side b : <asp:TextBox runat="server" ID="sideC" CssClass="numeric"></asp:TextBox><br /><br />
    <asp:Button ID="quadraticSubmit" runat="server" Text="Submit" 
            onclick="quadraticSubmit_Click" /><br /><br />
     <asp:Label ID="lblQuadratic" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

on click code (addition only, rest is similar):

protected void additionSubmit_Click(object sender, EventArgs e)
    {
        if (varA.Text != null && varB.Text != null && varC.Text != null)
        {
            int result = Convert.ToInt32(varA.Text) + Convert.ToInt32(varB.Text) + Convert.ToInt32(varC.Text);
            lblAddition.Text = " a + b + c = " + result.ToString("#.##") + "\r (a+b+c)";
        }
        else
        {
            lblAddition.Text = "Please input all fields!";
        }
    }

trying to achieve the above with AJAX. here is what I have up to now:

$("#btnSubmit").click(function() {

        $.ajax({
             $('#addition,#conversion,#triangle').hide(),
             $('#quadratic').show();
        });
        });

Unrelated to what you asked about, can I suggest that your `displayDiv()` function could be reduced to only two lines if you first hide all the divs `$("#addition,#conversion,#triangle,#quadratic").hide();` and then show the required one `$("#"+$("#ddlist").val()).show();` — nnnnnn, Jul 08 '13 at 12:47

score 1 · Answer 1 · answered Jul 08 '13 at 12:39

You're mixing server-side and client-side functionality here, so the results may appear unintuitive to you. When you perform the server-side logic, the entire page is re-loaded. So what you get back is a completely new context of the page as far as client-side logic is concerned. Thus, your initial call to displayDiv() shows/hides the divs as though it was an initial page load.

You have a few options, the applicability of each one being up to you and what you're comfortable developing or what other features you'll need to support:

Show/Hide the divs from server-side code instead of client-side code, so you can include the logic in your server-side event handlers to be processed when the page posts back; or
Perform the server-side logic in an AJAX call so you don't lose the client-side state from a post back; or
Perform the logic client-side.

The first option might be more comfortable for you, but it's going to involve either performing more post backs to replace the client-side show/hide logic (which is poor UX) or it's going to require some awkward code in setting CSS properties server-side and keeping them in sync with client-side CSS properties manually. (Hint: You can't set .Visible = false because then the elements aren't rendered client-side at all.)

The second option is probably going to be your best learning experience.

The third option is great if the rest of the logic you're looking to perform can also be done client-side. If you're just talking about math equations then that's probably true. This would result in the best UX because there's no waiting on network delays for any of the functionality.

Would like to try and do with AJAX, but my experience with AJAX is very minimal. How can I perform the mathematical logic on the client-side? — user1986761, Jul 08 '13 at 12:56
@user1986761: This question has some helpful links for implementing AJAX calls in a WebForms app using jQuery: http://stackoverflow.com/questions/202538/using-jquery-for-ajax-with-asp-net-webforms — David, Jul 08 '13 at 12:58
Thanks for the link will check it out. How can I perform the mathematical logic on the client-side? — user1986761, Jul 08 '13 at 13:05
@user1986761: You seem to be missing the point of what AJAX is. Please take a look at the jQuery documentation for it and a closer look at the examples linked to by that other question. Essentially in the call to the `.ajax()` function you would make an asynchronous request to a server-side resource (which in this case could be a `Page` or an `HttpHandler`, perhaps) which would perform server-side logic (what you currently have in your `additionSubmit_Click` function) and respond with the result of that logic. The client-side code would then receive that response and display it. — David, Jul 08 '13 at 13:26

score 0 · Answer 2 · answered Jul 08 '13 at 14:02

David is right as the page is taking full post back it causes "displayDiv" to call every time with ddlist, 'addition' item selected. We need something that holds the value of ddl on which server processing is happing. Please take a look the code i have implemented solving the issue you have....

********************** Script Begin*****************
 $(document).ready(function () {
            SetDdlListValue();
            $('#ddlist').change(displayDiv);
            displayDiv();
        });

        function SetDdlListValue() {
            var hidValue = $('#<%= hidListSelectedValue.ClientID %>').val();
            if (hidValue != '') {
                $("#ddlist").val(hidValue);
            }
        }

        function displayDiv() {
            switch ($("#ddlist").val())
                 {
                    case "addition":
                        $("#addition").show();
                        $('#conversion').hide();
                        $('#triangle').hide();
                        $('#quadratic').hide();
                        break;
                    case "conversion":
                        $("#addition").hide();
                        $('#conversion').show();
                        $('#triangle').hide();
                        $('#quadratic').hide();
                        break;
                    case "triangle":
                        $("#addition").hide();
                        $('#conversion').hide();
                        $('#triangle').show();
                        $('#quadratic').hide();
                        break;
                    case "quadratic":
                        $("#addition").hide();
                        $('#conversion').hide();
                        $('#triangle').hide();
                        $('#quadratic').show();
                        break;
                }

            }
********************** Script End *****************

**********************Add hidden control at aspx*****

<asp:HiddenField ID="hidListSelectedValue" runat="server" />

*****************************************************

********************** .cs page code Begin*********

string[] ddlListValues = new string[] { "addition", "conversion", "triangle", "quadratic" };

        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void additionSubmit_Click(object sender, EventArgs e)
        {
            if (varA.Text != null && varB.Text != null && varC.Text != null)
            {
                int result = Convert.ToInt32(varA.Text) + Convert.ToInt32(varB.Text) + Convert.ToInt32(varC.Text);
                lblAddition.Text = " a + b + c = " + result.ToString("#.##") + "\r (a+b+c)";
                hidListSelectedValue.Value = ddlListValues[0];
            }
            else
            {
                lblAddition.Text = "Please input all fields!";
            }
        }

        protected void converstionSubmit_Click(object sender, EventArgs e)
        {
            hidListSelectedValue.Value = ddlListValues[1];
        }

        protected void triangleSubmit_Click(object sender, EventArgs e)
        {
            hidListSelectedValue.Value = ddlListValues[2];
        }

        protected void quadraticSubmit_Click(object sender, EventArgs e)
        {
            hidListSelectedValue.Value = ddlListValues[3];
        }

********************** .cs page code End*********

jQuery reset on button click

2 Answers2