Coding education requested

Normally, i can figure out what i want from examples i find elsewhere in the code. This one has me stumped.
What i have is:

<div align="center">

<center><h3>NOAA 2 day graphical forecast</h3></center>
<iframe src="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" width=775; height=900></iframe>
</div>

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:

<select style="border:1px solid #000000; background-color:#FFFFFF; font-size:12px;" name="fcdays">

  <option value="1" selected="selected">Day 1-2 Outlook</option>
  <option value="2">Days 3-4 Outlook</option>
  <option value="3">Days 5-6 Outlook</option>
</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 :slight_smile:

The brief summary is:

  1. name the <iframe> with a id=ā€œnameā€ and add an onchange="scriptname();" so that when the selection dropdown changes, the JavaScript will be invoked.
  2. 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
############################################################################
?>

I have it live (with my local forecast) at USA Website with PHP & AJAX - NOAA 2 day graphical forecast

I hope this helpsā€¦

1 Like

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.

Jim

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).

I find that using https://www.w3schools.com/ and https://stackoverflow.com/ are very helpful in reminding of syntax and even to find someone has already solved the programming problem. Also, https://github.com/ have many repositories with code that can be freely shared.

The hard part is remembering the ā€˜gotchasā€™ with HTML/JavaScript when working with the DOM to modify HTML on the fly.

  • each id="name" must have a unique name value
  • always check to see if an element is returned when a getElementById('name'); is done ā€¦ sometimes that id is not in the HTML
  • put the inline script at the bottom of the page so the browser will have parsed the HTML before you try to getElementById on the name
  • use console.log('...debug text...'); and the developer tools in your browser to follow the action and comment them out when no longer needed.

Thatā€™s the short form of my ā€˜lessons learnedā€™ :slight_smile:

1 Like

Opps Error message popped up Ken

Iā€™ll need a bit more info to debugā€¦
URL to page showing the problem?
What exact error message was displayed?

You do understand that this page only works for United States locations as it uses the NOAA/NWS weather forecast.

Its now working again on your site Ken. It was showing an error earlier todayā€¦

This script is available from Gerry at SE Lincoln, NE USA Weather Website - Select SE Lincoln Weather Scripts. The file is wxgraphicalfc.zip. I use it on my website here: Clayton, NC Weather - Meteogram.

Nice! Thanks for the links.

Jim