I'm maintaining a website which has a series of forms that user submits. Each form does an HTTP POST to the server, which then renders the next form to the browser.
i.e., index.html contains a <form action="form1.php" method="post">, and then form1.php renders a <form action="form2.php" method="post">, etc.
When I navigate using the back button from say, form2.php to form1.php on my iPhone, the request is an HTTP GET for form1.php, rather than a resubmit using HTTP POST.
This happens intermittently, but more reliably if I minimize safari and then re-open it again before I hit the 'back' button.
Note: This happens whether I'm using chrome or safari on my iPhone.
My expectation was that these requests would be resubmitted using POST. Is that wrong?
I have a small repro set up here:
http://kong.idlemonkeys.net/~shaun/fi/
Sources -- sorry about some of the extra cruft, but they should convey the point.
index.html:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="start-form" method="post" action="form1.php">
<input type="hidden" name="foo" value="bar"/>
</form>
<div id="click-me" style="width: 200px; height: 200px; background-color: pink;">Click me</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#click-me').click(function() {
$('#start-form').unbind('submit').submit();
});
});
</script>
</html>
form1.php:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<?php if($_SERVER['REQUEST_METHOD'] !== 'POST') { ?>
<h2> you're doing it wrong </h2>
<?php } ?>
<h1> This is form 1: <?php echo time(); ?></h1>
<h1> You requested this page with: <?php echo $_SERVER['REQUEST_METHOD'] ?></h1>
<form id="form1" method="post" action="form2.php">
<button type="submit" value="submit" name="submit">Submit</button>
</form>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#form1').submit(function () {
alert('starting form submit');
});
});
</script>
</html>
form2.php:
<html>
<body>
<h1> This is form 2: <?php echo time(); ?></h1>
<h1> You requested this page with: <?php echo $_SERVER['REQUEST_METHOD'] ?></h1>
<form method="post" action="form3.php">
<button type="submit" value="submit" name="submit">Submit</button>
</form>
</body>
</html>
Repro Steps:
Load http://kong.idlemonkeys.net/~shaun/fi/ in safari or chrome on iOS
Click the 'click me' button, which submits a POST to form1.php
Click the 'submit' button, which submits a POST to form2.php
Minimize safari (i.e., go to the home screen), then bring it back up.
Hit the 'back' button, notice that form1.php now informs you it was fetched via HTTP GET
I've been able to confirm the sequence of events using wireshark
My expectation was that these requests would be resubmitted using POST. Is that wrong?
I believe it is wrong. POST requests may not be idempotent, i.e. issuing the same post multiple times may change the state of the server each time, and that can be dangerous. The browser has no way of knowing whether you really intend to resubmit the form that got you to the current page, for example, so it can't assume that it's safe to send the POST again. Instead, it uses a GET because a GET won't affect the state of the server.
This very StackOverflow page is a fine example. After I click the 'save' button at the bottom, my browser will no doubt issue a POST to send my answer to the server, and then show me the resulting web page that includes my new answer. If I hit the back button, should my browser again issue the POST? That could result in a whole new copy of my answer being added, which doesn't seem like the right thing to do at all. Using a GET, on the other hand, will safely reload the previous page without resending my answer.
It is probably a good idea to always send HTTP 302 redirect after POST то avoid this sort of inconsistent browser behavior http://en.wikipedia.org/wiki/Post/Redirect/Get
Related
I want to send Form data to the same page using classic ASP.
Code:
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Form</title>
</head>
<body>
<%
'Classic ASP:
Dim test
test = request.form("CtrlTest")
response.write "result = '" & test & "'<br>"
%>
<!-- alternative: <Form name="test" method="POST" target="_self" > -->
<Form name="test" method="POST" action="" >
<a href>ClickThis</a>
<input type="hidden" name="CtrlTest" value="ATest" />
</Form>
</body>
</html>
After clicking I had expected the result to be:
"result='ATest'
ClickThis"
But it is:
"result=' '
ClickThis"
How can I read the posted data?
Tested in localhost mode:
Chrome OK,
IE11: Error 403.14.
This makes me wonder how the POSTing happens:
The POST data is sent to a server that passes the data on to the target Receiving ASP or PHP page.
When the Receiving page opens first time after the transmission the data is available for request.
If the Receiving page is the same as the Sending page (e.g. target =”_self”) the data is immediately available in the page (if it is an ASP or PHP page).
The next time the Receiving page opens the data is no longer available.
Is this correct?
And this should work OK even if I am in localhost mode, and not reaching an actual server?
If the Request lines in the Receiving page lies in a file that is #included into the Receiving file – will it still work?
Links do not submit forms. They just go to the URL in the href attribute.
To submit a form, use a submit button.
<button>Submit</button>
I have read many topics regarding this issue but almost all of them aims at how to retain the values of the form once the form is submitted. But in my case I don't want to submit the form.I'm having 3 checkboxes and based on the selection of the checkbox by the user some values are displayed dynamically without submitting the page. The default values of the checkboxes are chk1val1 chk2vala chk3val1. Now if the user makes the selection as chk1val2 chk2val3 chk3val2, then even after the user refresh the page I want to retain that selection done by the user. Any pointers on this one??
Thanks in advance.
I finally found an answer for this question.
To temporarily store the form values we can use the localStorage of Javascript. Below is an example which explains how to use it,
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
document.getElementById("io").value = localStorage.getItem("item1");
});
</script>
<script>
$(window).on('beforeunload', function() {
localStorage.setItem("item1",document.getElementById("io").value);
});
</script>
</head>
<body>
<form>
<input type="text" id="io" name="io">
<input type="submit">
</form>
</body>
</html>
Run the above code and type something in the textbox. Now even if the page is refreshed the value within the textbox will persist i.e. will not change.
I am using jQuery 1.6.4 with jQuery Mobile 1.0.1. I am running into an issue anytime you link to a page that then tries to do a 301 redirect.
I've setup a sample page at: http://www.widgetsandburritos.com/jquery-mobile-test/
The only thing on this page is the jQuery Mobile includes and a link to another page that has a 301 redirect somewhere else.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
301 test
</body>
</html>
301test.php has the following content:
<?php
header( "HTTP/1.1 301 Moved Permanently" );
header( "Location: 301success.html" );
?>
This should just simply pass the browser to 301success.html. It works if you directly go to that URL
http://www.widgetsandburritos.com/jquery-mobile-test/301test.php
But when you click on the link from the page using jQuery Mobile, it shows "undefined" instead. Is jQuery Mobile currently incapable of handling redirects?
Any possible work arounds?
Thanks for your help.
EDIT [3/23/12 12:41AM CST]
I also posted this problem on the jQuery Mobile forums. Somebody there recommended adding rel="external" to the anchor tag. This technically works if all you are doing is making a link, but won't fix the issue if you get to the redirect via some other mechanism, such as a POST request.
To illustrate, I've setup a secondary test at http://www.widgetsandburritos.com/jquery-mobile-test/test2.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<form method="post" action="301test.php">
<input type="submit" value="test" />
</form>
</body>
</html>
Instead of arriving at the 301test.php redirect page from a link, it's now the location of a form we're submitting to. The context this would be used, would be such that if you submit a form with errors, it would stay on the same page allowing you to correct the errors. If there were no errors, it redirects you to a success page. This is done to avoid submitting the form again if a user refreshes their browser. It works brilliantly in normal web applications. But in combo with jQuery Mobile it doesn't seem to work.
Just thought I'd give some additional context to anyone else following this issue.
Figured out the answer to my own problem. In the above, I mentioned that this was causing problems using the <form> tag. After browsing through the jQuery Mobile documentation I found this page: http://jquerymobile.com/test/docs/forms/forms-sample.html
The trick here is if you're doing a form, to force it to not use AJAX. You do this by adding
data-ajax="false" to the FORM tag.
So this changes
<form method="post" action="301test.php">
to
<form method="post" action="301test.php" data-ajax="false">
And just to reiterate what was said above. If you need to do something with an anchor link, just add rel="external" to it.
So this changes
301 test
to
301 test
The issue is deeper. Take a look here or here.
It seems that XMLHttpRequest object (the one used for doing AJAX requests) handles redirects on its own and returns the final response. Which means that jQuery Mobile can't know that it should update the URL.
The solution is to use the data-url attribute on the final page. It forces jQuery Mobile to update the URL in the browser. Kind of a workaround but far from being a hack.
By the way there are more issues with jQuery Mobile, AJAX and redirects - for instance if you click the browser's back button after an AJAX-redirect, jQuery Mobile (up till 1.1) might produce a final page under the URL of the redirecting page. Therefore using data-ajax="false" is a wise choice.
EDIT:
But even data-ajax="false" is not a bullet-proof solution. Using it splits your mobile app into multiple browser pages, which brings all sorts of browser differences to the party. For instance Firefox has so called bf cache whereas Chrome doesn't. This is an unholy mess and I'm starting to think that something like Sencha Touch is much better suited for developing pages that pretend to be mobile apps.
EDIT 2:
Alternatively, one could avoid regular form submissions and use own AJAX code for that and then switch pages based on the result, but I cannot resist thinking that it's 2012 and such things should automated and work flawlessly without sweating.
I'm currently building an application but even though I am logged in, I stay on the login page, and I do not get redirected. I used the data-ajax="false"
this is the code of the form:
<section id="login">
<h2>Want to take a ride? <span>Login</span></h2>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false">
<?php if(!empty($feedback_error)): ?>
<div id="feedback_error">
<p><h1><?php echo $feedback_error ?></h1></p>
</div>
<?php endif; ?>
<input id="username" type="text" name="username" placeholder="username" />
<input id="password" type="password" name="password" placeholder="password" />
<p>Not yet signed up? <a href="register.php" >Register</a></p>
<input type="submit" name="btnLogin" data-theme="b" value="Sign in">
</form>
</section>
I guess I have an easy question, I have not found the right answer yet though.
I have an iframe in my page that comes from an external domain. After submitting the form which is inside this iframe, I would like to redirect the whole page, not just the content inside the iframe - I guess the right way to achieve might be via "target" attribute.
The sample html:
<html>
<body>
<h1>main page</h1>
<iframe src="http://example.com">
<form url="http://example.com/action">
...
</form>
</iframe>
</body>
</html>
Submitting the form should show me the result of submitting the POST request as a new page (not in the iframe)
I have put target='_parent' in the iframe but I haven't done this initially in the form element. After adding target='_parent' attribute to form it started to work as expected.
Add a target attribute to the form within the iframe:
<form action="foobar" method="post" target="_parent">
...
</form>
Hey guys,
I've used the search as well so I am confident in asking the question here without doing anything wrong :P
Recently I was developing for fun and learning purposes another Facebook application! Basically what I want it to do is:
1.) You choose something to click on
2.) You choose from the fb friend selector formular one friend
and then the app does a wall posting with the item chosen at point 1 on the wall of the friend chosen from point 2!
The thing is, i created a php post formular and had the fb friend selector in it like that:
<form action="send.php" id="testForm" method="post">
[blah blah the items to choose]
<fb:serverfbml style="width: 240px; height: 700px;">
<script type="text/fbml">
<fb:fbml>
<fb:friend-selector uid="$user" name="uid" idname="uid2"/>
</fb:fbml>
</script>
</fb:serverfbml>
<input class="inputbutton" style="cursor: pointer;" name="do_it" value="submit" type="submit">
</form>
So the thing is, when my send.php file only contains for example:
<?php
[facebook api shit]
if($_POST[do_it]=="submit"){
echo $_POST[$user];
}
or i replaced it with echo $_POST['uid'] or $_POST['uid2']
and none of them showed me a value at all
so where is the bug??
fb:serverfbml creates an iframe, so because your form is outside, it won't send anything inside the fb:serverfbml tag.
You need to do something like this:
<fb:serverfbml width="615">
<script type="text/fbml">
<form name="form" action="http://www.remy-mellet.com/remote/fb/reverse/temp.php" id="form">
<fb:friend-selector uid="797350112" name="uid" idname="friend"/>
<INPUT type="submit" value="test">
</form>
</script>
</fb:serverfbml>
Parameters received:
<?php
print_r($_POST);
print_r($_GET);
?>