I need to grab the HTML of the current page and submit it via a form. A simplified version of my page looks like this:
<body>
<div id="container">
<!-- stuff here -->
<form id="pageform" action="mypage.php" method="post">
<input type="hidden" id="Source" />
<button type="submit" name="submit">Submit</button>
</form>
</div>
<script type="text/javascript">
function handlesubmit() {
var pageSource = $("#container").html();
$("#Source").val(pageSource);
return true;
}
$(function() {
$("#pageform").submit(handlesubmit);
});
</script>
</body>
This code works fine in Internet Explorer 9, Firefox and Chrome. In Internet Explorer 7 and Internet Explorer 8, though, the resulting value of Source is truncated on the server-side (the source is fairly large). I was able to fix this by changing the form submission to take place via $.post() instead.
Why does this work using a jQuery Ajax post and not regular form submission? Is there a race condition caused by a the form submitting before the value of Source is set? Which parts of the above code happen asynchronously – only the $.post() request?
UPDATE: The request is performed via POST, not GET.
No, there is no race condition. The query string is simply limited in length. If you are sending large amount of data, then you are supposed to use the POST method (which will put data into the request body).