Solved

PHP / Javascript get value question

Posted on 2013-01-23
11
300 Views
Last Modified: 2013-01-26
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
Comment
Question by:TLN_CANADA
  • 5
  • 5
11 Comments
 
LVL 5

Expert Comment

by:Php_expert
ID: 38813202
0
 

Author Comment

by:TLN_CANADA
ID: 38813219
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
 
LVL 5

Expert Comment

by:Php_expert
ID: 38813474
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
 

Author Comment

by:TLN_CANADA
ID: 38815300
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
 
LVL 5

Expert Comment

by:Php_expert
ID: 38817581
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:TLN_CANADA
ID: 38817615
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
 
LVL 5

Expert Comment

by:Php_expert
ID: 38817824
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
 

Author Comment

by:TLN_CANADA
ID: 38817875
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
 
LVL 5

Expert Comment

by:Php_expert
ID: 38818231
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
 

Author Comment

by:TLN_CANADA
ID: 38819598
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
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
ID: 38819855
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article discusses how to create an extensible mechanism for linked drop downs.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now