Highlighted

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

Participant ,
Jan 16, 2018

Copy link to clipboard

Copied

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?

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,

^ _ ^

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Participant ,
Jan 16, 2018

Copy link to clipboard

Copied

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?

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,

^ _ ^

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 16, 2018 0
LEGEND ,
Jan 17, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2018 0
Participant ,
Jan 17, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2018 0
LEGEND ,
Jan 17, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2018 0
LEGEND ,
Jun 04, 2018

Copy link to clipboard

Copied

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

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 04, 2018 0