After someone completes a form on our website and clicks on submit s/he is directed to a landing page. I would like to change that flow so that upon submitting (1) URL1 opens as new window; and (2) user is redirected from current form page to URL2.
Can you help?
current code snippet -
if(! isset($RedirectOnSuccess))
$RedirectOnSuccess = 'oldURL';
I'm a tech newbie so need your help in piecing it together. I am using MODx and the web page itself calls the php script with the following -
[!FORM_SNIPPET?
&RedirectOnSuccess=oldURL
!]
do it with javascript. http://www.tizag.com/javascriptT/javascriptredirect.php & http://www.pageresource.com/jscript/jwinopen.htm
It likely depends on the context of your popup, but rather than using a traditional popup you might consider something less invasive and prone to ad-blocking such as a lightbox or other ajax-based display tools within the page. You can trigger the lightbox from a click event on the submit button, display your message with it, and then submit the form on close or confirm.
Avoid solutions where viewing the form result page is dependent on javascript as some (uncommon) users may have it disabled. If it is implemented as above, such users would miss your popup but the form would still go through.
You could use jQuery to implement this without modifying the php code that MODx uses to generate your form, and instead attach a click event to the form's submit button by putting javascript in the xhtml header. For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="/colorbox/jquery.colorbox.js"></script>
<script type="javascript">
$("#FormID.input[type=submit]").click(function(e) {
/* prevent form from submitting */
e.preventDefault();
e.stopPropagation();
/* on colorbox close, submit form */
$(document).bind('cbox_close', function(){
e.submit(); // submit the form on close
});
/* open the colorbox */
.colorbox({href:"http://example.com/url1"});
});
</script>
I used ColorBox here, but the same idea should apply to other lightbox alternatives. I didn't browser test this, so be sure to test and adapt as necessary.
Given problems with popup blockers your best bet is to target a new window with HTML on the form upload.
<form target="_blank">
Then using JavaScript (perhaps via opener.location.href in the popup), you can redirect the main window to another URL.
Related
I am currently submitting a form using form action to a php script and i was going to implement ajax form submission also.
But a thought came to my mind that wouldn't it be nice to know if the client's browser has javascript enabled or disabled and submit the form accordingly as i don't want the no-javascript users to view a page that says "Enable Javascript or something"! as i have used both client and server side validations.
So, how should i know that a client has javascript and let him submit form by ajax and vice versa?
I found many QA's related to redirecting users to a page that says "Javascript disabled" and they mostly talked about tags.
I would appreciate hearing you guys and your suggestions. Thankyou :)
Use a form with a submit button.
In your javascript script put an handler on it, and call the preventDefault function to let your ajax code do the job.
So if javascript is enabled it will submit with ajax. If not it will submit it the default way .
EDIT:
Here is a jsfiddle to illustrate it: http://jsfiddle.net/CTwx2/
Basically the default behavior of a submit button is to send the data to the address indicated in the form tag.
With the handler defined in javascript & jquery, you stop this behavior and send the data by yourself through an ajax request (http://api.jquery.com/event.preventDefault/)
You will have to have 2 versions of your site and redirect accordingly using :
<noscript>
<meta http-equiv="refresh" content="0;url=noscript.html">
</noscript>
OR
Wrap your form in your <noscript> tags, and if javascript is enabled disable that form-
I have made a simple home-made lightbox. The lightbox contains forms which allows the user to submit data. I placed a SIMPLE form on my SIMPLE lightbox, and I noticed that when I submit the form the lightbox closes automatically. Why is it doing this, and how can I keep this from happening? I'd like to submit a form on the lightbox and keep the lightbox unaffected.
this is not possible if you submit the form using php it will submit to another page so it will refresh if you want to stay on the page you will have to look into using AJAX to submit the form and get the server response
There are some good technology's out there to do this like jquery AJAX
http://api.jquery.com/jQuery.ajax/
I have seen a few of these floating about however I want to use it different to the way they posted on here.
I have all my server validation (for register page) at the top of the page so the form submit looks like (im on index.php so it just does it's self):
However, the index.php page has a login button and a register button and the form pops up depending which you click.
However i need that div to act like a page, so you submit and it reloads the div as if it were a web page if that makes sense?
Thanks for reading :-)
I have a form with a save button, but i want users to be able to come back to the form at anytime to finish filling it in. I would like to know if its possible to bypass the save button, so the user fills part of the form in, as soon as they navigate away from the page or close their browser it will save the form automatically to resume next time.
What would be the best way to implement this? Thanks in advance for any help, its much appreciated.
I have seen some javascript examples but have seen issues with cross browser support.
You can use an AJAX Call on unload like this:
window.onunload = myfunc();
function myfunc() {
alert("i am closing now");
// Your AJAX Call that saves your data (e.g. all input fields)
}
Jquery plugin, works a treat for autosave function.
http://plugins.jquery.com/project/jquery-autosave
More info here:
http://rikrikrik.com/jquery/autosave/#examples
include plugin:
<script type="text/javascript" src="scripts/jquery.autosave.js"></script>
$('form.formnamehere').autosave({
'interval': 20000
});
Auto submits form without page refresh.
I have set my interval to one second (1000) so the form gets saved every second. Therefor if the user exits the form after editing then it has autosaved.
I have this at above the body tag in my page --
<script type="text/javascript">
$(document).ready(function() {
$('#button').popupWindow({windowURL:'http://something',centerBrowser:1,width:400,height:300});
});
</script>
Is there a way to make this popup happen without the user actually clicking a button -- programmatically w/ code inserted into the middle of the page with php on page load?
Add the following next.
$("#button").trigger("click");
Or put it all on on chained line:
$('#button').popupWindow({...options...}).trigger("click");
For what it's worth, you can invoke this from a non-rendered element:
$("<div></div>").popupWindow({..options..}).click();
I think for security reasons a lot of browsers will not open a popup window without some kind of user action.
popupWindow is hard-coded to work with links, and only responds to "click" events. That said, if you want the popup to appear on page load, you could try editing line 6 of jquery.popupWindow from this;
$(this).click(function(){
to this;
$(this).ready(function(){
add an id to your body element;
<body id="popuptrigger">
and call the plugin;
$('body#popuptrigger').popupWindow({ ... });
This is untested, but even if it works it's not a very elegant solution. I'd suggest looking around for a popup plugin that allows you more flexibility. I use jqModal to load internal url requests for popup forms and can throughly recommend it. Your mileage mey vary though, so do a google search for "jquery modal" and check out some alternatives.
I'd suggest using a jQuery UI Dialog. That way you won't have to worry about how different browsers handle popups differently.
As stated by others, some browsers (notably Microsoft Internet Explorer) will refuse to open a JavaScript popup window unless it was triggered as a result of user interaction. You can easily fake this with a bit of jQuery:
// Create a 'fake' a tag, this will never be added to DOM.
$('<a href="#" />')
// Register a click handler which will open a new popup window.
.click(function () {
window.open(url, name, options);
})
// Simulate the click in jQuery - this will open the popup window.
.click();
I can't comment on the accepted solution, so I'll just post this here - regarding Jonathan Sampsons last proposition (which is really clever): on latest Firefox & Chrome the element, that triggers the click event, must be visible. So you can't really generated a non-rendered element.
Also, if you're using an element from your page, just choose one that doesn't have any other click event defined yet - otherwise all other click events will trigger, which might not be the desired outcome.