popup window in javascript?

  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

I am coding in perl/cgi.

In one of my form i want to place a text box and a hyperlink besides that checkbox . The hyperlink should popup a window of usernames. i.e. the popup window should contain the names of the users and a checkbox besides them . I am having the names of the users in a array like @usernames.

There should be a button like Insert names in the popup window which when clicked should insert the names of the users ( those which are checked) in the text box of my main form.

what should i do for this please if somebody can code it...
I am not knowing javascript.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

This will be the file that the popup window calls.
Code: [ Select ]
<html>
<head><title>User Names</title>
<script language="javascript" type="text/javascript">

// usernames array
var usernames = new Array("name one","name two","name three","name four","name five");

// character to use as a delimiter
var delim = ",";

// function that takes names string and inserts it into the parant windows textbox
function backAtYa(text) {
    txtarea = window.opener.document.namesForm.namesList;
    if (txtarea.createTextRange && txtarea.caretPos) {
        var caretPos = txtarea.caretPos;
        caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '' ? text + '' : text;
        txtarea.focus();
        window.close();
    } else {
        txtarea.value += text;
        txtarea.focus();
        window.close();
    }
}

// function that builds the list of names to pass to backAtYa(text)
function buildList(form){
    list = "";
    for(i=0; i<usernames.length; i++){
        if(form.con[i].checked){list+=usernames[i] + delim;}
    }backAtYa(list);
}
</script>
</head>

<body>
<form name="namesList2">
<script language="javascript">
document.write("<strong>User Names</strong><hr />");
for(i=0; i<usernames.length; i++){
    document.write("<input type='checkbox' id='con'>&nbsp;" + usernames[i] + "<br />");
}
</script>
<input type="button" onClick="buildList(this.form)" value="Insert Checked Names">
</form>
</body>
</html>
  1. <html>
  2. <head><title>User Names</title>
  3. <script language="javascript" type="text/javascript">
  4. // usernames array
  5. var usernames = new Array("name one","name two","name three","name four","name five");
  6. // character to use as a delimiter
  7. var delim = ",";
  8. // function that takes names string and inserts it into the parant windows textbox
  9. function backAtYa(text) {
  10.     txtarea = window.opener.document.namesForm.namesList;
  11.     if (txtarea.createTextRange && txtarea.caretPos) {
  12.         var caretPos = txtarea.caretPos;
  13.         caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '' ? text + '' : text;
  14.         txtarea.focus();
  15.         window.close();
  16.     } else {
  17.         txtarea.value += text;
  18.         txtarea.focus();
  19.         window.close();
  20.     }
  21. }
  22. // function that builds the list of names to pass to backAtYa(text)
  23. function buildList(form){
  24.     list = "";
  25.     for(i=0; i<usernames.length; i++){
  26.         if(form.con[i].checked){list+=usernames[i] + delim;}
  27.     }backAtYa(list);
  28. }
  29. </script>
  30. </head>
  31. <body>
  32. <form name="namesList2">
  33. <script language="javascript">
  34. document.write("<strong>User Names</strong><hr />");
  35. for(i=0; i<usernames.length; i++){
  36.     document.write("<input type='checkbox' id='con'>&nbsp;" + usernames[i] + "<br />");
  37. }
  38. </script>
  39. <input type="button" onClick="buildList(this.form)" value="Insert Checked Names">
  40. </form>
  41. </body>
  42. </html>


This is a sample page to call the above page,
Code: [ Select ]
<html>
<head>
<script language="javascript">
    function popUp(loc,eyeD,X,Y){
        window.open(loc,eyeD,"toolbar=no,location=0,directories=no,status=no,menubar=0,scrollbars=yes,resizable=0,width=" + X + ",height=" + Y + "'");
    }
</script>
</head>

<body>
<form name="namesForm">

<input type="text" id="namesList" name="comment">

<a href="javascript:popUp('names.html','names','300','300')">Names List</a>
</form>

</body>
</html>
  1. <html>
  2. <head>
  3. <script language="javascript">
  4.     function popUp(loc,eyeD,X,Y){
  5.         window.open(loc,eyeD,"toolbar=no,location=0,directories=no,status=no,menubar=0,scrollbars=yes,resizable=0,width=" + X + ",height=" + Y + "'");
  6.     }
  7. </script>
  8. </head>
  9. <body>
  10. <form name="namesForm">
  11. <input type="text" id="namesList" name="comment">
  12. <a href="javascript:popUp('names.html','names','300','300')">Names List</a>
  13. </form>
  14. </body>
  15. </html>


Feel free to ask questions, I tried commenting all the important stuff :D
  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

thank u very very much its working...
ur code is working fine but i have a problem.

In ur code the array is a javascript array and i am having a perl array.
then how can i assign a perl array to a javascript array so that the code can work for me?

Is there a way anything around?

Hoping for ur answer..
akaash...
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

This is the first time i've tried anything with perl, I don't have the means to test it and I don't know how the code gets executed.

However, I think this should help in some way shape or form.
The concept is having perl script execute at the top of the page that gets called by the popup box printing the @array elements into a javascript array.
Code: [ Select ]
#perl stuff
@colors = ("red","green","blue");

print "var usernames = new Array();\n";
$x = 0;
foreach $i (@colors) {
  print "usernames[$x] = '$i';\n";
  $x++
}
  1. #perl stuff
  2. @colors = ("red","green","blue");
  3. print "var usernames = new Array();\n";
  4. $x = 0;
  5. foreach $i (@colors) {
  6.   print "usernames[$x] = '$i';\n";
  7.   $x++
  8. }


If this concept works the way i'm thinking it will the above code (or somthing similar) should output this inside the topmost script tag of the page being called by the popup.
Code: [ Select ]
var usernames = new Array();
usernames[0] = 'red';
usernames[1] = 'green';
usernames[2] = 'blue';
  1. var usernames = new Array();
  2. usernames[0] = 'red';
  3. usernames[1] = 'green';
  4. usernames[2] = 'blue';


Hope someone can clear this up, like I said I have no priar experience with perl or cgi :oops:
  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

Ya i go it thanks for it very very much . It worked fine.

I am very grateful to u sir..
akaash
  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

I am having a table with 3 rows and 3 columns

In my 2nd column there are text boxes,

In my 3rd column there are hyperlinks which will popup the addressbook and insert required address in the text box in the 2nd column.

my requirement is that when i click the link of 2nd row then the names must be inserted in the text box of 2nd row and when i click the 3rd row hyperlink then the names should be inserted in the 3rd row's text box

how can i refer this textboxes?

what is it document.namesForm.????.??? where namesForm is the name of the form containing table.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Are the 2nd and third rows using the same list of addresses ?
  • akaash
  • Beginner
  • Beginner
  • akaash
  • Posts: 62
  • Loc: Gujurat,India

Post 3+ Months Ago

yes they are using same list of addresses.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Revised version of page calling popup,
Quote:
<html>
<head>
<script language="javascript">
whatColumn = "";
function popUp(loc,eyeD,X,Y,column){
whatColumn = column;
window.open(loc,eyeD,"toolbar=no,location=0,directories=no,status=no,menubar=0,scrollbars=yes,resizable=0,width=" + X + ",height=" + Y + "'");
}
</script>
</head>

<body>
<form name="namesForm">

<input type="text" id="namesList" name="comment">
<input type="text" id="namesList2" name="comment 2">

Code: [ Select ]
<a href="javascript:popUp('names.html','names','300','300',1)">Names List</a> ||<a href="javascript:popUp('names.html','names','300','300',2)">Names List 2</a>

</form>

</body>
</html>

There is an extra paramater being passed to the popUp() function from links telling the function to set a variable that the page being poped up will look at to decide what box to return the string to.

Now on to the page being called in the popup,
Quote:
<html>
<head><title>User Names</title>
<script language="javascript" type="text/javascript">

// usernames array
var usernames = new Array("name one","name two","name three","name four","name five");

// character to use as a delimiter
var delim = ",";

// function that takes names string and inserts it into the parant windows textbox
function backAtYa(text) {
if(window.opener.whatColumn == 1){
txtarea = window.opener.document.namesForm.namesList;
}else{
txtarea = window.opener.document.namesForm.namesList2;
}

if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '' ? text + '' : text;
txtarea.focus();
window.close();
} else {
txtarea.value += text;
txtarea.focus();
window.close();
}
}

// function that builds the list of names to pass to backAtYa(text)
function buildList(form){
list = "";
for(i=0; i<usernames.length; i++){
if(form.con[i].checked){list+=usernames[i] + delim;}
}backAtYa(list);
}
</script>
</head>

<body>
<form name="namesList2">
<script language="javascript">
document.write("<strong>User Names</strong>&lt;hr /&gt;");
for(i=0; i<usernames.length; i++){
document.write("<input type='checkbox' id='con'>&nbsp;" + usernames[i] + "<br />");
}
</script>
<input type="button" onClick="buildList(this.form)" value="Insert Checked Names">
</form>
</body>
</html>


The code marked in bold reflects the script looking at the Variable in the opening page I mentioned earlier.
More destionations can be coded in by replacing }else{ with further if() conditions reflecting different parameters being passed in the links and new variable values being set before the popup is called.

That whatcha need ?

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 113 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.