I have a pop up window function where when a button is clicked the window does pop up. Now the pop up window does not display anything, for a test I want the pop up window to display the word "Session". But I don't know how to do this.
Am I supposed to write the word "Session" in another page and link to that page or is it possible to write the word "Session" on the same page and link it to that section of the page?
I want the latter to happen but I don't know how to do it.
Below is my code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<script type="text/javascript">
function openSessionPopup (session) {
window.open(session,
'window',
'width=500,height=500,scrollbars=yes,status=no');
}
</script>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="openSessionPopup(this.href); return false" /></p>
</form>
</body>
Try something like this:
var win = window.open("about:blank", null, "width=400,height=300");
var doc = win.document;
doc.open("text/html");
doc.write("Session");
doc.close();
Try it on JSFiddle.
Alternatively, you can create a new page with the content you want and open that:
window.open("my-new-page.html", null, "width=400,height=300");
If you want to write the word session into the popup.. be sure to use " before and after since it's string... like this window.open("session", 'window', ...
" or ' will do the job either way.
Your popup typically displays another page when it appears. It is this other page that will have the content you want displayed.
This code would never work. When you pass in this.href, the this refers to the input element on which you've clicked. Input elements do not have an 'href' attribute, so you're passing in an undefined value.
You can pass the href as the argument for the "session" parameter. You see this works by putting this code into a file called "question.html" and testing out the button.
Replace the href with the page you want to display.
onClick="openSessionPopup('question.html'); return false"
First parameter in windows.open function is URL. So when you passed an empty value it opened the window with url about:blank (empty page).
If you want open url http://example.com/ in popup window you must use your function as:
openSessionPopup('http://example.com/');
Related
Say I have a page a.php and want to get a table element using it's id from another page b.php. Know it have been asked but only answers were in Jquery, any way of doing it with pure js?
Thanks!
If you mean accessing data from another tab/window, that is possible via acquiring a reference to it. For example if you open it yourself:
<html>
<head>
<script>
var otherdoc;
function create(){
otherdoc=window.open("about:blank","otherwindow").document;
otherdoc.open();
otherdoc.write("<table border='1'><tr><td id='data'>aaa</td><td>ccc</td></tr></table>");
otherdoc.close();
}
function check(){
alert(otherdoc.getElementById('data').innerHTML);
}
function modify(){
otherdoc.getElementById('data').innerHTML="bbb";
}
</script>
</head>
<body>
<button onclick="create()">Create</button>
<button onclick="check()">Check</button>
<button onclick="modify()">Modify</button>
</body>
</html>
When you click on the first button, the window.open line opens a new window/tab, and a reference to its document is kept. "about:blank" could be an actual URL - here instead a table is written there manually.
The other two buttons access and modify a cell in the table.
Suggested sequence for pushing the buttons: Create, Check, Modify, Check.
I would like need help with a simple code. It needs to do the following:
Ask the user to input a value in a textbox (e.g. '12345').
Get the value entered and append them to a default URL string (e.g. 'http://mywebsite.com/track/').
Redirect the browser URL to the new value (e.g. http://mywebsite.com/track/12345').
I was thinking about parsing the value via a GET/POST command, but I don't want the question mark that will get added when you submit it, so Javascript would suffice.
You can try something like this :
<!DOCTYPE html>
<html>
<body>
<input type="text" id="urlInput" value="12345"><br>
<p>Click "GO" to be redirected to the URL.</p>
<button onclick="redirect()">GO</button>
<script>
function redirect() {
var url = "http://mywebsite.com/track/" + document.getElementById('urlInput').value;
window.location=url;
}
</script>
</body>
</html>
I think you are searching for this:
var new_url = prompt();
window.location.replace(new_url);
You get input from user with promt() and you save it in variable named new_url. After that you use replace() method for redirecting. You change the location of window object
I have the base page which has a button for "Add Link", upon click you get a popup window. The popup window has a form field to enter the link. Once the link is entered, I would like to refresh the base page - the base page should no more be "Add Link" but changed to the hyperlink entered in the popup window.
I am new to Javascript and html. I have by far managed to create a button on the base page and on click displays a popup window with form field for the link. However I am unable to refresh the base page with the new link.
Below is my code:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Add Link</button>
<p id="demo"></p>
<script>
function myFunction()
{
prompt("Please Enter the Link");
}
</script>
</body>
</html>
What the following will do is every time the button is hit, the prompt is shown, and once that prompt closes the script will add a new <a href=value>New Link</a> tag to the demo div.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Add Link</button>
// This needs to be a 'div' so it can have elements inside it.
<div id="demo"></div>
<script>
var demo = document.getElementById('demo');
function myFunction()
{
// Stores the value from the prompt() in the variable 'value'
var value = prompt("Please Enter the Link");
var link = document.createElement('a'); // Create an <a> tag
link.setAttribute('href', value); // Set the link's URL to the value.
link.innerHTML = "New Link"; // Set the link's display text.
demo.appendChild(link); // Add the link to the demo div.
}
</script>
</body>
</html>
Hopefully the comments explain how it works, if not just ask here :)
Try this:
<button onclick="myFunction()">Add Link</button>
<p id="demo"></p>
<script>
function myFunction()
{
var url = prompt("Please Enter the Link");
window.location = url;
}
</script>
http://jsfiddle.net/douglasloyo/rtghQ/
the only value that is acceptable in js fiddle is going to be http://jsfiddle.net/
Cheers
You'll need some way to store the link on the server; refreshing the page will cause everything to be re-executed, and you can't really dynamically alter the html file from itself. Something like django with a postgresql database is pretty easy to set up, but that's beyond the scope of your question.
That said, if you're okay with having the link not survive when the page is refreshed, you can use a text area instead of a prompt. Here's an example if you have jQuery:
<head>
<script>
$(function() {
$("#addLink").click(function() {
var linkStr = document.getElementById("linkInput").value;
$("#linkArea").html("Your link");
});
})
</script>
</head>
<span id="linkArea">
<input id="addLink" type="submit" value="Add Link: ">
<input id="linkInput" type="text" value="(enter link)">
</span>
Here's a jsfiddle to try it out:
http://jsfiddle.net/tRcUp/
Oh, and generally you should put scripts in the head tag.
I have two html pages one is parent.htm and other is child.html where i have given href in parent.htm' tochild.html, here i have to access the elements ofparent.htminchild.html`, here are my two files
parent.htm
<!DOCTYPE html>
<html>
<body>
<form>
<input id=text1 type=text name="test2">
Open kid
</form>
</body>
</html>
child.html
<html>
<script type="text/javascript">
function parent(){
//here i want to access values from parent.htm page, but does not work
var value = parent.getElementById('text1').value;
var value2=top.getElementById('text1').value;
alert(value);
}
</script>
<body onload="parent()">
<form>
</form>
</body>
</html>
Thanks in advance
Probably the easiest way to do what you want is through a cookie. It's a small text file stored on the client that can persist values across pages. If you don't specify an expiration date, the cookie will expire when the user closes their browser.
Cookie tutorial
Edit
Something else you could do is use Javascript to submit the form by clicking on the link. I think it's formname.submit() - which would allow you to read the values out of the form post. (Though it would be a little more work than just reading the cookie)
If you're only passing one or two fields I'd use the cookie. More than that you may want to consider submitting the form through Javascript.
First change the following:-
Open kid
to :-
Open kid
target="_self" means that the child page will open in the same parent window, effectively destroying the parent and its code.
Afterwards, access the parent's form textbox element with:-
var parentTextBox = window.opener.document.getElementById('text1');
I think you cannot do that, at least the way you are trying.
Once you clicked on "Open kid", your current page will be replaced by the new one, so you can't access that attribute.
You should be able to get around this by using cookies, passing the needed values in the url or with Web Storage.
You should be able to user window.opener to grab a reference to the parent window.
var parent = window.opener
I see -- you cannot access DOM elements from a previous page via javascript (AFAIK).
This is traditionally handled with HTTP post variables, passing the form variables collection to the subsequent page via some back-end procedures.
Or (as Moje notes) open the page in a new window so you can access the parent with window.opener
parent.htm
<!DOCTYPE html>
<html>
<body>
<form method="GET" id="myform" action="child.html">
<input id=text1 type=text name="test2">
Open kid
</form>
</body>
</html>
child.html
<!DOCTYPE html>
<html>
<body onload="alert(window.location.toString().split('?')[1].split('=')[1])">
</body>
</html>
Might contain some typo, but the idea is to submit form by GET to the child and then read GET parameters from window.location after child.html is loaded.
I am trying to use buttons in an html/javascript program to redirect someone to another one of my pages. Basically, I created a .jsp page that gives the user some buttons to click. If the user clicks a button, it calls a method that is supposed to open a new .jsp page that I created under the same project. However, I have no clue how to do this as I am brand new to Javascript and HTML. I provided an example below:
Sample Page
<html>
<title>Web Page</title>
<body>
<p>Please click a button to redirect you to the page you wish to go to.</p>
<br>
<form>
<input type="button" id="idname" value = "General Info " onclick="goToInfo()"/><br>
</form>
<br>
<form>
<input type="button" id="idname" value = "Other Information" onclick="goToOther()"/><br>
</form>
<script type="text/javascript">
function goToInfo(){
}
function goToOther(){
}
</script>
</body>
</html>
*For example, I have another page in my NetBeans project that is called "GeneralInfo.jsp" and I want goToInfo() to be able to redirect the person to that page. Thank you for your help.
You could use window.location to redirect the user to the corresponding JSP pages; however, you'll need to make sure your paths in the code below match the actual paths to your JSP page as mapped by your servlet or based on the absolute path relative to the application.
function goToInfo(){
window.location = '/GeneralInfo.jsp';
}
function goToOther(){
window.location = '/someOtherJSPPage.jsp';
}
If you get 404 errors when trying to redirect to your JSP page, try turning up your logging level to ALL or DEBUG so that you can see the logs from the framework or Java container, these will hopefully show you the real file paths so that you can then adjust the URL to match the actual target location.
this should open new tab with GeneralInfo.jsp when you click on the General Info button..
function goToInfo(){
window.location = "GeneralInfo.jsp";
}
you can use this method,
<input type="button" value="General Info" name="INfoPage"
onclick="document.forms[0].action = 'infoPage.jsp';" />
or the easy way is,
General Info