將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

正如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 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> 

提斯

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.")
    }

}