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>
Related
I am very new to HTML, css, jQuery, javascript, etc. and on a website I am making, I want to take the user's input and make that the header of another page of my website. I don't understand how to transfer that information from one HTML page to another.
Use local storage .
To set:
var UserInput=$('#txtBoxID').val();
localStorage.setItem(yourkey,UserInput);
To get the value on other page:
var header = localStorage.getItem(yourkey);
$('#YourHeaderHtmlID').val(header );
Note that you all do this inside document ready.
$(function() {
});
you can write a javacript function to set cookie with the header name before moving to the next page
if it is anchor tag
<a href="nextpage.html" onclick="setHeaderName()"/>
In the next page, you can get the cookie using script and call funciton inside the title
<head><title><script>callCookieHeaderValue()</script></title></head>
callCookieHeaderValue() is the function you can write to return the cookie value
I have two pages, say page1.jsp and page2.jsp and a common javascript file script.js.
I have an onclick call in page1.jsp like this:
<td>004</td>
and this method is in script.js defined as:
<script>
function onTab_ServiceTypes() {
// Here I want to hide a div of page2.jsp, like this
$("#div_of_page2JSP").hide();
}
</script>
How can I do this?
you can't do that if both pages are independent(page2 is loaded via a page reload).
What you can do is to store the clicked state using a cookie/web-storage(local storage/session storage) then when the second pages is loaded check the state of the stored value and then hide/show those elements.
If I understand your question right this is not possible. You won't be able to manipulate elements not within the current DOM with JavaScript. You could probably pass a variable in your URL like page2.jsp?hideDiv=true (You would have a better name for this variable...) when you click the link and navigate to page2.jsp and hide div on page load.
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.
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.