Drupal页面:http://www.vertexwaterfeatures.com/herbicide-calculators

关键是我不需要模板,所以我想我只是将一个纯HTML页面放入站点中,但是js无法正常工作-我尝试了链接,但也无效。

我显然遗漏了一些东西...

这是代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Herbicide Calculators</title>
<style type="text/css">
.calculator {float: left;width: 280px;padding: 5px;margin: 0 5px 5px;border-radius: 5px;-moz-border-radius: 5px;border-width: thin;border-style: solid;color: #000;}
.calculator .form-row {overflow: auto;padding: 2px 2px;border: thin solid #D6D6D6;font-family: Arial, Helvetica, sans-serif;font-size: 14px;}
.calculator .form-row LABEL {float: left;width: 150px;line-height: 1.1em;}
.calculator .form-row INPUT {float: right;width: 110px;}
.calculator .form-row.last-row {background-color: #E0E0E0;}
.calculator .form-row-buttons {text-align: center;margin-top: 5px;}
.calculator SMALL {line-height: 0.7em;font-size: 10px;}
.calculator DD {font-size: 11px;font-style: italic;margin-bottom: 0;}
.calculator DT {font-size: 11px;
font-weight: bold;
}
</style>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
  $('#a_qty_calculator').submit(function() {
    a_qty_calc();
    return false;
  });

    $('#b_qty_calculator').submit(function() {
    b_qty_calc();
    return false;
  });
});
  function a_qty_calc() {
  var pr = parseFloat($('#pr').val());
  var sw = parseFloat($('#sw').val());
  var ad = parseFloat($('#ad').val());
  var dc = parseFloat($('#dc').val());
  var pg = parseFloat($('#pg').val());

  var ta = document.getElementById('totalPrice')

  var ta = Math.round((pr * sw) / 43560 * 100) / 100;
  var taf = Math.round(ad * ta * 100) / 100;
  var ga = Math.round((taf * dc * 2.72) / pg * 100) / 100;
  var oa = Math.round(ga * 128 * 100) / 100;
  var gab = Math.round(ga / 1000 * 100) / 100;
  var oab = Math.round(gab * 128 * 100) / 100;
  $('#ta').val(ta);
  $('#taf').val(taf);
  $('#ga').val(ga);
  $('#oa').val(oa);
  $('#gab').val(gab);
  $('#oab').val(oab);
}

function b_qty_calc() {
  var wad = parseFloat($('#wad').val());
  var wdc = parseFloat($('#wdc').val());
  var wpg = parseFloat($('#wpg').val());
  var wta = parseFloat($('#wta').val());

  var wtaf = Math.round(wad * wta * 100) / 100;
  var wga = Math.round((wtaf * wdc * 2.72) / wpg * 100) / 100;
  var woa = Math.round(wga * 128 * 100) / 100;
  var wgab = Math.round(wga / 1000 * 100) / 100;
  var woab = Math.round(wgab * 128 * 100) / 100;
  $('#wtaf').val(wtaf);
  $('#wga').val(wga);
  $('#woa').val(woa);
  $('#wgab').val(wgab);
  $('#woab').val(woab);
}
</script>
</head>
<body>
<form action="" class="calculator" id="a_qty_calculator" method="post">
<h3>Perimeter Treatment</h3>
  <div class="form-row optional">
    <label for="pr">Perimeter</label>
    <input id="pr" name="pr" type="text" value="0" />
  </div>
    <div class="form-row optional">
    <label for="sw">Swath Width</label>
    <input id="sw" name="sw" type="text" value="0" />
  </div>
  <div class="form-row optional">
    <label for="ad">Average Depth</label>
    <input id="ad" name="ad" type="text" value="0" />
  </div>
  <div class="form-row optional">
    <label for="dc">Desired Concentration</label>
    <input id="dc" name="dc" type="text" value="0" />
  </div>
  <div class="form-row optional">
    <label for="pg">Lbs of AI/Gallon</label>
    <input id="pg" name="pg" type="text" value="0" />
  </div>
    <div class="form-row optional last-row">
    <label for="ta">Treatment Acres</label>
    <input id="ta" name="ta" type="text" value="0" />
  </div>
  <div class="form-row optional last-row">
    <label for="taf">Treatment Area Acre Ft</label>
    <input id="taf" name="taf" type="text" value="0" />
  </div>
  <div class="form-row optional last-row">
    <label for="ga">Gallons to Apply PPM</label>
    <input id="ga" name="ga" type="text" value="0" />
  </div>
  <div class="form-row optional last-row">
    <label for="oa">Ounces to Apply PPM</label>
    <input id="oa" name="oa" type="text" value="0" />
  </div>
  <div class="form-row optional last-row">
    <label for="gab">Gallons to Apply PPB</label>
    <input id="gab" name="gab" type="text" value="0" />
  </div>
  <div class="form-row optional last-row">
    <label for="oab">Ounces to Apply PPB</label>
    <input id="oab" name="oab" type="text" value="0" />
  </div>
  <div class="form-row-buttons">
     <input type='submit' id='submit' value="Calculate" />
    <input name="reset" type="reset" value="Reset" />
  </div>
</form>

<form action="" class="calculator" id="b_qty_calculator" method="post">
  <h3>Whole Lake Treatment</h3>
  <div class="form-row optional">
    <label for="wta">Treatment Acres</label>
    <input id="wta" name="wta" type="text" value="0" />
  </div>
  <div class="form-row optional">
    <label for="wad">Average Depth</label>
    <input id="wad" name="wad" type="text" value="0" />
  </div>
  <div class="form-row optional">
    <label for="wdc">Desired Concentration</label>
    <input id="wdc" name="wdc" type="text" value="0" />
  </div>
  <div class="form-row optional">
    <label for="wpg">Lbs of AI/Gallon</label>
    <input id="wpg" name="wpg" type="text" value="0" />
  </div>
  <div class="form-row optional last-row">
    <label for="wtaf">Treatment Area Acre Ft</label>
    <input id="wtaf" name="wtaf" type="text" value="0" />
  </div>
  <div class="form-row optional last-row">
    <label for="wga">Gallons to Apply PPM</label>
    <input id="wga" name="wga" type="text" value="0" />
  </div>
  <div class="form-row optional last-row">
    <label for="woa">Ounces to Apply PPM</label>
    <input id="woa" name="woa" type="text" value="0" />
  </div>
  <div class="form-row optional last-row">
    <label for="wgab">Gallons to Apply PPB</label>
    <input id="wgab" name="wgab" type="text" value="0" />
  </div>
  <div class="form-row optional last-row">
    <label for="woab">Ounces to Apply PPB</label>
    <input id="woab" name="woab" type="text" value="0" />
  </div>
<div class="form-row-buttons">
    <input name="submit" type="submit" value="Calculate"/>
    <input name="reset" type="reset" value="Reset" />
  </div>
  </form>
  </body>
</html>

最佳答案

您应该在<script>标记之前包含jquery库,如下所示;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


然后它可能会工作..

07-24 20:37