如何创建一个按钮来计算下面列出的代码形式的总数。我希望在用户填写相应字段后，有一个按钮来计算总数，然后他们可以点击另一个按钮进行订购。所以有一个按钮来发布表单，另一个按钮来计算总数
<form name="form1" method="post" action="orderCalc.php" id="calculator">
<fieldset>
<legend>Personal Information </legend>
<ul>
<li>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" tabindex="10">
</li>
<li>
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" tabindex="20">
</li>
<li>
<label for="email">Email</label>
<input type="email" name="email" id="email" tabindex="30">
</li>
<li>
<label for="timezone">TimeZone</label>
<select name="timezone" id="timezone">
<option value="Pacific/Midway">(GMT-11:00) Midway Island, Samoa</option>
<option value="America/Adak">(GMT-10:00) Hawaii-Aleutian</option>
<option value="Etc/GMT+10">(GMT-10:00) Hawaii</option>
<option value="Pacific/Marquesas">(GMT-09:30) Marquesas Islands</option>
<option value="Pacific/Gambier">(GMT-09:00) Gambier Islands</option>
<option value="America/Anchorage">(GMT-09:00) Alaska</option>
<option value="America/Ensenada">(GMT-08:00) Tijuana, Baja California</option>
<option value="Etc/GMT+8">(GMT-08:00) Pitcairn Islands</option>
<option value="America/Los_Angeles">(GMT-08:00) Pacific Time (US & Canada)</option>
<option value="America/Denver">(GMT-07:00) Mountain Time (US & Canada)</option>
<option value="America/Chihuahua">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
<option value="America/Dawson_Creek">(GMT-07:00) Arizona</option>
<option value="America/Belize">(GMT-06:00) Saskatchewan, Central America</option>
<option value="America/Cancun">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
<option value="Chile/EasterIsland">(GMT-06:00) Easter Island</option>
<option value="America/Chicago">(GMT-06:00) Central Time (US & Canada)</option>
<option value="America/New_York">(GMT-05:00) Eastern Time (US & Canada)</option>
<option value="America/Havana">(GMT-05:00) Cuba</option>
<option value="America/Bogota">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
<option value="America/Caracas">(GMT-04:30) Caracas</option>
<option value="America/Santiago">(GMT-04:00) Santiago</option>
<option value="America/La_Paz">(GMT-04:00) La Paz</option>
<option value="Atlantic/Stanley">(GMT-04:00) Faukland Islands</option>
<option value="America/Campo_Grande">(GMT-04:00) Brazil</option>
<option value="America/Goose_Bay">(GMT-04:00) Atlantic Time (Goose Bay)</option>
<option value="America/Glace_Bay">(GMT-04:00) Atlantic Time (Canada)</option>
<option value="America/St_Johns">(GMT-03:30) Newfoundland</option>
<option value="America/Araguaina">(GMT-03:00) UTC-3</option>
<option value="America/Montevideo">(GMT-03:00) Montevideo</option>
<option value="America/Miquelon">(GMT-03:00) Miquelon, St. Pierre</option>
<option value="America/Godthab">(GMT-03:00) Greenland</option>
<option value="America/Argentina/Buenos_Aires">(GMT-03:00) Buenos Aires</option>
<option value="America/Sao_Paulo">(GMT-03:00) Brasilia</option>
<option value="America/Noronha">(GMT-02:00) Mid-Atlantic</option>
<option value="Atlantic/Cape_Verde">(GMT-01:00) Cape Verde Is.</option>
<option value="Atlantic/Azores">(GMT-01:00) Azores</option>
<option value="Europe/Belfast">(GMT) Greenwich Mean Time : Belfast</option>
<option value="Europe/Dublin">(GMT) Greenwich Mean Time : Dublin</option>
<option value="Europe/Lisbon">(GMT) Greenwich Mean Time : Lisbon</option>
<option value="Europe/London">(GMT) Greenwich Mean Time : London</option>
<option value="Africa/Abidjan">(GMT) Monrovia, Reykjavik</option>
<option value="Europe/Amsterdam">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
<option value="Europe/Belgrade">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
<option value="Europe/Brussels">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris</option>
<option value="Africa/Algiers">(GMT+01:00) West Central Africa</option>
<option value="Africa/Windhoek">(GMT+01:00) Windhoek</option>
<option value="Asia/Beirut">(GMT+02:00) Beirut</option>
<option value="Africa/Cairo">(GMT+02:00) Cairo</option>
<option value="Asia/Gaza">(GMT+02:00) Gaza</option>
<option value="Africa/Blantyre">(GMT+02:00) Harare, Pretoria</option>
<option value="Asia/Jerusalem">(GMT+02:00) Jerusalem</option>
<option value="Europe/Minsk">(GMT+02:00) Minsk</option>
<option value="Asia/Damascus">(GMT+02:00) Syria</option>
<option value="Europe/Moscow">(GMT+03:00) Moscow, St. Petersburg, Volgograd</option>
<option value="Africa/Addis_Ababa">(GMT+03:00) Nairobi</option>
<option value="Asia/Tehran">(GMT+03:30) Tehran</option>
<option value="Asia/Dubai">(GMT+04:00) Abu Dhabi, Muscat</option>
<option value="Asia/Yerevan">(GMT+04:00) Yerevan</option>
<option value="Asia/Kabul">(GMT+04:30) Kabul</option>
<option value="Asia/Yekaterinburg">(GMT+05:00) Ekaterinburg</option>
<option value="Asia/Tashkent">(GMT+05:00) Tashkent</option>
<option value="Asia/Kolkata">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</option>
<option value="Asia/Katmandu">(GMT+05:45) Kathmandu</option>
<option value="Asia/Dhaka">(GMT+06:00) Astana, Dhaka</option>
<option value="Asia/Novosibirsk">(GMT+06:00) Novosibirsk</option>
<option value="Asia/Rangoon">(GMT+06:30) Yangon (Rangoon)</option>
<option value="Asia/Bangkok">(GMT+07:00) Bangkok, Hanoi, Jakarta</option>
<option value="Asia/Krasnoyarsk">(GMT+07:00) Krasnoyarsk</option>
<option value="Asia/Hong_Kong">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</option>
<option value="Asia/Irkutsk">(GMT+08:00) Irkutsk, Ulaan Bataar</option>
<option value="Australia/Perth">(GMT+08:00) Perth</option>
<option value="Australia/Eucla">(GMT+08:45) Eucla</option>
<option value="Asia/Tokyo">(GMT+09:00) Osaka, Sapporo, Tokyo</option>
<option value="Asia/Seoul">(GMT+09:00) Seoul</option>
<option value="Asia/Yakutsk">(GMT+09:00) Yakutsk</option>
<option value="Australia/Adelaide">(GMT+09:30) Adelaide</option>
<option value="Australia/Darwin">(GMT+09:30) Darwin</option>
<option value="Australia/Brisbane">(GMT+10:00) Brisbane</option>
<option value="Australia/Hobart">(GMT+10:00) Hobart</option>
<option value="Asia/Vladivostok">(GMT+10:00) Vladivostok</option>
<option value="Australia/Lord_Howe">(GMT+10:30) Lord Howe Island</option>
<option value="Etc/GMT-11">(GMT+11:00) Solomon Is., New Caledonia</option>
<option value="Asia/Magadan">(GMT+11:00) Magadan</option>
<option value="Pacific/Norfolk">(GMT+11:30) Norfolk Island</option>
<option value="Asia/Anadyr">(GMT+12:00) Anadyr, Kamchatka</option>
<option value="Pacific/Auckland">(GMT+12:00) Auckland, Wellington</option>
<option value="Etc/GMT-12">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</option>
<option value="Pacific/Chatham">(GMT+12:45) Chatham Islands</option>
<option value="Pacific/Tongatapu">(GMT+13:00) Nuku'alofa</option>
<option value="Pacific/Kiritimati">(GMT+14:00) Kiritimati</option>
</select>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Order Information</legend>
<ul>
<li>
<label for="topic">Topic</label>
<select name="topic" id="topic" tabindex="50">
<option value="TP" selected="selected">Term Paper</option>
<option value="CW">Course Work</option>
<option value="BR">Book Report</option>
<option value="BR2">Book Review</option>
<option value="MR">Movie Review</option>
<option value="DT">Dissertation and Thesis</option>
<option value="PR">Proofreading</option>
<option value="CC">Case Study/ Case Report</option>
<option value="MP">Math Problem/Programming</option>
<option value="LR">Lab Report</option>
<option value="AR">Article</option>
<option value="AC">Article Critique</option>
<option value="RP">Reaction Paper</option>
<option value="SP">Statistics Project</option>
<option value="MC">Multiple Choice Questions (Non-Time Framed)</option>
<option value="PP">Proposal</option>
</select>
</li>
<li>
<label for="papertype">Paper Type </label>
<select name="papertype" id="papertype">
<option value="writing">Essay/Writing</option>
<option value="editing">Editing</option>
<option value="ppt">PowerPoint Presentation and Poster</option>
</select>
</li>
<li>
<label for="space">Spacing</label>
<select name="space" id="space">
<option value="sspace" selected="selected">Single Space</option>
<option value="dspace">Double Space</option>
</select>
</li>
<li>
<label for="aclev">Academic Level</label>
<select name="aclev" id="aclev">
<option value="HS">High School </option>
<option value="CLLG">College</option>
<option value="UGT">Undergraduate</option>
<option value="MST">Masters</option>
<option value="PHD">PhD</option>
</select>
</li>
<li>
<label for="subjectarea">Subject Area</label>
<select name="subjectarea" id="subjectarea">
<option value="art">Art</option>
<option value="literatureandlang">Literature and Language</option>
<option value="socialscience">Social Science</option>
<option value="history">History</option>
<option value="mathsnecon">Mathematics and Economics</option>
<option value="techneng">Technology and Engineering</option>
<option value="nature">Nature</option>
<option value="education">Education</option>
<option value="healthnmed">Health and Medicine</option>
<option value="commandmedia">Communication and Media</option>
<option value="religionandtheo">Religion and Theology</option>
<option value="lifescience">Life Science</option>
<option value="tourism">Tourism</option>
<option value="creativewriting">Creative Writing</option>
<option value="bizandmarketing">Business and Marketing</option>
<option value="accnfinance">Accounting and Finance</option>
</select>
</li>
<li>
<label for="paperstyle">Paper Style</label>
<select name="paperstyle" id="paperstyle">
<option value="APA">APA</option>
<option value="MLA">MLA</option>
<option value="Turabian">Turabian</option>
<option value="Chicago">Chicago</option>
<option value="Harvard">Harvard</option>
<option value="Oxford">Oxford</option>
<option value="Vancouver">Vancouver</option>
<option value="Others">Others</option>
</select>
</li>
<li>
<label for="paperlanguage">Paper Language</label>
<select name="paperlanguage" id="paperlanguage">
<option value="Engus">English (US)</option>
<option value="Enguk">English (UK)</option>
</select>
</li>
<li>
<label for="papernos">Number of Pages</label>
<input type="number" name="papernos" id="papernos">
</li>
<li>
<label for="numberofsources">Number Of Sources</label>
<input type="text" name="numberofsources" id="numberofsources">
</li>
<li>
<label for="paperurgency">Paper Urgency</label>
<select name="paperurgency" id="paperurgency">
<option value="10-23hrs">10hrs-23hrs</option>
<option value="24hrs">24hrs</option>
<option value="2-3days">2-3 days</option>
<option value="3-4days">3-4 days</option>
<option value="4-5days">4-5 days</option>
<option value="5-6days">5-6 days</option>
<option value="7-9days">7-9 days</option>
<option value="10-13days">10-13 days</option>
<option value="14-20days">14-20 days</option>
<option value="21-29days">21-29 days</option>
<option value="30days+">30days+</option>
</select>
</li>
<li>Cost per page : $</li>
<li>
<label for="currency">Currency</label>
<select name="currency" id="currency">
<option value="us$">US $</option>
</select>
</li>
<li>
<label for="orderdetails">Order Details</label>
<input type="text" name="orderdetails" id="orderdetails">
</li>
<li>
<label for="discountpercentage">Discount percentage</label>
<input type="text" name="Discount Percentage" id="Discount Percentage">
</li>
<li>
<label for="addationaldetails">Additional details</label>
<textarea name="addationaldetails" id="addationaldetails"></textarea>
</li>
<p>Total</p> <input type="text" id="total">
<li>
<input type="submit" name="orderSubmit" id="order2" value="Order now">
</li>
</ul>
</fieldset>
</form>
<script type="text/javascript">
//calculator script begins here
var price;
var aclevel=parseInt(document.getElementById("aclev"));
var paperugency=document.getElementById("paperurgency");
var pages=parseInt(document.getElementById("papernos"));
var papertype=document.getElementById("papertype");
//if statements to calculate the price are here
var total= "$" + (price*pages).toFixed(2);;
document.getElementById('txt-estimate').value = total;
</script>
答案 0 :(得分：1)
将您的脚本更改为
function calcTotal(e) {
var price;
var aclevel=parseInt(document.getElementById("aclev"));
var paperugency=document.getElementById("paperurgency");
var pages=parseInt(document.getElementById("papernos"));
var papertype=document.getElementById("papertype");
//if statements to calculate the price are here
var total= "$" + (price*pages).toFixed(2);;
document.getElementById('txt-estimate').value = total;
return false;
}
然后按一下按钮
<button type="button" onclick="calcTotal()">Calculate Total</button>
答案 1 :(得分：0)
您可以从按钮调用该功能，并从按钮传递对该表单的引用。然后，您可以使用元素名称作为表单的属性，这比getElementById更快（并且更少键入）：
<input type="button" onclick="calcTotal(this.form);" value="Calculate total">
然后在函数中，您必须获得每个元素的值。当你这样做时：
var aclevel = parseInt(document.getElementById("aclev"));
您将元素传递给 parseInt ，因此它将返回 NaN 。所以在函数中：
function calcTotal(form) {
var price;
// Get the value of the elements and convert to number
var aclevel = form.aclev.value;
var paperugency = +form.paperurgency.value;
var pages = +form.papernos.value;
var papertype = +form.papertype.value;
//if statements to calculate the price are here
var total= "$" + (price * pages).toFixed(2);
form.txt-estimate.value = total;
}