and it works fine. I have a menu choice to show the 2 day forecast graph and, except for some sizing issues i can overcome, its nice. What i want is a drop down box that lets me select:
and then based on the selection either pick one of three urls or embed a modification into the url based on the value selected. Buried in the middle of the url is āahour=00ā and it needs to be changed to ahour=48 or 96 depending on the choice from the drop down box.
I have read about both jscript and php methods of extracting the value from the dropdown box, but nothing i try works as desired.
It would easiest to me to have 3 urls and
if 1 is selcted use the one with 00
else if 2 is selected use the one with 48
etc.
It involves a mix of jscript or php that i just canāt wrap my head around to get my result.
Anyone care to give me a clue?
Thanks,
Jim
Yepā¦ itās a mix of PHP and JavaScript. I took it as a coding challenge
The brief summary is:
name the <iframe> with a id=ānameā and add an onchange="scriptname();" so that when the selection dropdown changes, the JavaScript will be invoked.
change the value=".." in the select list to have the hours to use (00,48,96) and add an id="selectname to the <select> HTML.
Then the JavaScript can address both the select value and the iframe src value to change it.
Hereās my sample in a Saratoga wxnewpage.php
<?php
############################################################################
# A Project of TNET Services, Inc. and Saratoga-Weather.org (Canada/World-ML template set)
############################################################################
#
# Project: Sample Included Website Design
# Module: sample.php
# Purpose: Sample Page
# Authors: Kevin W. Reed <[email protected]>
# TNET Services, Inc.
#
# Copyright: (c) 1992-2007 Copyright TNET Services, Inc.
############################################################################
# This program is free software; you can redistribute it and/or
# modify it under the terms of the GNU General Public License
# as published by the Free Software Foundation; either version 2
# of the License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program; if not, write to the Free Software
# Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA
############################################################################
# This document uses Tab 4 Settings
############################################################################
require_once("Settings.php");
require_once("common.php");
############################################################################
$TITLE = langtransstr($SITE['organ']) . " - " .langtransstr('Sample Blank Page');
$showGizmo = true; // set to false to exclude the gizmo
include("top.php");
############################################################################
?>
</head>
<body>
<?php
############################################################################
include("header.php");
############################################################################
include("menubar.php");
############################################################################
// script by Ken True - [email protected]
// Copy your meteogram URL in theURL below
$theURL = "https://forecast.weather.gov/meteograms/Plotter.php?lat=34.789130&lon=-84.267810&wfo=ffc&zcode=GAZ007&gset=18&gdiff=6&unit=0&tinfo=CY6&ahour=00&pcmd=1101111111111000000000000000000000000000000000000000000000&lg=en&indu=0!1!1&dd=0&bw=0&hrspan=48&pqpfhr=6&psnwhr=6";
// NOTE: make sure the above has '&ahour=00' in it.. otherwise change ahour=0 to ahour=00
$theURL = str_replace('&ahour=0&','&ahour=00&',$theURL); // fix ahour if needed.
$uparts = parse_url($theURL);
parse_str($uparts['query'],$qparts);
print "<!-- qoarts=\n".var_export($qparts,true)." -->\n";
$lat = isset($qparts['lat'])?$qparts['lat']:'n/a';
$lon = isset($qparts['lon'])?$qparts['lon']:'n/a';
$wfo = isset($qparts['wfo'])?$qparts['wfo']:'n/a';
$zone = isset($qparts['zcode'])?$qparts['zcode']:'n/a';
?>
<div id="main-copy">
<div align="center">
<center><h3>NOAA 2 day graphical forecast</h3></center>
<select style="border:1px solid #000000; background-color:#FFFFFF; font-size:12px;" id="fcdays" onchange="swapframe();">
<option value="00" selected="selected">Day 1-2 Outlook</option>
<option value="48">Days 3-4 Outlook</option>
<option value="96">Days 5-6 Outlook</option>
</select>
<p>Issued for lat=<?php echo $lat; ?>, lon=<?php echo $lon;?>, WFO=<?php echo strtoupper($wfo) ?>, zone=<?php echo $zone;?></p>
<iframe id="nwsframe" src="<?php echo $theURL; ?>" width=775; height=900></iframe>
</div>
</div><!-- end main-copy -->
<script type="text/javascript">
// <![CDATA[
function swapframe(e) {
var mainURL = "<?php echo $theURL; ?>";
// get current selection value from dropdown box
var sel = document.getElementById("fcdays").value;
//console.log('sel='+sel);
var newHour = 'ahour='+sel;
var newURL = mainURL.replace('ahour=00',newHour);
//console.log('New sce='+newURL);
var nwsframe = document.getElementById("nwsframe");
if(nwsframe !== undefined) {
nwsframe.src = newURL;
//nwsframe.setAttribute('src',newURL);
console.log('nwsframe src set to '+newURL);
}
}
// ]]>
</script>
<?php
############################################################################
include("footer.php");
############################################################################
# End of Page
############################################################################
?>
Thank you so much! You make it look so easy. I swear i spent 4 or 5 hours looking at this today. Experience makes the elegant solution appear. I used to do some C++ programming 20+ years ago, so i understand a lot of basic principles. Modern stuff, not so much. Your kind and generous assistance is much appreciated. I learn from it.
Youāre very welcome, Jim. I remember pounding my head against JavaScript 20 years ago while collaboratively writing the original AJAX script (ajaxWDwx.js) for the template set with several others who have sadly vanished from the forums (Carterlake, Joske).