Question

我正在尝试建立一个基于邮政编码计算交付的网站。是将HTML表单中的数据导入JavaScript的最佳方法吗？我希望它采取用户的邮政编码，并提醒用户计算的费用是多少。有人可以提供一些有关如何做到这一点的见解。这是我的代码：

<h3><i>Begin by entering your requested order below</i><h3>
<form action="#" method="post" id="delInfo">
	Zip Code:<br>
	<input type="text" name="zipcode" id="zipcode"><br>
	<p><i>Delivery fee will be calculated based on zip code</i><p>
	First Name:<br>
	<input type="text" name="firstname" id="firstname"></br>
	Last Name:<br>
	<input type="text" name="streetaddress" id="lastname"></br>
	Street Address:<br>
	<input type="text" name="zipcode" id="address"></br>
	Email Address:<br>
	<input type="text" name="email"></br>
	<input type="submit" value="Submit">
	
	
</form>
<script>
	function newDel() {
		'use strict';
		var zip = document.getElementById('zipcode');
		var firstname = document.getElementById('firstname');
		var lastname = document.getElementById('lastname');
		var street address = document.getElementById('address');
		var email = document.getElementById('emailaddress');
	
	
	}
	function zipCalc(zip) {
		if zip == 32231{
		alert("your fee added delivery fee will be 2 dollars.")
		}
		
	}

</body>
</html>

Answer 1

正如epascarello隐约暗示的那样，您可能需要与送货公司的API进行沟通才能获得实际价格。如果你打算按照你所暗示的邮政编码收费，那么你正在做的工作应该有用。那就是说，让我们谈谈JavaScript！

首先，document.getElementById()返回文档对象模型（DOM）元素。您需要访问其value属性才能获取文本框中的值，如下所示：

var zipElement = document.getElementById("zipcode");
var zipVal = zipElement.value;

如果您之后不需要对元素的引用，则可以在这样的一行中执行此操作：

var zipVal = document.getElementById("zipcode").value;

if语句应该在条件周围括号：

if (zipVal == 32231) {
    alert("Delivery fee will be 2 dollars.")
}

现在您需要为按钮添加一个监听器来调用您的JavaScript函数。我将您的javascript移到了表单上方，因为在分配onClick函数之前代码必须存在！

添加onClick="newDel();要阻止表单在验证错误时提交（比如说您希望他们填写邮政编码，但他们没有），那么您可以在return false;中{ {1}}功能。

newDel()

（旁注：您可以使用jQuery等JavaScript库更轻松地使用DOM元素，这允许您使用类，ID，元素类型和许多其他选择器来查询元素。）

Answer 2

我假设您希望在表单提交之前完成此计算，因此您需要向zip输入添加事件侦听器

document.addEventListener('DOMContentLoaded', function(){

  var zip            = document.getElementById('zipcode');
  // when the zip input value changes it will alert the user
  zip.addEventListener('change', zipCalc)

  var firstname      = document.getElementById('firstname');
  var lastname       = document.getElementById('lastname');
  var street_address = document.getElementById('address');
  var email          = document.getElementById('emailaddress');

  function zipCalc(e) {
    zip_input_val = zip.value;
    if (zip_input_val == 32231) {
        alert("your fee added delivery fee will be 2 dollars.")
    }
    else {
        alert('We cant calculate your cost');
    }
  }

})

<h3><i>Begin by entering your requested order below</i><h3>
<form action="#" method="post" id="delInfo">
	Zip Code:<br>
	<input type="text" name="zipcode" id="zipcode"><br>
	<p><i>Delivery fee will be calculated based on zip code</i><p>
	First Name:<br>
	<input type="text" name="firstname" id="firstname"><br/>
	Last Name:<br>
	<input type="text" name="streetaddress" id="lastname"><br/>
	Street Address:<br>
	<input type="text" name="zipcode" id="address"><br/>
	Email Address:<br>
	<input type="text" name="email"><br/>
	<input type="submit" value="Submit">
	
	
</form>

Js Fiddle

Answer 3

你很接近，你只需要在getElementByID

之后获得该值

您可以使用：

function zipCalc(zip) {
    var zip = document.getElementById("zipcode").value; // this gets value from the form element with ID zipcode.
    if (zip == "32231"){
    alert("your fee added delivery fee will be 2 dollars.")
    }

}

从HTML表单输入Javascript？

3 个答案: