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.
Related
I'm using ajax to create list of replies.
In the end of the list I added textarea form that allow user to add reply (also with ajax).
The problem is that i call to my JS in my main PHP page so when user want to submit reply the page doesn't "know" the js code. If i add the js to the ajax php file/page the code will work but then it will be duplicated many times and when user will submit form the text will be submitted many times...
In my console i see that the JS file duplicate every time i load the replies list
How can i prevent it?
Disable the submit button right after user presses it once. Using jQuery:
$("#button").attr('disabled','disabled');
Make sure to remove disabled attribute on AJAX error so user can re-submit the form with new data. You can remove disabled attribute like this:
$('#button').removeAttr('disabled');
[improved]
if you want to not repeat data when navigation or F5 press, simply free the $_POST vars after doing whatever you want, and check if isnt set (before clean, of course) redirect you wherever you want. example:
/* HERE do the job with ajax response. */
if(!isset($_post['foo'])) header('Location: wherever.php');
$_POST['foo']=NULL;
If you're using $_GET... don't do it, use $_POST... $_POST is your friend.
Finaly ensure that if you press F5, you don't re-send form vars by post (otherwise you will get the same). If it's happening, clear your inputs with jQuery on page load.
$('#inputID').val('');
I have a standard PHP form that has a series of checkboxes, radio, selects and text. The form works fine and proceeds to a search results page. My problem is that when you click Back browser in any browser the search page shows the previous selects. How do I ensure that the back button displays the form as if its the first time the visitor visits the page?
You can reset form on window.onload or $(document).ready(for jQuery)
function formReset()
{
document.getElementById("formId").reset();
}
you can do one thing.
Using jquery onReady function you can make form reset.
So, whenever user will press back button of browser page will be reload and onReady function your code for form reset will work.
$(document).ready(function() {
$('#myform').get(0).reset();
});
You shouldn't reset it automatically. Provide a reset button.
The back button returns the user to the previous page, in the state he left it. This includes the settings of any form. I'm relying heavily on this feature, cannot count the times this back button saved me from loosing my efforts that went into a textbox for answering questions...
It's a different game if the user is on your result page and clicks a link that takes him to the search page again, but does not use the back button.
I am wondering if it is possible to to resubmit a form with a button click that calls up a javascript command.
So this is basically what I'm trying to do -
page 1: form; action = page2.php
page 2: generate a randomized list according to parameters set by page 1
I would like to place a button on page 2 so that on click, it would be as if the user has hit F5, and a new list would be generated with the same parameters.
I found a lot of help on Google with people trying NOT to get this to happen, but I'm not sure how to actually get it to happen.....
Thank you!
You could use location.reload(true); to refresh the page.
<button onclick="location.reload(true);">refresh</button>
you only need to use. location.reload() instead of location.reload(true). since this will not disable caching for the reload but using true as the parameter will.
here is the reference. How to refresh a page in jquery?
EDIT: why not just use hidden input field and preserve the values and fetch it anytime you want to?
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.
Just using php, is it possible to
create a button via html that reacts to the user's input, for example, if the user clicks the button 4 times, something is suppose to happen, or do I need javascript.
Likewise if the user clicks the button twice or three times something different is suppose to happen, is this possible, if so, what do I need to read?
Yes it is possible with just PHP. You could carry the state of what has been inserted along with sessions or put it back into the form so that it’s submitted with the next insertion.
Do you mean as in real time? In that case, no, it is not possible.
You could use sessions to track submits, but without the use of of JavaScript (Ajax) the user would have to watch the page reload for 4 clicks. If your going to use Ajax you might as well just code some JavaScript to send data based on click sequences.
In reality you need JavaScript.
If the button is going to do an action without refreshing the webpage, then PHP can never do that for you.
Likewise, if you don't mind the page refreshing each time the button does an action. You can wrap the button in a form that posts GET/POST(to be secure) values for the PHP script to read.
<?
$times = $_GET['timesClicked'];
$times++;
?>
<form method="get" action="your script">
<input type="hidden" name="timesClicked" value="<?= $times; ?>">
<input type="submit" value="your button">
</form>
This is ideal use-case for using Javascript.
You will need to bind your custom function to elements onclick event.
Here is a sample code you can include into your html code. It assumes you've specified button id:
<script>
var clicks = 0;
function yourfunction() {
click++;
if (clicks == 4) alert ('Your clicked 4 times!')
}
document.getElementById('elementId').onchange = yourfunction;
</script>
If it's acceptable to you for the browser to load the page anew with each click, then, yes, this is quite possible with PHP alone, using either a cookie, a server-side session, the URI query string (i.e., ?num_clicks=2 at the end of the URL), or a hidden form field to track the number of clicks. If you really wanted to, you could even do it in plain HTML by creating a separate page for each stage/state and looping through them, advancing one step on each click.
If you want the page to react to the click immediately without contacting the server or if you want to refresh only a portion of the page without reloading the whole thing, then, no, that would require JavaScript.