Javascript在线报价功能

Javascript Online Quote Function

本文关键字：功能 在线 Javascript      更新时间：2023-09-26

我想创建一个基于两个变量的在线报价。

用户需要输入邮政编码，然后从下拉列表（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专家，但这一个正在困扰我！感谢

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

/[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>

您的问题不够精确，但以下是我所理解的，您可以使用以下代码：

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

价格将显示在按钮旁边（下面的到底是什么意思？）您可以将#priceOutdiv移动到任何您想要的位置来放置价格。

相关文章：