Javascript Online Quote Function

I'm looking to create an online quote based on two variables.

The user needs to enter a postcode, and then select an item from a dropdown (1, 2 or 3). Each drop down has a different cost (£10.00, £20.00 and £30.00).

The user must enter their postcode, select 1/2/3 and then press "Get Quote".

If their postcode does not start with a B followed by a number, then text must appear informing that we do not deliver to this area. If the postcode is within B1-B99 then text must appear saying the cost is £10/£20/£30 dependent on which dropdown item they have selected.

I have managed to get the drop down and price alert to work but I am unsure how you integrate the postcode function above this (also I don't want an alert I want the cost to appear underneath the button).

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

Any help would be greatly appreciated, I am no Javascript expert but this one is bugging me! Thanks

Solution

You can use a regular expression to check the postcode.

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

Something like this:

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