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.
If 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 accomplish 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.com/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.
Related
I'm doing a Quiz project: The idea is to implement almost 25 questions in which each question occupies each HTML page with 4 radio buttons and a submit button and a reset button as well.On clicking the submit button it should take the user to the next page as well as submit the data to the server. How to achieve this dual behaviour?
I tried this:
<form action="cba.php" method="post">
<a href="abc.html">
<input type="submit" value="submit">
</a>
</form>
But this does only one purpose: Acting as a link without submitting the data.
If you just want to redirect the user after submitting the form, you can use :
header("Location: yourlink");
in the php script you called cba.php.
Otherwise, i'm not sure it is possible to redirect the user before sending him the php script page.
As mentioned, it would be a smoother experiance to handle this via ajax, but it can be acheived in just php by creating a redirect in the form processing code (as mentioned in comments and a current answer).
I believe your issue is with the fact that the same proccessing code (cba.php) will be called every step of the way, so you need a way for each quiz section to define the next section.
This can be done with a hidden field instead of the link code you tried:
<form action="cba.php" method="post">
<input type="hidden" name="next-page" value="abc.html">
<input type="submit" value="submit">
</form>
Then i cba.php, you redirect to the value contained in this hidden field:
//save the data from the form, then
header("Location: " . $_POST['next-page']);
I have an input like this:
<input value="<?php echo $formdata['title'] ?>" type="text" name="title" id="Editbox2">
This is an edit page, I load database data into fields with echo, replace them, and hit submit to update them.
But when I hit submit it refreshes the old data onto browser's fields, how can I prevent this?
Submit your form using ajax request with jquery submit.
Use action="javascript:;" for the form tag
You need to handle the script with javascript, then prevent the default behaviour, which is refreshing the page. Here is an example:
*I haven't tested this, but from what I recall this is what I used to do. Let me know if it doesn't work, I'll give other suggestions.
<form>
<!-- elements inside -->
<input type="submit" id="submit-btn" value="Submit"/>
</form>
and in your javascript have the following:
<script>
$("#submit-btn").click(function(e){
e.preventDefault();
// handle form here with your JS
});
</script>
How can I avoid the the browser form-resubmission alert?
This question seems to have been discussed a lot here on SO, for example:
Preventing form resubmission
Prevent Back button from showing POST confirmation alert
Never ever respond with a body to a POST-request
What I do not get from the previous discussion, is how I can use the posted data and incorporate it into the html. The previous links discuss how to use the php header function to send a get request to itself. But when sending this get request, the posted data will no longer be available to the new page, (since we cannot use the php post method..)
I would like to do this without using the php or javascript session storage technique (or saving the posted data to a temporary mySQL database).
For a simple example:
<html>
<body>
<form action="post.php" method="post">
User name: <input type="text" name="user"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
where post.php is:
<html>
<body>
<?php
echo "<p>".$_POST['user']."</p>";
?>
</body>
</html>
Pressing CTRL-R in google chrome on the second page brings up the alert.
Do a redirect from post.php. Save data in session or in database and retrieve from redirect page.
Example Scenario:
Submit the form
Save the user record to db, get the id of the new record e.g. in $id
redirect using header, something like:
header('Location: result.php?user_id='.$id);
get the user record from db, with the provided id and show it to the
user.
Use this:
<script>
if(window.history.replaceState)
{
window.history.replaceState(null,null,window.location.href);
}
</script>
you may rewrite the browser history object
history.replaceState("", "", "/the/result/page");
See this
What I want to try and make is an landing page with this functionality that includes an input for a invite code for users use, which once successful allows you to register or log in.
But I have no idea how I would make a scripts in MySQL and PHP for the invite code, which is the main bit I need help with.
What I want to happen ideally is the when the input is filled in successfully - a registration form appears (using jQuery) and a login button is enabled on the same page.
I know this isn't a a lot to go on but any help/ fiddles or idea would be greatly appreciated
Sam
after filling the correct code. put this jquery:
JS:
$(document).ready(function(){
//if correct code THEN $('login_div').show() ;
}) ;
HTML:
<form id="login_div" style="display:none">
<input type="text" name="txt_name" />
<input type="text" name="txt_pass" />
</form>
Below is my code for a simple form in the create_session.php page. I am using the forma action method to navigate the user to the "QandATable.php" page when the user submits the form. But what I want is that if the user types in the number 1 in the number of sessions textbox, then navigate to the QandATable.php page wheh the user submits the form, else if it is any other number, then when the user submits the form, I want it to go back to the "create_session.php" (Back to its own page). Imagine it like you click on the submit button and it refreshes the page so it goes back to being a blank form, thats what I want to do if the number of sessions textbox contains a number which is bigger than '1'. How can this be done? I am using php and jquery code as well as basic html.
Thank You
<form action="QandATable.php" method="post" id="sessionForm">
<p><strong>Number of Sessions you Require:</strong> <input type="text" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" maxlength="5" /></p>
<p><input class="questionBtn" type="submit" value="Prepare Questions" name="prequestion" onClick="myClickHandler(); return false;"/></p> <!-- Prepare Questions here-->
</form>
At the very top of the QandATable.php script add:
if ($_POST['sessionNum']!=1) {
header("Location: create_session.php");
exit();
}
But as others have mentioned in the comments, you might as well just make the form submit to the create_session.php page and if it's successful then redirect to the next page.