Solved

Link to a form - store origin URL and then return to origin URL after submit

Posted on 2014-01-08
28
398 Views
Last Modified: 2014-05-15
This is what I wish to accomplish:

For example, I have a path like this:
docs/InstallGuide/Docs.htm#Hardware Overview.htm%3FTocPath%3D_____4

At the bottom of this page, is a link to take the reader to... feedbackform.html

When one clicks on this link, the current path will be stored and get 'injected' into one of the form fields. They fill out the standard form information (name/email/message)...

When the person clicks submit, the form information is sent to a set email address and then this person is automatically returned to the above (originating) page.

The form part is easy but I am unsure how to store the originating URL, place it into the form, and then return to the originating URL.

Thank you,
Doug
0
Comment
Question by:sconnell
  • 12
  • 11
  • 3
  • +2
28 Comments
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
I think your best bet is to put the feedback form in a modal popup and submit that using ajax which, upon successful return, closes the modal form. That way, you never leave the original page. Or am I misunderstanding the requirement?
0
 
LVL 4

Author Comment

by:sconnell
Comment Utility
Thanks Tom.

Unfortunately, I cannot do it that way. Due to technical limitations, the form needs to be stand-alone. Additionally, I wish to avoid pop-ups because of the high likelihood of pop-up blockers.
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Avoid popups? Exactly why you would use a modal popup. It's part of the original page.

So instead, the user clicks the link at the bottom and it takes them to a different page. You wish to return to the original page after page two is submitted. Correct?
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
Comment Utility
When one clicks on this link, the current path will be stored and get 'injected' into one of the form fields.

Have you done any of the above yet?  Do you have any code?

When the user clicks a link you can store it in a hidden variable within the form but I would probably use the sessionStorage object to keep track of the originating URL.  The only time I would use a form is if you wanted to store / use the originating URL on a server side script, which isn't the issue here.

  <a href="javascript:UpdateLink()">click me</a>

Open in new window


function UpdateLink() {
  sessionStorage.origURL = document.location.href;
 }

Open in new window


Then on your feedback page you can access the originating URL by simply accessing the sessionStorage object

sessionStorage.origURL;

Open in new window

0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
btw Tom is referring to something like this: http://jqueryui.com/dialog/

essentially you're just showing an element such as a div on top of everything else.  Emulates a popup but isn't really one.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
What server language are you using to send the email?  In PHP, you can send a code in a query string that id's the page you're coming from and use it to do a 'header' redirect when the email is sent.
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Simple mockup of a modal popup comment form that uses jQuery Dialog and ajaxSubmit. This combination avoids leaving the original page to submit the form. Popup blockers will not block this.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script>
$(document).ready(function(){
	$('#formOpener').on('click', function(){
		$('#dialog').dialog();
	});
	
	var myoptions = {
		success: function(){
			$('#dialog').dialog('close');
			alert("Thanks for the comment!");
		},
		clearForm: true,
		resetForm: true
	};
	$('#myForm').submit(function() { 
	 	$(this).ajaxSubmit(myoptions);
		return false;
	});
});
</script>
</head>
<body>
<button id="formOpener">Open Form</button>
<div id="dialog" title="Basic dialog" style="display:none">
	<form id="myForm" action="formhandler.php" method="post"> 
    	Name: <input type="text" name="name" /> 
    	Comment: <textarea name="comment"></textarea> 
    	<input type="submit" value="Submit Comment" /> 
	</form>
</div>
</body>
</html>

Open in new window

0
 
LVL 4

Author Comment

by:sconnell
Comment Utility
Hello all,

I really appreciate the effort in helping me with this EE Q. Thanks, I'll review the answers over this weekend.

Best,
Doug
0
 
LVL 5

Expert Comment

by:Alex Ene
Comment Utility
If you also own the feedback form you can use server side redirects.
For php it's as simple as adding something like this at the end of your form processing script on server.

<?php

   header( 'Location: '.$_POST [ 'input_field_that_stores_origin_url' ] ) ;

?>

Open in new window


Every language has its own method to do that.
0
 
LVL 4

Author Comment

by:sconnell
Comment Utility
Thanks Alex, I may not have the ability to incorporate php code. I'll certainly consider it though.

Right now, I am experiencing some technical challenges... I be testing the above suggestions within about four days.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
Did you end up using the jQuery dialog?
0
 
LVL 4

Author Comment

by:sconnell
Comment Utility
Hello all,

Thank you for your suggestions. Unfortunately, none of them will work for me.

Rob: I cannot add functions to the auto-generated code
Tom: The line "<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">"
fails to compile. But just as important, I cannot have external links.

Perhaps I didn't provide enough information. I am developing my HTML source in a tool called MadCap Flare... which auto-generates HTML. It HTML5 web help output. Although there is a lot of flexibility for tweaking the code, there are many limitations.

The constraints are:
- Cannot have external links
- Works stand-alone
- Cannot have any server-side processing (i.e. php)

This is the code I need to modify:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="3" MadCap:lastHeight="919" MadCap:lastWidth="725">
    <head>
		
    </head>
    <body>
        <MadCap:bodyProxy />
        <p>&#160;</p>
        <p class="no_margin">
            <br /><font color="#98B347">____________________________________________</font></p>      
        <p class="no_margin"><span style="font-size: 8pt; color: #98B347;">Help us improve this information. Please send feedback to <a href="mailto:xxxxx@xxxxx.com">xxxxx@xxxxx.com</a></span>
        </p>
        <p>&#160;</p>
    </body>
	
</html>

Open in new window


If you are wondering why I have a hand coded line... I can't even use <hr> :(

But I can add:
<a target="_blank" href="http://url">Help us improve this information. Click here to send feedback</a><br />

Open in new window


What I was hoping for is if I used the above 'click here' that I could employ code in the destination code in order to return to the originating page.


thanks again.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
http://webhelp.madcapsoftware.com/flare9/Default.htm

Given it's a very specific product for creating HTML, you are better off exploring their suppot channels
0
 
LVL 4

Author Comment

by:sconnell
Comment Utility
Thanks Rob... been there, but.... now I think I gave too much information.

Basically, all I need to know is if I replace:
<a href="mailto:xxxxx@xxxxx.com">xxxxx@xxxxx.com</a>

Open in new window


With something like:
Click <a href="http://www.xxxxx.com/feedback.htm">here</a> to submit feedback.

Open in new window


Is there a way to remember the source URL and then return to it.

*WAIT* I just remembered... It is rather simple (I think).

Why can't I simply add something like this to the destination page:
<INPUT TYPE="button" VALUE="Return to help page" onClick="history.go(-1);">

Open in new window


Or in Javascript
<a href = "javascript:history.back()">Return to help page</a>

Open in new window



Remember, the destination (the feedback form) has fewer limitations (except no server side processing). Meaning, my form can be simple perl script.

That should work, right? Or are the above examples limited to certain browsers?

Thanks for your patience. :-)
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
Your examples will work but I was under the impression that you couldn't add code or javascript.  You said yourself you couldn't use a <hr> but that could be because it's one of those elements being phased out of html.

So you can add script but just not have external links to yhe scripts, they have to be part of the page?
0
 
LVL 4

Author Comment

by:sconnell
Comment Utility
Hello Rob,

I am sorry if I wasn't clear. I was trying to explain that there are two components:
1) The originating help content, generated by MadCap.
    I posted the originating content that I needed to modify on "2014-02-26 at 15:39:29"
    this is the code that won't accept javascript or even <hr>

2) The form is the destination piece. This is outside of Flare so I can do anything so long
    as it doesn't call external servers or do any server-side processing. This means that
    perl, javascript, html5, css3 are all good to use.

I think I am good. I can do a basic, no frills perl script but....

for bonus points, can you direct me to a slick html5/css3 contact form (with html4/css2 fall back)? Otherwise, I'll stick to perl script for now.

Thanks again.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
Unless I've missed something you won't be able to use perl, it's a server side scripting language but ok to use the others.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
Can't help much on the "slick" contact form as the ones i know use javascript frameworks like jquery.  You said you can't have external linnks but can you have links to a javascript or css file that's on your server?
0
 
LVL 4

Author Comment

by:sconnell
Comment Utility
>Unless I've missed something you won't be able to use perl, it's a server side scripting
> language but ok to use the others.

Oops, my bad. Of course.

>You said you can't have external linnks but can you have links to a javascript or css
>file that's on your server?

Correct. The server doesn't have a connection to the outside world. And for various reasons, it can't process anything server-side, like php (and of course perl).
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
My second question is more about accessing local files on the server.  You can download jquery for example and store it on your server.
e.g.
<script src="scripts/jquery.js" />
0
 
LVL 4

Author Comment

by:sconnell
Comment Utility
Hello Rob,

jquery works.

Speaking of jquery.... I was recently looking at some great ideas that use jquery. Some of the examples require php but I think there are a few that will work for me. Check them out:

http://www.tutorialchip.com/jquery/20-useful-jquery-contact-forms-tutorials/

http://www.redfoxmagazine.com/30-awesome-jquery-contact-form/
(a number of repeats)
0
 
LVL 4

Author Comment

by:sconnell
Comment Utility
Wait a sec!

Sorry folks, I had forgotten the main reason for posting this question!

I originally wanted to record the URL before going to the form page.

If I do something like this,
Click <a href="http://www.xxxxx.com/feedback.htm">here</a> to submit feedback.

Open in new window


On the form page, I want to insert the page the visitor came from into the form.

I know I can return to where the user came from by issuing this:
<a href = "javascript:history.back()">Return to help page</a>

Open in new window


Is there a way to cleverly query the value of history.back()?

Or perhaps another way?  But please remember, I am extremely limited to what I can do on the origin page.

Thank you
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
You can't... it's deemed a security issue.  You can use document.referrer and see if that gets you what you want but you won't be able to access anything else.
0
 
LVL 4

Author Comment

by:sconnell
Comment Utility
I'm doing some experimenting with a few ideas I have, I will finalize this EEQ by end of week.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
No problem - keen to see what you come back with
0
 
LVL 4

Author Comment

by:sconnell
Comment Utility
Sorry folks...

I had to put this project on-hold because of other pressing matters. I'm back on this and I anticipate looking at this issue sometime before the end of the week.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
No problem. I'm still monitoring.
0
 
LVL 4

Author Closing Comment

by:sconnell
Comment Utility
Thank you to everyone. Rob, you answer was the closest to what I required.

Sorry for taking so long to complete this EE q.

:-)
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now