Load popup from form

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.

mhouldridgeAsked:
Who is Participating?
 
nizsmoConnect With a Mentor DeveloperCommented:
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
 
nizsmoDeveloperCommented:
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
 
mhouldridgeAuthor Commented:
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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
mhouldridgeAuthor Commented:
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
 
mhouldridgeAuthor Commented:
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
 
nizsmoDeveloperCommented:
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
 
mhouldridgeAuthor Commented:
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
 
mhouldridgeAuthor Commented:
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
 
nizsmoDeveloperCommented:
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
 
Ashish PatelCommented:
replace
var txtval = form1.numofemail.value;
with
var txtval = document.forms[0].numofemail.value;

and check now
0
 
nizsmoDeveloperCommented:
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
 
mhouldridgeAuthor Commented:
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
 
nizsmoDeveloperCommented:
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
 
mhouldridgeAuthor Commented:
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
 
mhouldridgeAuthor Commented:
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
 
nizsmoDeveloperCommented:
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
 
nizsmoDeveloperCommented:
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
 
mhouldridgeAuthor Commented:
Hi,

Added this now however it gives "done" with exclamation mark within the status, and no popup is shown now.
0
 
mhouldridgeAuthor Commented:
Sorry, forget that last one.

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

0
 
nizsmoDeveloperCommented:
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
 
mhouldridgeAuthor Commented:
Ah... I see now!...

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

0
 
mhouldridgeAuthor Commented:
Hi,

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





0
 
mhouldridgeAuthor Commented:
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
 
nizsmoDeveloperCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.