How do I call a code-behind method after external JavaScript validates a form?

Question

I want to send an email to a user after they've filled out their details on a form. I want to validate the form (and if the form is valid) then send the email.

My validation for the form is in a separate JavaScript file and the code that I use to send the email is in my code-behind page. How would I be able to call the code-behind page method after the form has been validated?

Code Behind that I use to send the email(.cs) :

[WebMethod]
[ScriptMethod]
public static void sendMail(string fname, string lname, string email, string phone)
{
     //some code here
}

External JavaScript file used for validation(.js):

function validateForm() {
    /* some more code here */
}

HTML that contains the form:

<form id="franform" action="AnyPage.aspx" method="post">
    <asp:Panel style="width: 60%; margin:auto; top:0px;" runat="server">
            <!-- All components are added here -->
            <button type="submit" id="send" class="send" onclick="javascript: return validateForm()">Submit</button>
    </asp:Panel>
</form>

That depends entirely on what your external JavaScript validation is doing, which you haven't provided? — Liam
– Liam, Commented Feb 27, 2014 at 10:09
If you would take a look at the correct answer you will see that the user (benl2k) did not need any other information either than that which I already provided (methods, functions, forms). Thank you for your interest on my problem in any case! :) — Pierre Nortje
– Pierre Nortje, Commented Feb 27, 2014 at 11:38

Community · Accepted Answer · 2017-05-23 12:32:55Z

3

This is very similar to a question from yesterday.

Basically you need to change your button to an ASP button, reference your javascript function in onClientClick attribute and your button click event in code behind on onClick attribute e.g.

<asp:Button ID="send" runat="server" OnClientClick="return validateForm();" OnClick="send_Click" Text="Submit"/>

Your send_Click event could then call the sendMail method. Your javascript function needs to return true or false so that it only calls the on click event if true is returned.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Feb 27, 2014 at 10:16

B-Lat

1,6951 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pierre Nortje Over a year ago

Sorry, I did not see the question from yesterday. Thank you for your explanation and correct answer!

Yuri Gor · Accepted Answer · 2014-02-27 10:17:02Z

0

<form onsubmit="return validateForm();" .... >
.....
</form>

<script>
function validateForm()
{
    if(goodForm)
        return true;
    return false;
}
</script>

answered Feb 27, 2014 at 10:17

Yuri Gor

1,4931 gold badge15 silver badges28 bronze badges

Comments

Emad Khalil · Accepted Answer · 2014-02-27 10:29:25Z

0

You can use Jquery & Ajax to do the job, just call from the client side the below javascript function after the form validation.

function sendmail()
{
      $.ajax({
             type: "POST",
             url: "AnyPage.aspx/sendMail",
             data: "fname=" + $("fName").val() + "&lname=" + $("lName").val() + "&email=" + $("email").val() + "&phone=" $("phone").val(),
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success: function (response) {
             },
             failure: function (response) {
             }
         });
}

You just have to give ids to the elements to pass their values.

answered Feb 27, 2014 at 10:29

Emad Khalil

8331 gold badge8 silver badges14 bronze badges

Collectives™ on Stack Overflow

How do I call a code-behind method after external JavaScript validates a form?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related