Go Premium for a chance to win a PS4. Enter to Win

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

PHP / Javascript get value question

Hi everyone,

I have a form on a page with a dropdown like this

<form id="form1" name="form1" method="post" action="">
  <label>Dyad
  <select name="select">
    <option value="1">5 minutes </option>
    <option value="2">10 minutes </option>
  </select>
  </label>

Open in new window


When the user clicks on the first option (5 minutes) I would like it to open a pop up window called mednow.html. On the mednow page there is a place where I define the inital value and I would like it to be preset to 5.

It is set here :

<input type = "text" id = "Minutes" value = "5" readonly="readonly">

If the user selects the 10 min option I would like it to open the same pop up but I would like this initial value to be set to 10 mins.

Thanks for your help with this.

D
0
TLN_CANADA
Asked:
TLN_CANADA
  • 5
  • 5
1 Solution
 
Php_expertCommented:
0
 
TLN_CANADAAuthor Commented:
Thank you! This looks great. How would I insert the value in the from the parent into my example above?

Also, if you could give show me how to insert the parent code into the drop down menu above that would be greatly appreciated.

Thank you,

D
0
 
Php_expertCommented:
Parent form :

<form id="form1" name="form1" method="post" action="">
  <label>Dyad
  <select name="select" id= "selectlist">
    <option value="1">5 minutes </option>
    <option value="2">10 minutes </option>
  </select>
  </label>
</form>

Open in new window


Popup form :

<form id="form2" name="form2" method="post" action="">
	<input type = "text" id = "Minutes" value = "5" readonly="readonly">
</form>

<script>

if (opener.document){

	parent = opener.document;

	var e = parent .getElementById("selectlist");

	var minvalue = e.options[e.selectedIndex].value;

	document.form2.Minutes.value = minvalue ;

}
</script>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
TLN_CANADAAuthor Commented:
Thank you, so far I cannot get it to work though. Here is what I have now on the parent form:

<script type="text/javascript">
function LaunchPopup(page,width,height) {
OpenWin = this.open(page, "CtrlWindow", "toolbar=no,menubar=no,location=no, scrollbars=yes,resizable=yes, dependent=no,directories=no, width=" + width + ",height=" + height + ",x=50,y=50");
}
</script>

<form id="form1" name="form1" method="post" action="">
<input type="text" id="parentValue" value="22" />
<p><a href="javascript:LaunchPopup('mednow2_beforescriptpass.htm','400','200');">Open Popup</a></p>
  <label>Dyad
  <select name="select">
    <option value="1">Start a Dyad Now</option>
    <option value="2">Change Dyad Question</option>
  </select>
  </label>

Open in new window




Then on the child page:

<script>

if (opener.document){

	parent = opener.document;

	var e = parent .getElementById("selectlist");

	var minvalue = e.options[e.selectedIndex].value;

	document.form2.Minutes.value = minvalue ;

}
</script>
<form id="form2" name="form2" method="post" action="">	
<input type = "text" id = "Minutes" value = "40" readonly="readonly">
	</form>

Open in new window


If we could change the arrangement too of the parent page so that when a user selects "Change Dyad Question" or "Start a Dyad Now" it takes them to the page (so the link is inbuilt to the dropdown) rather than having to click on the separate link on the page.

Thanks for your help,

D
0
 
Php_expertCommented:
Here is the arranged code:

Parent Form:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
	<script type="text/javascript">
		function LaunchPopup(page,width,height) {
			OpenWin = this.open(page, "CtrlWindow", "toolbar=no,menubar=no,location=no, scrollbars=yes,resizable=yes, dependent=no,directories=no, width=" + width + ",height=" + height + ",x=50,y=50");
		}
	</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
	<input type="text" id="parentValue" value="22" />
	<p><a href="javascript:LaunchPopup('mednow2_beforescriptpass.html','400','200');">Open Popup</a></p>
	<label>Dyad</label>
	<select name="select" id="selectlist" onchange="javascript:LaunchPopup('mednow2_beforescriptpass.html','400','200');">
		<option value="">Select Option--</option>
		<option value="1">Start a Dyad Now</option>
		<option value="2">Change Dyad Question</option>
	</select>
 </form>
</body>
</html>

Open in new window



Child form:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body>
<form id="form2" name="form2" method="post" action="">	
	<!-- For displaying Dyad selected value  -->
	<input type = "text" id ="Minutesval" name = "Minutesval" value = "40" readonly="readonly">
	<!-- For displaying Dyad selected Text  -->
	<input type = "text" id ="Minutestext" name = "Minutestext" value = "40" readonly="readonly">
</form>
<script language="javascript">
	if (opener.document){
		var parent = opener.document;
		var e = parent .getElementById("selectlist");
		var dyadValue = e.options[e.selectedIndex].value;
		var dyadText = e.options[e.selectedIndex].text;
		document.form2.Minutesval.value = dyadValue ;
		document.form2.Minutestext.value = dyadText ;
	}
</script>

</body>
</html>

Open in new window

0
 
TLN_CANADAAuthor Commented:
Thanks so much! This is working correctly now. We've made a few changes to the parent page and wondered if you could assist us in altering the code for this. They are in div tags now like this:

div class="col_1 firstcolumn">
                    <a href="#">Standard  </br>(40 Minutes) </br> (5 minute intervals)</a>
                    </div>
                    
                    <div class="col_1">
                    <a href="#">30 Min </br>(30 Minutes) </br> (5 minute intervals)</a>
                    </div>

Open in new window

 

We would like to send two values to the page, the main time (the one we were already working it) and the interval time.

Here is what the child page looks like:

	<input type = "text" id = "Minutes" value = "40" readonly="readonly">
	<input type = "text" id = "Interval" value = "05" readonly="readonly">

Open in new window

0
 
Php_expertCommented:
You have to do this as below:

parent form:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
	<script type="text/javascript">
		function LaunchPopup(obj) {
			var page = 'mednow2_beforescriptpass.html';
			var width = '400';
			var height = '200';
			var data = obj.id.split("#$#");
			document.form1.Minutes.value = data[0];
			document.form1.Interval.value = data[1];
			OpenWin = this.open(page, "CtrlWindow", "toolbar=no,menubar=no,location=no, scrollbars=yes,resizable=yes, dependent=no,directories=no, width=" + width + ",height=" + height + ",x=50,y=50");
		}
	</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<div class="col_1 firstcolumn">
	<a href="#" id="40#$#05" onclick="LaunchPopup(this);">Standard  </br>(40 Minutes) </br> (5 minute intervals)</a>
</div>
<div class="col_1">
	<a href="#" id="30#$#05"onclick="LaunchPopup(this);">30 Min </br>(30 Minutes) </br> (5 minute intervals)</a>
</div> 
<input type="hidden" name="Minutes" id = "Minutes" value="" />
<input type="hidden" name="Interval" id = "Interval" value="" />
</form>
</body>
</html>

Open in new window


Child form:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body>
<form id="form2" name="form2" method="post" action="">	
	<input type = "text" id = "Minutes" value = "40" readonly="readonly">
	<input type = "text" id = "Interval" value = "05" readonly="readonly">
</form>
<script language="javascript">
	if (opener.document){
		var parent = opener.document;
		var minutes = parent.form1.Minutes.value;
		var interval = parent.form1.Interval.value;
		document.form2.Minutes.value = minutes ;
		document.form2.Interval.value = interval ;
	}
</script>
</body>
</html>

Open in new window

0
 
TLN_CANADAAuthor Commented:
Unfortunately this isn't working. When I scroll over or click on of the links on the parent page it does not show a link to the child page but rather: #

When I click it doesn't do anything.  

Parent Page:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="css/megamenu.css" type="text/css" media="screen" /><!-- Menu -->

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mobile.js"></script>
<script type="text/javascript" src="js/form.js"></script>

<script type="text/javascript">
		function LaunchPopup(obj) {
			var page = 'http://www.clear.com/mednow2_beforescriptpass.htm';
			var width = '400';
			var height = '200';
			var data = obj.id.split("#$#");
			document.form1.Minutes.value = data[0];
			document.form1.Interval.value = data[1];
			OpenWin = this.open(page, "CtrlWindow", "toolbar=no,menubar=no,location=no, scrollbars=yes,resizable=yes, dependent=no,directories=no, width=" + width + ",height=" + height + ",x=50,y=50");
		}
	</script>

Open in new window


Content on Page:

<div class="col_1 firstcolumn">
					<a href="#" id="40#$#05" onclick="LaunchPopup(this);">Standard  </br>(40 Minutes) </br> (5 minute intervals)</a>
					</div>
					<div class="col_1">
					<a href="#" id="30#$#05"onclick="LaunchPopup(this);">30 Min </br>(30 Minutes) </br> (5 minute intervals)</a>
					</div> 
					<input type="hidden" name="Minutes" id = "Minutes" value="" />
					<input type="hidden" name="Interval" id = "Interval" value="" />
                   

Open in new window



Child Page:

<form id="form2" name="form2" method="post" action="">	<
	input type = "text" id = "Minutes" value = "40" readonly="readonly">
    <input type = "text" id = "Seconds" value = "00" readonly="readonly">
	<input type = "text" id = "Interval" value = "05" readonly="readonly">
	</form>
	
	<script language="javascript">
	if (opener.document){
		var parent = opener.document;
		var minutes = parent.form1.Minutes.value;
		var interval = parent.form1.Interval.value;
		document.form2.Minutes.value = minutes ;
		document.form2.Interval.value = interval ;
	}
</script>

Open in new window

0
 
Php_expertCommented:
I think you have missed out form tag in parent form.

<form id="form1" name="form1" method="post" action="">
<div class="col_1 firstcolumn">
	<a href="#" id="40#$#05" onclick="LaunchPopup(this);">Standard  </br>(40 Minutes) </br> (5 minute intervals)</a>
</div>
<div class="col_1">
	<a href="#" id="30#$#05"onclick="LaunchPopup(this);">30 Min </br>(30 Minutes) </br> (5 minute intervals)</a>
</div> 
<input type="hidden" name="Minutes" id = "Minutes" value="" />
<input type="hidden" name="Interval" id = "Interval" value="" />
</form>

Open in new window

0
 
TLN_CANADAAuthor Commented:
Sorry, I wasn't clearer, I did not include the end of the form tag as I have other lines on the page so this isssue still remains.
0
 
Slick812Commented:
just my limited view, but in javascript on the popup it would be much simpler to get a global js variable from the  window.opener
you just declare a var in the first page and access in the popup

first page JS code
<script>
var minutes1= "40";
var inter1= "5";

function LaunchPopup(obj) {
var page = 'http://www.clear.com/mednow2_beforescriptpass.htm';
var width = '400';
var height = '200';
var data = obj.id.split("#$#");

document.form1.Minutes.value = minutes1 = data[0];
document.form1.Interval.value = inter1 = data[1];
window.open(page, "CtrlWindow", "toolbar=no,menubar=no,location=no, scrollbars=yes,resizable=yes, dependent=no,directories=no, width=" + width + ",height=" + height + ",x=50,y=50");
}
</script>

Open in new window


popup js code
<script>
if (window.opener){
    document.form2.Minutes.value = window.opener.minutes1 ;
    document.form2.Interval.value = window.opener.inter1;
    }
</script>

Open in new window


Some times I can avoid confusion in coding if I do not try to access another window's javascript or DOM, you can send info to javascript in popup page by the URI query string

main JS code as
<script>
function LaunchPopup(obj) {
var width = '400';
var height = '200';
var data = obj.id.split("#$#");
var page = 'http://www.clear.com/mednow2_beforescriptpass.htm?min='+data[0]+'&int='+data[0];
// add the minutes and interval as a GET query srring

document.form1.Minutes.value = data[0];
document.form1.Interval.value = data[1];
window.open(page, "CtrlWindow", "toolbar=no,menubar=no,location=no, scrollbars=yes,resizable=yes, dependent=no,directories=no, width=" + width + ",height=" + height + ",x=50,y=50");
}
</script>

Open in new window


popup js code as
<script>

var query = location.search.substring(1);
if (query.length > 10) {
    var keyValues = query.split("&");
    var Value1 = keyValues[0].split("=");
    var Value2 = keyValues[1].split("=");
    if (Value1[0] == "min") document.form2.Minutes.value = Value1[1];
    if (Value2[0] == "int") document.form2.Interval.value = Value2[1];
    }
</script>

Open in new window


but most browsers these days Block all popup window creation, I know that all that I use firefox, chrome, IE will not work wid your popups unless I set them to allow popups
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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