Webmail confirmation without new page

Question

I have used this method: http://www.asp.net/web-pages/overview/getting-started/11-adding-email-to-your-web-site to allow website users to submit Name and Email.

Using this method I have a simple form on one page, which then opens a new page to process the form, sends the email and returns a success message. This works fine in itself, but I would prefer to avoid opening the new page for processing. (I tried putting all the code on the start page, but then it sends a mail whenever the page loads)

I would much prefer to either replace the form's div with the success message, or pop up a modal with the success message, but I'm not sure how to go about doing this.

I tried putting the processing code in a modal (bootstrap 3), but I don't know how to pass the variables (user input) to the modal (modal being in a separate file to avoid the aforementioned sending on page load behavior)

The processing page (ProcessRequest.cshtml) is as follows:

@{
var customerName = Request["customerName"];
var customerEmail = Request["customerEmail"];
var sub = Request["sub"];
var errorMessage = "";
var debuggingFlag = false;
try
{
    // Send email
    WebMail.Send(to: "[email protected]",
        subject: "Form submitted on HMD. Name: " + customerName + " Email: " + customerEmail,
        body: "Submitted details: " + Environment.NewLine + "Name:  " + customerName + Environment.NewLine + "Email:  " + customerEmail + Environment.NewLine + "Subscribe:  " + sub, isBodyHtml: false
     );
}
catch (Exception ex)
{
    errorMessage = ex.Message;
}
}
        <p>Thankyou for submitting your email, <b>@customerName</b>. 
        <a href="~/Default.cshtml" class="btn btn-success">Back</a>

And the form itself is as follows:

<form class="form-inline" method="post" action="~/ProcessRequest.cshtml">
                            <div class="form-group  col-xs-9">
                                <input type="text" placeholder="Name" name="customerName" class="form-control txt-primary clearable" />
                            </div>
                            <div class="form-group col-xs-9">
                                <input type="email" placeholder="e-mail" id="customerEmail" name="customerEmail" class="form-control txt-primary clearable" />
                            </div>
                            <button type="submit" value="submit" data-target="#modal" class="test input-append btn btn-primary col-xs-2"><span class="glyphicon glyphicon-ok"></span></button>
                            <div class="form-group col-xs-12">
                                <input id="checkbox" type="checkbox" name="sub" value="Yes" checked/> Subscribe to newsletter
                            </div>

                        </form>

I would greatly appreciate any advice on how to achieve this! I'm not sure whether I should be trying to use AJAX or some other method, I've yet to learn how to use AJAX so if this would be my best option, a pointer to a decent (preferably comprehensible for beginners) tutorial would be nice :)

UPDATE Ok, So I am attempting to use an iframe as suggested... But so far have not been able to get the data to submit. I've not used iframe before, so I'm not sure what I'm doing! I have added a hidden iframe like so:

<iframe class="hidden" name="iframe_submit"></iframe>

I'm not sure where I should be pointing the form at the iframe. Previously I had the action of the form pointing at ProcessRequest.cshtml. I have changed this to formtarget="iframe_submit" is this correct?

I changed the submit button to use a href="~/ProcessRequest....

Now the email is being sent, so the iframe must be loading the ProcessRequest page, however the information from the form is not inserted in the email.

Answer 1

Thanks @mplungjan this worked nicely..

Solution: Hidden iframe

<iframe class="hidden" name="iframe_submit"></iframe>

with

<form class="form-inline" method="post" target="iframe_submit" action="~/ProcessRequest.cshtml">...</form>

and added to the ProcessRequest file:

<script>alert("Thankyou for submitting your email, @customerName.")</script>

Your assistance is very much appreciated, especially since I learnt a new trick!