Send Email with different Forms to different Email Addresses

Question

I have 2 Forms , One for Print and One for Cloud and in each Form i have an input field ,where user should write their email address in input feild and when User Submit button for example In Print Form, it should send an email with users email address (Just inform in input feild) to Print Email address and when user submit button in Cloud Form it should send an email to Cloud Email address.

For example;. if Form = Print send value of Input field in Print Form to Print Email Addresse

if Form = Cloud send value of Input field in Cloud Form to Cloud Email Address

I can get it just work for One Form for example Print , but i dont know how get this things work for the others Forms like Cloud. Can anyone please point me in right direction! thanks :)

PrintForm HTML Markup:

 <form id="PrintForm">
                        <input type="text" id="txtEmail" />

                        <input type="submit"  value="Send" />
                    </form> <br>

CloudForm HTML Markup:

 <form id="CloudForm">
                        <input type="text" id="txtEmail" />

                        <input type="submit"  value="Send" />
                    </form>

AJAX:

<script>
    $(document).ready(function () {

        $("#PrintForm").submit(function (e) {

            e.preventDefault();

            var email = $("#txtEmail").val();

            $.ajax({
                type: 'POST',
                url: "/xxx/AjaxMethod",
                dataType: 'json',
                data:  {
                email: email,
                },
                success: function (status) {
                    console.log('Send');
                },
                error: function () {
                    console.log('something went wrong - debug it!');
                }
            });

        });


    });
</script><br>

Controller:

        [HttpPost]
        public JsonResult AjaxMethod(string email)
        {

            var SubjectOne = "Print";
            var SendToPrint = "Print@Print.com";

            var errorMessage = "";

//BookingViewModel
            Booking book = new Booking { 
            Email = email,
            };


            try
            {
                // Initialize WebMail helper
                WebMail.SmtpServer = "smtp";
                WebMail.SmtpPort = 25;
                WebMail.UserName = "email@email.com";
                WebMail.Password = "";
                WebMail.From = "email@email.com";
                WebMail.EnableSsl = true;
                WebMail.SmtpUseDefaultCredentials = false;


                // Send email
                WebMail.Send(to: SendToPrint,
                    subject: SubjectOne,
                    body: "email: " + email + "<br>"
                );

            }
            catch (Exception ex)
            {
                errorMessage = ex.Message;
            }

            return Json(book);

        }

Answer 1

Register a submit event on the cloud form just like you do for the print form.

 $("#CloudForm").submit(function (e) {

        e.preventDefault();

        var email = $("#txtEmail").val();

        $.ajax({
            type: 'POST',
            url: "/xxx/AjaxMethod",
            dataType: 'json',
            data:  {
            email: email,
            },
            success: function (status) {
                console.log('Send');
            },
            error: function () {
                console.log('something went wrong - debug it!');
            }
        });

    });

If both the CloudForm and PrintForm are on the same page, you will have to change the id of the textbox inputs so that they both have an unique ID.

Answer 2

Add a class to the two forms:

<form id="PrintForm" id = printFormGroup">

<form id="CloudForm" id = printFormGroup">

and then amend your AJAX to respond to the class:

$(".printFormGroup").submit(function (e) {

This will cover all forms with the same class and will return whatever the user enters.

Answer 3

You need to update your Controller by adding the parameter named formType ,

[HttpPost]
public JsonResult AjaxMethod(string email, string formType)
{
     if(formType == "print")
     {
        //Perform print related stuff
     }
     else if(formType == "cloud")
     {
         //Perform cloud related stuff
     }
}

And updating your AJAX call with data: { email, formType: "print"} for Print form,

 $.ajax({
            type: 'POST',
            url: "/xxx/AjaxMethod",
            dataType: 'json',
            data:  {
               email: email,
               formType: "print"
            },
            success: function (status) {
                console.log('Send');
            },
            error: function () {
                console.log('something went wrong - debug it!');
            }
        });

data: { email, formType: "cloud"} for Cloud form,

$.ajax({
            type: 'POST',
            url: "/xxx/AjaxMethod",
            dataType: 'json',
            data:  {
               email: email,
               formType: "cloud"
            },
            success: function (status) {
                console.log('Send');
            },
            error: function () {
                console.log('something went wrong - debug it!');
            }
        });