[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1757
  • Last Modified:

Modify Javascript to Pass Value to Parent's Textbox, from Popup's Drop-Down Selectbox

I found the following code on this site. It allows the user to pop up a window, type in some text, and it is added to the parent page's drop-down select box.
    But I want to do the opposite:  I want a read-only textbox, and users can populate the textbox by selecting an option from a drop-down selectbox on a pop-up page.
    E.g.  User wants to populate textbox. Clicks link for popup page. Selects an item from the drop-down list on the popup. Clicks "Submit."  Pop-up sends value back to textbox on the parent page (there could be several textboxes, so it needs to send it to the correct one) and then closes itself.
    How would I modify the below code to do that?  Thanks.

<html>
      <head>
      <script type="text/javascript">
      function windowopen()
      {
            window.open("more.htm","","");
      }
      function addOption(name, value)
      {
            document.calcval.optSelect.options[document.calcval.optSelect.options.length] = new Option(name, value);
            document.calcval.optSelect.options[document.calcval.optSelect.options.length-1].selected = true;
      }
      </script>
</head>
 <body>
      <form name="calcval">
      <select name="optSelect">
            <option>Opt 1</option>
      </select>
<a href="#" onclick="windowopen(); return false;">Add an option</a>
      </form>
      </body>
</html>

- - - - -

File2  more.htm . . .

<html>
      <head>
      <script type="text/javascript">
      function returnValues(name, value)
      {
            window.opener.addOption(document.calcval.newopt.value, document.calcval.newopt.value);
            window.close();
      }
      </script>
      </head>
      <body>
      <form name="calcval">
      <input type="text" name="newopt"><input type="button" name="button" value="add" onclick="returnValues()">
      </form>
      </body>
</html>
0
FrankTech
Asked:
FrankTech
  • 3
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
<html>
<head>
<script type="text/javascript">
var currentField = new Array(); // make global
var pops = new Arrary();
var cnt = 0;
function windowopen(fld) {
  currentField[cnt]=fld;
  pops[cnt++]=window.open("more.htm?"+cnt,"","");
}
</script>
</head>
 <body>
      <form name="calcval">
<input type="text" name="field1" value=""><a href="#" onclick="windowopen(document.calcval.field1); return false;">Add a value</a><br>
<input type="text" name="field2" value=""><a href="#" onclick="windowopen(document.calcval.field2); return false;">Add a value</a><br>
      </form>
      </body>
</html>

- - - - -

File2  more.htm . . .

<html>
<head>
<script type="text/javascript">
var cnt = location.search.substring(1)      
</script>
</head>
<body>
<form name="calcval"
      onSubmit="opener.currentField[cnt].value=this.sel.options[this.sel.selectedIndex].value;
      window.close(); return false">
  <select name="sel">
  </select>
  <input type="submit">
  </form>
</body>
</html>
0
 
FrankTechAuthor Commented:
Thanks!  I'm having some problems testing it:
   1. The popup form is not self-closing after clicking Submit. I see the window.close() call in the submit field, but it isn't working for me.
   2.  The popup's select values are not getting passed back to the parent.  (I added some select options in the more.htm file, like <option value="First">First</option> ).
   3. How would I set the size and scrollbar options for the popup, like 'width=300,height=300,scrollbars=no,left=10,top=10' ?
0
 
Michel PlungjanIT ExpertCommented:
3:
change
window.open("more.htm?"+cnt,"","");
to

window.open("more.htm?"+cnt,"","width=300,height=300,scrollbars=no,left=10,top=10");
0
 
Michel PlungjanIT ExpertCommented:
Sorry I had some typos and incremented cnt before using it

<html>
<head>
<script type="text/javascript">
var currentField = new Array(); // make global
var pops = new Array();
var cnt = 0;
function windowopen(fld) {
  currentField[cnt]=fld;
  pops[cnt]=window.open("more.html?"+cnt,"_blank","width=300,height=300,scrollbars=no,left=10,top=10");
  cnt++;
}
</script>
</head>
 <body>
      <form name="calcval">
<input type="text" name="field1" value=""><a href="#" onclick="windowopen(document.calcval.field1); return false;">Add a value</a><br>
<input type="text" name="field2" value=""><a href="#" onclick="windowopen(document.calcval.field2); return false;">Add a value</a><br>
      </form>
      </body>
</html>

more.html

<html>
<head>
<script type="text/javascript">
var cnt = location.search.substring(1)      
</script>
</head>
<body>
<form name="calcval"
      onSubmit="var val = this.sel.options[this.sel.selectedIndex].value;
      opener.currentField[cnt].value=val;
      window.close(); return false">
  <select name="sel">
  <option value="">Please select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  </select>
  <input type="submit">
  </form>
</body>
</html>
0
 
FrankTechAuthor Commented:
It works now. Thank you !
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now