Forum Moderators: open
I need to do the following.
1. user clicks on a link such as this
<a href="javascript:AskID('http://www.test.com/test.php?id=')">Ask for id number</a>
When the user clicks on the link, a popup would appear that allows the user to enter an string. When the user clicks ok, the javascript would then add the text to the url that was passed to the function originally and then redirect.
How would I do something like this?
Thanks for any help,
Brent
Secondly. The whole thing fails if JS is disabled - pop-up or no.
Could I suggest a form with a text input for the userid, with an action URL to the PHP page quoted. This would require no script.
-Brent
1. The link. I've put the function call in the onclick (with return false).
If JS is disabled, the link will be followed instead. Hopefully a page where a userid can be entered without using script.
<a href="JS_DisabledPage.htm" onclick="pop();return false;">Enter user ID</a>
2. The pop-up page. Here's the code for the pop-up.
It contains a check to see that something's been entered, nothing else though:
-------- apop.htm ----------------------
<html><head><title>Enter User ID</title>
<script>
function go()
{
var userid = escape(document.forms[0].elements.userid.value);
if(!userid) return;
opener.location.href="http://www.test.com/test.php?id=" +userid;
close();
}</script>
</head>
<body>
<form>
<input type="text" name="userid" size="20" />
<input type="button" onclick="go()" value="enter" />
</form>
</body>
</html>
--------------------------------------------
3. The function, pop():
The simple version is this.
// Giving the window a name prevents
// multiple instances of the popup.
function pop()
{
open("apop.htm","winName","width=300,height=300");
}
That's it.
It might be worth going a step further, and cut out the trip to the server for the pop-up page. In the next version of pop, the code for the page is held in a string var, and used as the address for the pop-up, using the 'javascript:' protocol (safer than using document.write).
Now the file, apop.htm, isn't needed...
function pop()
{
var code = '<html><head><title>Enter User ID</title><script>'
+ 'function go(){var userid = escape(document.forms[0].elements.userid.value);if(!userid) return;'
+ 'opener.location.href="http://www.test.com/test.php?id=" +userid;close();}'
+ '<\/script></head><body><form><input type="text" name="userid" size="20" />'
+ '<input type="button" onclick="go()" value="enter" /></form></body></html>';
open("javascript:'"+ code+"'","winName","width=300,height=300");
}
<script language="javascript" type="text/javascript">
<!--
function askId() {
window.open("askId.html","askId","width=400,height=400,left=300,top=400,resize=no,toolbar=no,status=yes,fullscreen=no");
}
function mkeId(userInput) {
window.location.href="http://www.mysite.com/in.cgi?in="+escape(userInput);
//Note: the escape is optional. This simply changes special characters into server-friendly ones. If you don't want to do this, just put instead, +userInput;
}
//-->
</script>
<a href="#" onClick="askId()">Ask for an ID number.</a>
askId.html
Your input: <input type="text" id="userIn"><br>
<input type="button" onClick="window.opener.mkeId(document.all.userIn.value);window.close()">
