Solved

PHP / Javascript get value question

Posted on 2013-01-23
11
303 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
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 dynamically set the form action using jQuery.

914 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

15 Experts available now in Live!

Get 1:1 Help Now