I have a small quiz web application to deploy.
Basically I have 2 pages, '1) Quiz page' and '2) Result page'. Upon submitting the Quiz form, it will generate the result on the result page for the user. However I need to prevent user from clicking on back button or keying in Backspace on the keyboard.
I researched the use of 'location.replace()' but have no idea how can I implement it within my form:
<form id="quiz" name="quiz" method="post" action="result.php">
...
<input type="submit" name="Submit" value="Submit" />
</form>
I would like to know if there is any way for me to use location.replace() within the form, or otherwise, any other way that I could prevent/clear user from getting back to the history page.
Thank you.
I have a small quiz web application to deploy.
Basically I have 2 pages, '1) Quiz page' and '2) Result page'. Upon submitting the Quiz form, it will generate the result on the result page for the user. However I need to prevent user from clicking on back button or keying in Backspace on the keyboard.
I researched the use of 'location.replace()' but have no idea how can I implement it within my form:
<form id="quiz" name="quiz" method="post" action="result.php">
...
<input type="submit" name="Submit" value="Submit" />
</form>
I would like to know if there is any way for me to use location.replace() within the form, or otherwise, any other way that I could prevent/clear user from getting back to the history page.
Thank you.
Share Improve this question asked Jul 9, 2010 at 3:23 jl.jl. 2,23912 gold badges49 silver badges61 bronze badges 1- I think the question is misguided. You should not tinker with the browser in this way, especially since there's probably no universal way that works in all circumstances anyway. You should rather state the real problem (why don't you want the user to go back?) and look for a solution that'll solve that problem despite the user hitting the back button. – deceze ♦ Commented Jul 9, 2010 at 3:27
3 Answers
Reset to default 3If you're afraid of users going back checking answers then resubmitting the form, I think you're approaching the problem from the wrong end.
What you need to do is give each quiz "session" a unique ID at startup. Then do a check on form submit to see if the quiz session has already been submitted. If it has already been submitted, deny it.
There is no way to prevent a user from clicking "Back" in his/her browser. One way to acplish the aim is to submit the form using AJAX. When he/she clicks back, it will not go to the quiz but to the previous page.
The following fully-working example uses the jQuery library:
<html><head></head><body>
<div id="form_wrap">
<form onsubmit="send_form(this);return false">
...
<input type="submit" />
</form>
</div>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function send_form(form) {
jQuery.post('result.php', jQuery(form).serialize(), function(data) {
jQuery('#form_wrap').html(data);
});
}
</script>
</body></html>
just submit form in onload event.
<body onload="document.forms[0].submit()">
This will skip adding page to history.