I was just wondering whether there is some way to do this:
I have a form in a web page, after the user submits the form, the page is redirected to another static HTML page.
Is there any way to manipulate the data in the second HTML page without the help of any server code?
I mean can I display the form data that the user submitted in the second page?
Of course there should be a navigation, not some Ajax code to load the second page (using which it would be easy to manipulate the data).
You can use a <form> with GET method to go to another static HTML page with some query parameters and then grab those parameters with JavaScript:
First page:
<form method="GET" action="page2.html">
<input type="text" name="value1"/>
<input type="text" name="value2"/>
<input type="submit"/>
</form>
Second page:
<script type="text/javascript">
function getParams() {
function decode(s) {
return decodeURIComponent(s).split(/\+/).join(" ");
}
var params = {};
document.location.search.replace(
/\??(?:([^=]+)=([^&]*)&?)/g,
function () {
params[decode(arguments[1])] = decode(arguments[2]);
});
return params;
}
var params = getParams();
alert("value1=" + params.value1);
alert("value2=" + params.value2);
// or massage the DOM with these values
</script>
You can access the pages GET parameters from JavaScript (window.location.search, which you still need to parse), and use this to pass some veriables to the static page.
(I suppose there is no way to get to POST content.)
You can also read and set the values of cookies from JavaScript.
If you are within a frameset where a "parent" page always sticks around you could potentially also store information in there (also cross-frame-scripting is tricky and I would try to avoid that).
If you have the first page submit the form with a GET action you'll get a URL that looks like:
http://tempuri.org/Page2.html?param1=value1¶m2=value2
You could then use JavaScript on Page2.html that reads the query string parameters and displays them on the page.
If you send the form that through GET, yes, you can grab that info from js.
There is a jQuery plugin that does that, but if you want, you can roll your own, its not so complicated.
Just get the location.href and splits it using "?"
then, split again using "&"
Now, for each value, split with "=". Then you'll have a array with the name of the query, and the value of it.
edit: google for javascript get querystring to find dozens of implementations.
Related
Basically, I'm trying to get ASP.NET to grab a variable out of the URL and use it to start a javascript function.
The user is viewing an online catalog (built with turn.js, a plugin for jquery), and when a page is clicked, it goes to a webpage with all the products from that catalog page on it. There's a link there back to catalog, but when you go back the catalog starts back at page 1. If I have the link include the page number in the URL (i.e. website.com/catalog.aspx?page=4) when you go back, I believe I can grab that out of the URL and use it to have the catalog turn to that page when it loads.
I usually stick to PHP, so I'm a bit lost here. I just need to write a little code snippet that will grab the page number and fire a javascript function using the number. Is this possible?
EDIT: Code:
Here's what I've got in javascript:
function changePage (pagenumber) {
$("#flipbook").turn("page", pagenumber);
}
The page itself is run by NetworkSolutions, so I can't give you any of the actual code from the webpage. What I came up with so far from looking around the web is this (I hope I'm not doing this completely wrong):
<script runat="server">
void Page_Load (object sender, EventArgs e) {
var pagenumber = Response.QueryString['page'];
}
</script>
I'm not sure if I'm getting the variable correctly, or even what to do with it after that to fire the javascript function. Thanks for any help given!
If I understand well your question, you want to grab the page number in the querystring using javascript, if that's correct, would this help?
How can I get query string values in JavaScript?
Im using this plugin
Example:
To get the document params:
var value = $(document).getUrlParam("paramName");
To get the params of a html-attribut (uses src attribute)
var value = $('#imgLink').getUrlParam("paramName");
it works for me. Thanks the author.
you can use server tags as below
function changePage (pagenumber) {
$("#flipbook").turn("page", <%= Request.QueryString['page'] %>);
}
I have seen this question before but I haven't found a working solution.
The question is quite easy.
If I call a page like this.
div.load('page?foo=bar');
I want to be able to retrieve foo in some way an use it in a javascript called by page. But I only manage to obtain the paramethers of the parents url.
I know I can declare variables in the parents javascript code but that is not my preffered way.
So I really hope someone has a solution to this problem.
♥ you guys
You could use something like this to parse the URI:
http://blog.stevenlevithan.com/archives/parseuri
Then you can access the parameters easily from the parent page:
// Set the link that we want to load/examine
var link = 'page?foo=bar';
// Load the link content (as per your code)
div.load(link);
// Grab whatever variables we want from the link
var uri = parseUri(link);
var foo = uri.queryKey.hasOwnProperty('foo') ? uri.queryKey.foo : false;
alert(foo);
EDIT:
As bfavaretto already commented, the content loaded in via AJAX is just a string. It's not a page that will be aware of its URI.
However, if you really want the loaded content to be able to access its URI, just make it available in the content itself. For example:
$('#my_div').load('page?foo=bar)
And in the content of "page?foo=bar":
<div class="container" data-page-uri="{{ insert uri here with php, ruby, whatever }}">
<!-- my page content -->
</div>
Now in your loaded content, you can determine the URI by finding the relevant div with the "data-page-uri" data attribute. Once you have the link, you said that you know how to grab the parameters from it...
Hope that helps.
I think you have two solutions. One, if page has a hidden div, with the data needed, the second one, probably the ajax response object has the caller url. You should study the response xhr object.
I kind of need to create html page copy by clicking on button in this page, but where all <input type = 'text'... replaced with it's values.
I think, I can handle the second part, but how first to get html code?
Are this ever possible?
I need this for generating html reports.
Page is shown in internal browser of my prog. The basic idea, the student see the page with inputs, then when he fill all, he press button inside HTML page, some JS handler work and send to my prog same page, but without inputs for later review for teacher.
If you want to get the html for the body of the document, use this:
document.body.innerHTML
You can then modify it as needed and change it:
document.body.innerHTML = ... modified html ...
There are better ways to achieve the result though, like manipulating the DOM with jQuery.
You can use document DOM element and serialize it:
(new XMLSerializer()).serializeToString(document);
for cross-browser compatibility see this post
If you have a <form> you can post to the same page adding ?post=1 to the action.
Then in the php
if ($_GET["post"]==1) {
//same table or div structure getting the values submitted by the form
}
Do you know how to do it? was this you needed?
I'm trying to make a simple site with two pages, "Search" and "Results".
At first, I had a multi-page template working fairly well. I would change the page, and on page change I would use ajax to get the results. The problem was that I wanted to be able to load the results page without first going back to the search page.
I want to pass parameters to the results page via the querystring so that I can have something like this:
search.html + "some search terms" -> results.html?q=some+search+terms
The problem is that I can't seem to get anything to work right when I split up the html into two files.
I try calling
$.mobile.changePage("results.html?q=" + escape(search))
on the search page, but the $(document).ready function is not firing. I kind of get why it doesn't, since changePage is loading the second page into the DOM?
I also tried manually redirecting, in which case the $(document).ready function does fire on results.html, but using the back button or going back to the search page doesn't fire THAT $(document).ready.
I tried wiring up the pagechange function to search.html, assuming that this would fire when I load the second page, but nothing happened.
Does anyone have suggestions as to how I would pull this off? Or the best way to get the results page to act more independent of the search page?
I've been bitten by this too, it really isn't a good idea to pass parameters through the query string and it makes jQueryMobile behave in an odd way.
Instead I've been using sessionStorage which works perfectly. You could also use a cookie.
I'm not 100% sure where you're actually having issues, but here is some important jQuery Mobile specific info that can help you.
First, read the big yellow section at the top of this page: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
document.ready does not fire when a page is brought into the DOM from an external document. Instead you need to use event delegation and the page-events specified in the link above. Most likely you want to use pageinit as a replacement for document.ready.
Then read the top section of this page: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html (the part about $.mobile.changePage()).
The important part about the second link is that you can pass data via the $.mobile.changePage() function like so:
$.mobile.changePage('results.html', { data : { q : search } });
You can even set the type option to post so there will not be a query-string sent (this should ensure you don't get multiple of the same page in the DOM at a time).
$.mobile.changePage('results.html', { data : { q : search }, type : 'post' });
Another fix would be to manually add the data-url attribute to the <div data-role="page" id="results"> page. When you grab a page like this:
$.mobile.changePage("results.html?q=search+term+here");
It's data-url gets set to: results.html?q=search+term+here. If you manually set the data-url to results.html then you can navigate to the page like this:
$.mobile.changePage("results.html", { data : { q : 'search+term+here' } });
Which will look first for the data-role="page" element that has the data-url attribute set to results.html before re-loading the pseudo-page via AJAX.
Thanks for the input guys. I used a plugin that allows me to use faux-query parameters in the hash for a multi-page layout.
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
I just added this in and ran the search on page change, getting those page parameters for the search.
Is it possible to get the value from the first page to the second page, BUT without FORM?
Shall we use
window.parent.document.getElementById("").value..
But this is working in popup window, but I need this for between two pages which redirecting from the first page to the second page.
If you are redirecting from one page to another, you MUST use form elements to pass from page to page or use a querystring value. That is it, Javascript does NOT have any knowledge of the structure of the previous page..
or you can use cookies...
You could also simply use GET variables by calling site.com/index.php?info=value and escaping the contents of value. The URL can be changed dinamically, like so:
<input type="text" id="the_value" />
Click me
<script type="text/javascript">
function updateURL()
{
document.getElementById('the_link').href =
'site.com/index2.php?info=' +
encodeURIComponent(document.getElementById('the_value'));
return true;
}
</script>