Javascript 在线报价功能

Question

我正在寻找基于两个变量的在线报价。

用户需要输入邮政编码，然后 select 从下拉列表中选择一个项目（1、2 或 3）。每个下拉列表都有不同的成本（10.00 英镑、20.00 英镑和 30.00 英镑）。

用户必须输入他们的邮政编码，select 1/2/3 然后按 "Get Quote"。

如果他们的邮政编码不是以 B 开头后跟数字，则必须显示文字，通知我们不向该地区送货。如果邮政编码在 B1-B99 范围内，则必须显示说明费用为 £10/£20/£30 的文字，具体取决于他们 selected.

的下拉项目

我已经设法让下拉菜单和价格提醒起作用，但我不确定你是如何在上面集成邮政编码功能的（我也不想要提醒，我希望成本显示在按钮下方）。

<!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>Untitled Document</title>
</head>

<body>
<div id="quote" style="padding:5%;">
Gain an online quotation for your skip!</center>
<form name="priceCalc" action="">
<input class="form-control input-box" id="postcode1" type="text"            name="postcode" placeholder="">
<select name="Product">
<option value="Please Select">Please Select</option>
<option value="10">1</option>
<option value="20" >2</option>
<option value="30">3</option>
</select>
<input type="button" value="Get Quote" onclick="price();"><br>
</form>
<script>
    function price() {
    var Amt = document.priceCalc.Product;
    var price = Amt.value;
    alert(price);
}
</script>
</body>
</html>

任何帮助将不胜感激，我不是 Javascript 专家，但这一个让我很烦！谢谢

Answer 1

你的问题不够精确，但这是我的理解，你可以使用这个代码：

<div id="quote" style="padding:5%;">
    Gain an online quotation for your skip!
    <form name="priceCalc" action="">
        <input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
        <select name="Product">
            <option value="Please Select">Please Select</option>
            <option value="10">1</option>
            <option value="20" >2</option>
            <option value="30">3</option>
        </select>
        <input type="button" value="Get Quote" onclick="price()" /><span id="priceOut"></span><br/>
    </form>
</div>
<script>
    function price() {
        var Amt = document.priceCalc.Product;
        var price = Amt.value;
        document.getElementById('priceOut').innerHTML = price;
    }
</script>

价格将显示在按钮旁边（underneath 到底是什么意思？）您可以将 #priceOut div 移动到您想要的任意位置。

Answer 2

您可以使用正则表达式来检查邮政编码。

/[B][1-9]-[B][0-99]/

像这样：

<div id="quote" style="padding:5%;">
  Gain an online quotation for your skip!
  <form name="priceCalc" action="">
    <input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
    <select name="Product">
      <option value="Please Select">Please Select</option>
      <option value="10">1</option>
      <option value="20">2</option>
      <option value="30">3</option>
    </select>
    <input type="button" value="Get Quote" onclick="price()" /><span id="priceOut"></span>
    <br/>
  </form>
</div>
<script>
  function price() {
    var postcode = document.priceCalc.postcode;
    var Amt = document.priceCalc.Product;
    var price = Amt.value;

    var regex = /[B][1-9]-[B][0-99]/;

    if (!isNaN(price)) {
      if (postcode.value.match(regex) !== null) {
        document.getElementById('priceOut').innerHTML = "&pound;" + price;
      } else {
        document.getElementById('priceOut').innerHTML = "We do not deliver to this area.";
      }
    } else {
      document.getElementById('priceOut').innerHTML = price;
    }


  }
</script>

Javascript 在线报价功能

Javascript Online Quote Function

javascript

forms

submit-button

quote