Submit form without refreshing page or pass 2 values to another page without refreshing page

[Patrick GH]

I have a page with a 40 question form and at the end of it, there is a submit button.

Once the Submit button is selected the 40 form fields data gets inserted into to my DB and the user gets cf-located to another page.

It works great. I've done this a million times.

But now I need to add another button or image to the page that reads (Email Me Help) that when clicked will

1. NOT REFRESH THE PAGE, as the user may still be entering into the form
2. That will pass 2 hidden values to a email.cfm page -  that email.cfm page will then send a cfmail to our support and they will reach out to the user. 
   Also, the button or image needs to change to alert the user that their "Email Me Help" request was sent.

This is so when a user is filling out the form if they need help. They can click "Email me help" and we can respond while they still have the form open.

I cant get the form to process without refreshing the page.

I've tried iframe, but can't get my hidden values into the iframe page and I have tried jquery. Jquery seems like overkill as I only have 2 hidden fields and no form validation to pass to the email.cfm page.

Any suggestions on how to do this? Did I explain it well enough? Do I just need to rethink the logic on all of this?

[WolfShade · Accepted solution]

AJaX to the rescue! 

Easier to do if you are using jQuery, but plain JavaScript can do it, too - you just have to manually build your XHR.  Use AJaX to POST the two values to email.cfm, and use the .done() to populate a DIV with the results.

HTH,

^ _ ^

[Patrick GH]

Hi WolfShade. Can you direct me to any examples of this?

[WolfShade]

I did some looking around on Google and found a few things.

Here is an anti-jQuery blog post on how to do it in both jQuery and vanilla JS.

Here is a very jQuery friendly explanation of posting form data via AJaX.

The forms I have placed on our public site all use AJaX to submit form data and manipulate the DOM with responses.  You can View Source any form that you find and see how I do it, as well.

HTH,

^ _ ^

[WolfShade]

Thank you for marking my answer as correct.  I do appreciate it.

V/r,

^ _ ^