[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 490
  • Last Modified:

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

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
S Connelly
Asked:
S Connelly
  • 12
  • 11
  • 3
  • +2
1 Solution
 
Tom BeckCommented:
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
 
S ConnellyTechnical WriterAuthor Commented:
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
 
Tom BeckCommented:
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
RobOwner (Aidellio)Commented:
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
 
RobOwner (Aidellio)Commented:
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
 
Dave BaldwinFixer of ProblemsCommented:
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
 
Tom BeckCommented:
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
 
S ConnellyTechnical WriterAuthor Commented:
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
 
Alex EneCommented:
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
 
S ConnellyTechnical WriterAuthor Commented:
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
 
RobOwner (Aidellio)Commented:
Did you end up using the jQuery dialog?
0
 
S ConnellyTechnical WriterAuthor Commented:
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
 
RobOwner (Aidellio)Commented:
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
 
S ConnellyTechnical WriterAuthor Commented:
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
 
RobOwner (Aidellio)Commented:
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
 
S ConnellyTechnical WriterAuthor Commented:
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
 
RobOwner (Aidellio)Commented:
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
 
RobOwner (Aidellio)Commented:
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
 
S ConnellyTechnical WriterAuthor Commented:
>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
 
RobOwner (Aidellio)Commented:
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
 
S ConnellyTechnical WriterAuthor Commented:
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
 
S ConnellyTechnical WriterAuthor Commented:
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
 
RobOwner (Aidellio)Commented:
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
 
S ConnellyTechnical WriterAuthor Commented:
I'm doing some experimenting with a few ideas I have, I will finalize this EEQ by end of week.
0
 
RobOwner (Aidellio)Commented:
No problem - keen to see what you come back with
0
 
S ConnellyTechnical WriterAuthor Commented:
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
 
RobOwner (Aidellio)Commented:
No problem. I'm still monitoring.
0
 
S ConnellyTechnical WriterAuthor Commented:
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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 12
  • 11
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now