JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


	<h1>USGS Water Services Daily Values AJAX Example</h1>
	<p>This example shows how the USGS Daily Values web service can be invoked using Asynchronous Javascript and XML (AJAX) technology. The jQuery framework is used. The latest mean streamflow daily value is retrieved for the site of interest. (Note: the site must serve streamflow.)</p>
	<form id="form1" method="post" action="">
        <table width="100%" border="0">
          <tr>
            <td><label for="site"><strong>USGS Site No.</strong></label>              <input name="site" type="text" id="site" value="01646500" size="8" maxlength="15" />
              <a href="http://wdr.water.usgs.gov/nwisgmap/index.html">Find sites </a></td>
          </tr>
          <tr>
            <td><label for="sitedesc"><strong>Site Description</strong></label></td>
          </tr>
          <tr>
            <td><textarea name="sitedesc" cols="25" rows="2" readonly="readonly" id="sitedesc"></textarea></td>
          </tr>
          <tr>
            <td><label for="discharge"><strong>Latest Streamflow ft.<sup>3</sup>/sec</strong></label></td>
          </tr>
          <tr>
            <td><input id="discharge" size="7" readonly="readonly" /></td>
          </tr>
          <tr>
            <td><label for="date"><strong>Date</strong></label></td>
          </tr>
          <tr>
            <td><input id="date" size="10" readonly="readonly" /></td>
          </tr>
        </table>
      <p>
            <input type="button" name="query" id="query" value="Get Latest Streamflow" />
            <input type="reset" name="reset" id="reset" value="Reset" />
      </p>
</form>

JavaScript

//<![CDATA[
	// Proof of concept for AJAX usage with instantaneous values service
	$('#query').click(function() {
		site = $('#site').attr("value");
		$.ajax({
		  url: "/nwis/dv/?format=json&sites=" + site + "&parameterCd=00060&statCd=00003",
		  dataType: 'json',
		  data: '',
		  success: function(json){
			   $('#sitedesc').text(json.value.timeSeries[0].sourceInfo.siteName);
			   $('#discharge').val(json.value.timeSeries[0].values[0].value[0].value);
			   datetime = json.value.timeSeries[0].values[0].value[0].dateTime;
			   // Get date
			   myDate = datetime.substr(5,2) + '/' + datetime.substr(8,2) + '/' + datetime.substr(0,4);
			   $('#date').val(myDate);
			 },
		  error : function(XMLHttpRequest, textStatus, errorThrown) {
			   $('#sitedesc').text('Error. Site Number was probably invalid or not a time-series site.');
			   $('#discharge').val('');
			   $('#date').val('');
			   $('#time').val('');
			   $('#tz').val('');
		  }
		});
	});
//]]>