Combine JQuery Click() and C# Button OnClick() events

Question

Guys I've a situation here,

I've a HTTP handler (InsertMap.ashx) to save the Data to Database (TABLE 1), and I'm calling that method using JQuery as follows

    $('a#AnchSaveData').click(function (e) {
        e.preventDefault();
        $('#mapcodeimage').attr('src', $("#wPaint").wPaint("image"));
        $('#mapcode').val($('#chartdata').html());
        $.post("../InsertMap.ashx", $("form").serialize(), insertCallback);
    });

And I have another C# method (BtnUpdateDiagnosis_Click) to submit the some other values to database (TABLE 2) as follows

protected void BtnUpdateDiagnosis_Click(object sender, EventArgs e)
    {
        if (HfContainer.Value != null)
        {
            ObjPatient.UpdateDiagnosis(TxtChiefComplaints.Text.Trim(), TxtFindings.Text.Trim(), TxtPrecaution.Text.Trim(), TxtDiagnosis.Text.Trim(), TxtManagementPlan.Text.Trim(), Request.Cookies["UserID"].Value, HfContainer.Value, DdlTherapist.SelectedValue);
            Diagnosis();
        }
        else
        {
            Response.Redirect(ObjFunction.GetSeoSpecificURL("RegisterPatient"));
        }
    }

What I need is, I need to Include both these methods in a Single CLICK event, either C# Button OnClick, or JQuery Click()

How to Combine these two? Please help me

Answer 1

jQuery is running in the browser, C# is running on the server. To combine these together, you need to pick whether it'll all happen from the browser or from the server, and then move the rest of the parameters there. Since you have variables called "Diagnosis" and "Patient" that likely have other scary words attached like HIPAA and PCI, I'd say you probably want to get the jQuery to populate form variables, and let the button click harvest those details and forward it onto the ashx to avoid leaking data into the browser.

Answer 2

       $('a#AnchSaveData').click(function (e) {
            e.preventDefault();
            $('#mapcodeimage').attr('src', $("#wPaint").wPaint("image"));
            $('#mapcode').val($('#chartdata').html());
            $.post("../InsertMap.ashx", $("form").serialize(), function (data) {
                insertCallback();

                $('#BtnUpdateDiagnosis').trigger('click');
            });
        });

//Or 


            $('a#AnchSaveData').click(function (e) {
                if (!$(this).hasClass('InsertMapProcess')) {
                    $(this).addClass('InsertMapProcess');
                    e.preventDefault();
                    $('#mapcodeimage').attr('src', $("#wPaint").wPaint("image"));
                    $('#mapcode').val($('#chartdata').html());
                    $.post("../InsertMap.ashx", $("form").serialize(), function (data) {
                        insertCallback();

                        $('#BtnUpdateDiagnosis').trigger('click');
                    });
                }
            });