将 HTML 表单的输入转换为 Javascript？

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

你很接近，你只需要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.")
    }

}

Answer 2

正如 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(); 为防止表单在出现验证错误时提交（假设您希望他们填写邮政编码，而他们不填写），那么您可以在newDel() 函数中使用return false;。

    <script>
        /*I moved your javascript above the form because the code has to exist before you assign the onClick function!
        */
        function newDel() {
          var zipVal = document.getElementById('zipcode').value;
          var firstname = document.getElementById('firstname');
          var lastname = document.getElementById('lastname');
          var streetAddress = document.getElementById('address');
          var email = document.getElementById('emailaddress');	

          if(zipVal == ""){
              alert("Please provide a zip code.");
              return false;
          } else {
              //Now call your zipCalc() function:
              zipCalc(zipVal);
          }
        }
    
        function zipCalc(zip) {
          if (zip == 32231) {
              alert("Delivery fee will be 2 dollars.");
          }
        }
    </script>

    <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" onClick="newDel()" value="Submit">
    </form>

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

Answer 3

我假设您希望在提交表单之前完成此计算，因此您需要将事件侦听器添加到 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