2012-02-08 66 views
0

Drupal的页面:http://www.vertexwaterfeatures.com/herbicide-calculatorsJava脚本的将无法正常工作,但它的Drupal页面上工作

的一点是,我不想的模板,所以我想我会只是做一个简单的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> 
+2

您不包括jQuery的。 – Chad 2012-02-08 21:53:03

+0

该代码工作正常:[http://jsfiddle.net/cdyzA/](http://jsfiddle.net/cdyzA/) – 2012-02-08 21:56:39

回答

0

是看来你是,其中包括你的jQuery库?

1

我不知道你在哪里包括一个jQuery库,你的所有代码都在一个jQuery文档中。在HTML中使用它你必须包含jquery:“”。顺便说一句,drupal可能会自动包含它,这就是为什么它在那里工作。

+0

Drupal可以设置为合并javascript文件,所以你可能错过了jquery其实是在哪里被包括在内。 – chipcullen 2012-02-08 22:00:15

2

你应该在你的<script>标签之前包含jquery库,就像下面一样;

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

然后它可能会工作..

+0

完美地工作,我知道我错过了一件简单的事情。有点像忽略了某些东西没有插入! – user1198301 2012-02-09 13:25:39