Question

我希望根据两个变量创建在线报价。

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

用户必须输入邮政编码，选择1/2/3，然后按“获取报价”。

如果他们的邮政编码不以B后跟数字开头，那么必须出现文字，告知我们不会传送到此区域。如果邮政编码在B1-B99范围内，则必须出现文字，说明费用为10英镑/ 20英镑/ 30英镑，具体取决于他们选择的下拉项目。

我设法让下拉和价格提醒工作，但我不确定你如何整合邮政编码功能（我也不想要一个警报，我希望成本显示在按钮下方）。

<!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>

价格会显示在按钮旁边（下面的意味着什么？）您可以移动#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在线报价功能

2 个答案: