Solved

Load popup from form

Posted on 2007-11-16
24
737 Views
Last Modified: 2012-06-21
Experts,

I have an index page with a form, a list box element and submit button.  When the user selects an option and then presses the submit btton I would like to pass the list box value to a hidden object within a small popup window.

My code for the submit button is - <INPUT TYPE="button" value="Get quote" onclick="popWindow(this.form)">

My popWindow script is;

<script>
var txtval = form.numofemail.value;
var theURL = 'popup.html';
var width  = 250;
var height = 350;

function popWindow() {
newWindow = window.open(theURL,'newWindow','toolbar=no,menubar=no,resizable=no,scrollbars=no,status=no,location=no,width=300,height='+height);
}
</script>


There are two forms, the first is called form1, the second (within the popup) is called form2.

At the moment the popup window opens, but the popup.html page does not display even though it is in the root of the web.

0
Comment
Question by:mhouldridge
  • 13
  • 10
24 Comments
 
LVL 21

Expert Comment

by:nizsmo
ID: 20297495
is the popup.html file located in the same directory as your calling script (your javascript)? It needs to be in the same directory for your code to work.
0
 

Author Comment

by:mhouldridge
ID: 20297535
Hi,

Yes, that's what's strange...

I have the script within another page (quickquote.html) and it works however when it runs from http://localhost/index.html (the index page) it does not find the page.
0
 

Author Comment

by:mhouldridge
ID: 20297543
Also,

I think it may be something to do with the variables as the width and height are not taken.  As you can see I have specified the height and it works.

In the other page, which is located in the root it works fine.  Everything is ran from the root, no sub-directories.
0
 

Author Comment

by:mhouldridge
ID: 20297550
I have altered the function to;

newWindow = window.open('popup.html','newWindow','toolbar=no,menubar=no,resizable=no,scrollbars=no,status=no,location=no,width=300,height='+height);

.... as you can see I have specified the page and it now works, so the variables above are not being used???

Any ideas?
0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20297574
Yes I see what is wrong, something wrong with your line txtval. commenting this solves the problem.
<script type="text/javascript" language="javascript">

//var txtval = form.numofemail.value;

var theURL = 'popup.html';

var width  = 250;

var height = 350;
 

function popWindow() {

newWindow = window.open(theURL,'newWindow','toolbar=no,menubar=no,resizable=no,scrollbars=no,status=no,location=no,width=300,height='+height);

}

</script>
 

<input type="button" onclick="popWindow();" value="POpup!">

Open in new window

0
 

Author Comment

by:mhouldridge
ID: 20297576
I think its because the variables are outside of the function, and I think functions are private...

Im new to javascript as you may of guessed....

Im getting "error on page" now, with the following;

<script type="text/javascript"> >
function popWindow(form) {
var txtval = form1.numofemail.value;
var theURL = 'popup.html';
var width  = 300;
var height = 400;
newWindow = window.open(theURL,'newWindow','toolbar=no,menubar=no,resizable=no,scrollbars=no,status=no,location=no,width='+width+',height='+height);
}

</script>
0
 

Author Comment

by:mhouldridge
ID: 20297586
That example works!!....

What was the problem?..

I need to take the value of the listbox from form1 and put it into the hidden value on form2 in the popup window which is why I used the txtval = form.numofemail.value part.

Any ideas?
0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20297595
i suspect this is causing the problem:
var txtval = form1.numofemail.value;

what kind of field is numofemail? set an id attribute to it: id="numofemail" then use the following code:

<script type="text/javascript"> >
function popWindow(form) {
var txtval = document.getElementById('numofemail').value;
var theURL = 'popup.html';
var width  = 300;
var height = 400;
newWindow = window.open(theURL,'newWindow','toolbar=no,menubar=no,resizable=no,scrollbars=no,status=no,location=no,width='+width+',height='+height);
}

</script>
0
 
LVL 23

Expert Comment

by:Ashish Patel
ID: 20297596
replace
var txtval = form1.numofemail.value;
with
var txtval = document.forms[0].numofemail.value;

and check now
0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20297601
yep, use this:
var txtval = document.getElementById('numofemail').value;

should work. and dont' forget to assign the id attribute to the textbox or whatever numofemail is.

It was just a javascript error preventing the code from running :)
0
 

Author Comment

by:mhouldridge
ID: 20297634
Hi,

Many thanks for you help with this.

How would I assign to txtval value to the hidden element in the popup page?

Would I use javascript on the value=txtval.value or something like this on the hidden element?

thanks again!
0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20297656
THis should do it.
<script type="text/javascript"> >

function popWindow(form) {

var txtval = document.getElementById('numofemail').value;

var theURL = 'popup.html';

var width  = 300;

var height = 400;

newWindow = window.open(theURL + 'value=' + txtval,'newWindow','toolbar=no,menubar=no,resizable=no,scrollbars=no,status=no,location=no,width='+width+',height='+height);

}
 

</script>

Open in new window

0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:mhouldridge
ID: 20297674
Ok, but within the popup.html page I have a form with a hidden element as follows;

<input type="hidden" name="hiddenField" value="">

I would like to assign to value of the hidden element to the value stored in txtval, taken from the listbox on the form within the index page.

is this possible, and would it look simething like;

<input type="hidden" name="hiddenField" value="txtval">

thanks again!
0
 

Author Comment

by:mhouldridge
ID: 20297681
Sorry, I can see that you have used a get url there....

The popup page is html, not server-side scripted, is it still possible to pull the values from using a html page?
0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20297688
Sorry correction from my script above, forgot a question mark.

Answer to your question is yes, give me a minute.
<script type="text/javascript"> >

function popWindow(form) {

var txtval = document.getElementById('numofemail').value;

var theURL = 'popup.html';

var width  = 300;

var height = 400;

newWindow = window.open(theURL + '?value=' + txtval,'newWindow','toolbar=no,menubar=no,resizable=no,scrollbars=no,status=no,location=no,width='+width+',height='+height);

}

 

</script>

Open in new window

0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20297703
In your popup.html, you will need to execute a function onload for the body:

<body onload="qs();">

then add the following code into your javascript area at the top of your code.

Then have an id for your hidden element:
<input type="hidden" id="hiddenfield" name="hiddenField" value="">

and using javascript function in the code snippet it will assign the value of the hidden field. Try submitting the form to see if it works properly.
var qsParm = new Array();

function qs() 

{

	var query = window.location.search.substring(1);

	var parms = query.split('&');

	for (var i=0; i<parms.length; i++) 

	{

		var pos = parms[i].indexOf('=');

		if (pos > 0) 

		{

			var key = parms[i].substring(0,pos);

			var val = parms[i].substring(pos+1);

			qsParm[key] = val;

		}

	}

	document.getElementById('hiddenfield').value = qaParam['value'];

}

Open in new window

0
 

Author Comment

by:mhouldridge
ID: 20297777
Hi,

Added this now however it gives "done" with exclamation mark within the status, and no popup is shown now.
0
 

Author Comment

by:mhouldridge
ID: 20297787
Sorry, forget that last one.

It loads the popup but the value of the hidden field has nothing....

0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20297808
you will not be able to see the hidden field value by viewing the source, as it is modified after the source code has been set. To test if this works, try:

alert(document.getElementById('hiddenfield').value);

somewhere in the javascript code, after the function has run, it should echo the hidden field value correctly.
0
 

Author Comment

by:mhouldridge
ID: 20297830
Ah... I see now!...

I have added the alert, however nothing is shown - placed at end of script within head section.

0
 
LVL 21

Accepted Solution

by:
nizsmo earned 500 total points
ID: 20297940
replace your javascript with the below code. also put a link anywhere on the page:

<a href="#" onClick="test();">Show Hidden Value</a>

then you can click on the link to see the alert with the hidden field value.

hope this works...


var qsParm = new Array();

function qs() 

{

        var query = window.location.search.substring(1);

        var parms = query.split('&');

        for (var i=0; i<parms.length; i++) 

        {

                var pos = parms[i].indexOf('=');

                if (pos > 0) 

                {

                        var key = parms[i].substring(0,pos);

                        var val = parms[i].substring(pos+1);

                        qsParm[key] = val;

                }

        }

        document.getElementById('hiddenfield').value = qaParam['value'];

}
 

function test()

{

  alert(document.getElementById('hiddenfield').value);

}

Open in new window

0
 

Author Comment

by:mhouldridge
ID: 20298329
Hi,

Yes, that pops up a window, unfortunately there isnt a value in the alertbox... sorry!





0
 

Author Comment

by:mhouldridge
ID: 20299396
Hi,

My original list box element is the element I want to place as the value for the hidden one.  The listbox is called numofemail, and I want it's value to be used for the value of the hidden element within the popup window form.

?
0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20301954
can you please post your full code (original html file and popup.html) as in what you have so far so that i can fully test it out and get it working instead of trying to stab in the dark everytime :)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 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

23 Experts available now in Live!

Get 1:1 Help Now