Solved

PHP / Javascript get value question

Posted on 2013-01-23
11
308 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

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
 

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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Suggested Solutions

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…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

803 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