Skip to main content
W
weezerboy
Inspiring
January 16, 2018
Answered

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

  • January 16, 2018
  • 2 replies
  • 3004 views

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?

This topic has been closed for replies.
Correct answer WolfShade

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,

^ _ ^

2 replies

WolfShade
WolfShade
Braniac
June 4, 2018

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

V/r,

^ _ ^

WolfShade
WolfShadeCorrect answer
Braniac
January 17, 2018

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,

^ _ ^

W
weezerboyAuthor
Inspiring
January 17, 2018

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

WolfShade
WolfShade
Braniac
January 17, 2018

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,

^ _ ^

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices