Question

我正在尝试为我的网站制作一个表单，我可以计算出客户重新布线的成本。我已经完成了HTML元素，但我正在努力做javascript。

我想表现的是：

<b>
<form id="rewire" action="">
  <p>Occupancy<br />
   Empty<input type="radio" name="occupancy" value="empty" /><br /> 
    Occupied<input type="radio" name="occupancy" value="livedin" /><br />
    <br />
Type of property
<br />
    <select name="property">
        <option value="bungalow">Bungalow</option>
        <option value="terraced">Terraced</option>
        <option value="detached">Semi / Detached</option>
    </select>
    <br /><br />
Number of rooms
<br />
Bedrooms
<br />
    <select name="bedrooms">
        <option value="1bed">1</option>
        <option value="2bed">2</option>
        <option value="3bed">3</option>
        <option value="4bed">4</option>
        <option value="5bed">5</option>
        <option value="6bed">6</option>
        <option value="7bed">7</option>
        <option value="8bed">8</option>
    </select>
        <br /><br />
Living Rooms
<br />
    <select name="Livingrooms">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
            <br /><br />
Bathrooms
<br />
    <select name="bathrooms">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
            <br /><br />
Kitchens
<br />
    <select name="Kitchens">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
            <br /><br />
Dining Rooms
<br />
    <select name="Diningrooms">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</form>
</b>

我希望计算器从表单中添加单独的元素。例如： -

每间卧室的费用为210英镑   每个客厅270英镑   每间浴室£305
  每个kithen£470
  每个餐厅210英镑

如果住在+£250

梯田+£250
  梯田+阁楼350英镑

+£340表格隐藏的标准费用。

Answer 1

您应该在每个表单元素上添加一个ID，以便更容易使用javascript进行定位。例如：

<select name="property" id="property">

我还强烈建议使用jQuery，这样可以更轻松地从不同的表单元素中获取值。如果你这样做，那么javascript将是：

function calc(){
    total = 340;
    total += $("#livingroom").val() * 270;
    //etc

}

Answer 2

你不应该使用1bed，2bed等。你应该使用1,2等作为值。

HTML代码必须是这样的：

    <select name="property">
    <option name="bungalow" value="itscost(ex:110$)">Bungalow</option>
    <option name="terraced" value"itscost">Terraced</option>
    <option name="detached" value"itscost">Semi / Detached</option>
    </select>
<select name="bedrooms">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</select>

jQuery代码：

 var abc = $("select[name=property] option:selected").val();
 var def = $("select[name=bedrooms] option:selected").val();
 //each bedroom 210$
 var bedroomscost = def * 20;
 var total = abc + bedroomcost + livingroomcost.... etc. ;

你应该做这些。我希望我能说清楚。

Answer 3

如果你想为你的网站创建一个计算器，我建议你看看“Appizy”。

它可以立即将电子表格转换为HTML和JAVASCRIPT中的独立Web计算工具。您不需要对整个界面和计算公式进行硬编码！

只需使用Open-或LibreOffice创建工作计算器，然后使用Appizy。

我希望它可以提供帮助。最好，尼古拉斯

表格计算器

3 个答案: