Open in a new window

CaptainB · 06-11-2007, 11:11 PM

Hi guys!

I have a huge problem! I have added this code to my page:

Code:

	<div id="weather"><font color="#333333" face="Arial" style="font-size: 8pt">Enter 4-letter ICAO station identifier.</font>
<FORM method="POST" action="http://adds.aviationweather.noaa.gov/metars/index.php">
<font face="Arial">
<INPUT SIZE="14" NAME="station_ids" TYPE="text" style="font-size: 8pt; font-family: Arial" value="Enter ICAO"></font></font>
				<br />
<font face="Arial">
<INPUT TYPE="radio" NAME="std_trans" VALUE="standard" CHECKED=""></font></font><font face="Arial" style="font-size: 8pt" color="#333333"> Raw Format
				<br />
</font><font face="Arial">
<font color="#333333">
<INPUT TYPE="radio" NAME="std_trans" VALUE="translated"></font></font><font face="Arial" style="font-size: 8pt" color="#333333"> Translated</font>
<font face="Arial">
				<br>
<INPUT TYPE="checkbox" NAME="chk_metars" checked></font></font><font face="Arial" style="font-size: 8pt" color="#333333"> METARs   
</font><font face="Arial">
<font color="#333333">
<INPUT TYPE="checkbox" NAME="chk_tafs"></font></font><font face="Arial" style="font-size: 8pt" color="#333333"> TAFs</font>
				<br />
<font face="Arial">
<font color="#333333">
                <SELECT name="hoursStr" style="font-size: 8pt; font-family: Arial">
                  <OPTION SELECTED> most recent only</OPTION>
                  <OPTION>          past 1 hours</OPTION>
                  <OPTION>          past 2 hours</OPTION>
                  <OPTION>          past 3 hours</OPTION>
                  <OPTION>          past 4 hours</OPTION>
                  <OPTION>          past 5 hours</OPTION>
                  <OPTION>          past 6 hours</OPTION>
                  <OPTION>          past 12 hours</OPTION>
                  <OPTION>          past 18 hours</OPTION>
                  <OPTION>          past 24 hours</OPTION>
                  <OPTION>          past 36 hours</OPTION>
                </SELECT></font></font><font face="Arial" style="font-size: 8pt" color="#333333">
</font>
<font face="Arial">
				<br />
				<br />
<font color="#333333">
<INPUT NAME="submit" style="font-size: 8pt; font-family: Arial" TYPE="submit" VALUE="Submit"></font></font><font face="Arial" style="font-size: 8pt" "color:#333333"> </font><font face="Arial"><font color="#333333"><INPUT TYPE="reset" style="font-size: 8pt; font-family: Arial" VALUE="Reset Form"></font></font><font face="Arial" style="font-size: 8pt" color="#333333">
              </font></FORM></FORM></div>

It works fine however I want the SUBMIT button to open the link in a new window.

I then made this code:

Code:

<!-- Goes into HEAD and /HEAD -->
<SCRIPT LANGUAGE="JavaScript">
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=50');");
}</script>
<!-- HEAD END -->
<!-- The HTML -->
	<div id="weather"><font color="#333333" face="Arial" style="font-size: 8pt">Enter 4-letter ICAO station identifier.</font>
<FORM method="POST" action="http://adds.aviationweather.noaa.gov/metars/index.php">
<font face="Arial">
<INPUT SIZE="14" NAME="station_ids" TYPE="text" style="font-size: 8pt; font-family: Arial" value="Enter ICAO"></font></font>
				<br />
<font face="Arial">
<INPUT TYPE="radio" NAME="std_trans" VALUE="standard" CHECKED=""></font></font><font face="Arial" style="font-size: 8pt" color="#333333"> Raw Format
				<br />
</font><font face="Arial">
<font color="#333333">
<INPUT TYPE="radio" NAME="std_trans" VALUE="translated"></font></font><font face="Arial" style="font-size: 8pt" color="#333333"> Translated</font>
<font face="Arial">
				<br>
<INPUT TYPE="checkbox" NAME="chk_metars" checked></font></font><font face="Arial" style="font-size: 8pt" color="#333333"> METARs   
</font><font face="Arial">
<font color="#333333">
<INPUT TYPE="checkbox" NAME="chk_tafs"></font></font><font face="Arial" style="font-size: 8pt" color="#333333"> TAFs</font>
				<br />
<font face="Arial">
<font color="#333333">
                <SELECT name="hoursStr" style="font-size: 8pt; font-family: Arial">
                  <OPTION SELECTED> most recent only</OPTION>
                  <OPTION>          past 1 hours</OPTION>
                  <OPTION>          past 2 hours</OPTION>
                  <OPTION>          past 3 hours</OPTION>
                  <OPTION>          past 4 hours</OPTION>
                  <OPTION>          past 5 hours</OPTION>
                  <OPTION>          past 6 hours</OPTION>
                  <OPTION>          past 12 hours</OPTION>
                  <OPTION>          past 18 hours</OPTION>
                  <OPTION>          past 24 hours</OPTION>
                  <OPTION>          past 36 hours</OPTION>
                </SELECT></font></font><font face="Arial" style="font-size: 8pt" color="#333333">
</font>
<font face="Arial">
				<br />
				<br />
<font color="#333333">

<INPUT NAME="submit" style="font-size: 8pt; font-family: Arial" TYPE="submit" VALUE="Submit" onClick="javascript:popUp('http://adds.aviationweather.noaa.gov/metars/index.php')" >
</font></font><font face="Arial" style="font-size: 8pt" "color:#333333"> </font><font face="Arial"><font color="#333333"><INPUT TYPE="reset" style="font-size: 8pt; font-family: Arial" VALUE="Reset Form"></font></font><font face="Arial" style="font-size: 8pt" color="#333333">
              </font></FORM></FORM></div>

Now the problem comes. If I click SUBMIT a new window opens..But it's not with the content, which should be there. Also the new site opens in main window but this does it WITH the right content. (Hope you understand ?) I only want the RIGHT content in the popup window and the main window to stay at MY site.

You can test it here: Try to write "EKYT" in the ICAO code window and see for yourself.
http://www.guild-metus.com/xflightx/test.html

glenngv · 06-12-2007, 05:59 PM

Code:

function createPopup(popupName){
  var w = window.open("", popupName, "width=800, height=600, resizable=1");
  w.focus();
  return true;
}

Code:

<form method="POST" action="http://adds.aviationweather.noaa.gov/metars/index.php" target="popup" onsubmit="return createPopup(this.target);">
...
<input name="btnSubmit" type="submit" value="Submit" />
</form>

Avoid naming your button or any other element as "submit" as this will conflict when you call document.theForm.submit() method.

CaptainB · 06-13-2007, 07:36 AM

Hmm I tried to inset your code, but I still can't get it working. I guess it's me, but would you mind explaining where to inset it to get it right? I'm a dummy to this, sorry..

glenngv · 06-13-2007, 04:04 PM

Change your popUrl() function with the createPopup() function I posted.
In the form tag, add the target attribute and onsubmit handler that I added.
In the submit button, remove the onclick handler and rename the button to something else.

CaptainB · 06-13-2007, 10:21 PM

Now it starts to get really, really emberassing...for me! It still dosn't work and I still can't figure it out.

*Damn I feel stupid!*

glenngv · 06-13-2007, 10:44 PM

Can you post the related codes?

CaptainB · 06-13-2007, 10:59 PM

Yup.

The part that I've modified is following:

Here's what it original was:

Quote:

<SCRIPT LANGUAGE="JavaScript">
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=50');");
}</script>

and here's what I'd change it to:

Quote:

<SCRIPT LANGUAGE="JavaScript">
function createPopup(popupName){
var w = window.open("", popupName, "width=800, height=600, resizable=1");
w.focus();
return true;
}</script>

Here's the original HTML part (only the part that I'd change):

Quote:

<INPUT NAME="submit" style="font-size: 8pt; font-family: Arial" TYPE="submit" VALUE="Submit" onClick="javascript

opUp('http://adds.aviationweather.noaa.gov/metars/index.php')" >
</font></font><font face="Arial" style="font-size: 8pt" "color:#333333"> </font><font face="Arial"><font color="#333333"><INPUT TYPE="reset" style="font-size: 8pt; font-family: Arial" VALUE="Reset Form"></font></font><font face="Arial" style="font-size: 8pt" color="#333333">
</font></FORM></FORM></div>

Changed it to:

Quote:

(I know that I miss some style attributes in the last code, which was there in the first, but they dosn't mean anything to the java script)

Cheers!

glenngv · 06-13-2007, 11:06 PM

Why did you combine the input and form tag?

And you have 2 </form> tags, you cannot put a form within a form.

Code:

<input name="btnSubmit" type="submit" value="Submit" form method="POST" action="http://adds.aviationweather.noaa.gov/metars/index.php" target="popup" onsubmit="return createPopup(this.target);"/>
</font></font><font face="Arial" style="font-size: 8pt" "color:#333333"> </font><font face="Arial"><font color="#333333"><INPUT TYPE="reset" style="font-size: 8pt; font-family: Arial" VALUE="Reset Form"></font></font><font face="Arial" style="font-size: 8pt" color="#333333">
</font></FORM></FORM></div>
</div>

What I posted earlier was very clear.

Code:

<form method="POST" action="http://adds.aviationweather.noaa.gov/metars/index.php" target="popup" onsubmit="return createPopup(this.target);">
...
<input name="btnSubmit" type="submit" value="Submit" />
</form>

glenngv · 06-14-2007, 09:35 PM

1. Change this:

Code:

<FORM method="POST" action="http://adds.aviationweather.noaa.gov/metars/index.php">

to:

Code:

<form name="frm" method="POST" action="http://adds.aviationweather.noaa.gov/metars/index.php" target="popup" onsubmit="return createPopup(this.target);">

2. Change this:

Code:

<INPUT NAME="submit" style="font-size: 8pt; font-family: Arial" TYPE="submit" VALUE="Submit"></font></font><font face="Arial" style="font-size: 8pt" "color:#333333"> </font><font face="Arial"><font color="#333333"><INPUT TYPE="reset" style="font-size: 8pt; font-family: Arial" VALUE="Reset Form"></font></font><font face="Arial" style="font-size: 8pt" color="#333333">
</font></FORM></FORM>

to:

Code:

<input name="btnSubmit" type="submit" value="Submit" />
<input type="reset" value="Reset Form" />
</form> <!-- should only be one </form> tag! -->

I did not include the CSS styles, you can put them in external .css file or in <style> tag so that your html is not cluttered.

3. Replace your popUp() function with createPopup() function I created.

If you can't still follow it, then I don't know what to do.

CaptainB · 06-14-2007, 10:12 PM

It now looks like this, right?:

Code:

<form name="frm" method="POST" action="http://adds.aviationweather.noaa.gov/metars/index.php" target="popup" onsubmit="return createPopup(this.target);">
<input name="btnSubmit" type="submit" value="Submit" />
<input type="reset" value="Reset Form" />
</form>

But it dosn't popup.......................I think I'm mentally retarded....

glenngv · 06-14-2007, 10:26 PM

Any error message? Did you include the createPopup() function?

CaptainB · 06-14-2007, 10:31 PM

Quote:

Did you include the createPopup() function?

Yup. It stands between the <head> and </head> tags like this:

Code:

<head>
<SCRIPT LANGUAGE="JavaScript">
function createPopup(popupName){
  var w = window.open("", popupName, "width=800, height=600, resizable=1");
  w.focus();
  return true;
}
</script>

</head>

And no error message. You can view it yourself here: http://www.guild-metus.com/xflightx/test.html

glenngv · 06-14-2007, 11:04 PM

I didn't say you do it exactly like this.

Code:

<form name="frm" method="POST" action="http://adds.aviationweather.noaa.gov/metars/index.php" target="popup" onsubmit="return createPopup(this.target);">
<input name="btnSubmit" type="submit" value="Submit" />
<input type="reset" value="Reset Form" />
</form>

You are submitting an empty form that only has 2 buttons, with no form fields.

Go back and carefully read my above post (Post #9) again and do Steps 1-3 one by one.

Basically, this is how your page should look like (I didn't include unrelated tags)

Code:

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function createPopup(popupName){
  var w = window.open("", popupName, "width=800, height=600, resizable=1");
  w.focus();
  return true;
}
</script>
</head>
<body>
...
<form name="frm" method="POST" action="http://adds.aviationweather.noaa.gov/metars/index.php" target="popup" onsubmit="return createPopup(this.target);">
...form fields here
...form fields here
...form fields here
...
<input name="btnSubmit" type="submit" value="Submit" />
<input type="reset" value="Reset Form" />
</form>
...
</body>
</html>

Take note, there should be only one form tag in your case.

CaptainB · 06-15-2007, 06:56 AM

Glenngv, you are the damn best member around here!!!! Thank you so much for keep sticking to this thread, even through I was so damn retarded (I still am :P)

Thank you so much, now it works - you're tha man!!