【问题标题】:Generating a price from a HTML select form using a Javascript function使用 Javascript 函数从 HTML 选择表单生成价格
【发布时间】:2013-10-04 13:24:55
【问题描述】:

我正在为网站构建报价生成器,该表单使用三个下拉框。我刚刚开始了解 JS,所以我需要一些帮助,将选定的数据从 HTML 传递到 JS 并返回报价。我创建了一个函数,它接受三个参数(服务、卧室、家具),您可以在这里看到:http://jsfiddle.net/alan1986/g3bKV/ 我确信有一种更简洁的方法可以编写这个函数,它需要更少的代码。

无论如何,这是我最不担心的,这个功能可能太大了,但至少它有效。我一直在研究如何组合表单中的选定选项并将它们传递给函数的答案,我可以看到它如何使用整数工作,但我需要使用字符串。所以这是我一直在使用的一些代码,用于从 HTML 中获取选定的选项,然后将结果返回到页面 - 我的问题是如何将此信息链接到函数以返回结果?

function output(){
    document.write(document.getElementById("service").value + "</br>");
    document.write(document.getElementById("bedrooms").value + "</br>");
    document.write(document.getElementById("furnishing").value + "</br>");

    var results = document.getElementById("service").value + "<br>" +
                  document.getElementById("bedrooms").value + "<br>" +
                  document.getElementById("furnishing").value + "<br>";

    document.getElementById("yourOutputDiv").innerHTML = results;

【问题讨论】:

  • 您希望返回的报价是什么样的? ##£ 作为字符串?当我听到“报价”时,我认为是完全的,但我猜这不是你要找的
  • 是的,我希望结果是一个字符串,即“£75”,我希望它出现在表单下方 div 中的“=”之后。我希望将三个选定的选项作为其三个参数传递给函数,并且当找到匹配的三个选项时,将返回适当的字符串,例如“£75”。我是否需要在此函数之上构建一个函数或将三个选项发送到数组然后将数组传递给函数?我同样很高兴在表单下方有一个提交按钮,单击该按钮会返回报价。有没有更简单的方法来编写我的函数?谢谢
  • 您可以在下面使用我的代码并添加一些智能来设置您的字符串值吗?或者你需要帮助吗?
  • 我需要帮助:)

标签: javascript html forms function quote


【解决方案1】:

我编写了一个单例,将onchange 事件附加到每个表单元素,并在更改时更新 this.data 值。通过查看您的代码和您的 jsfiddle(这对我不起作用),这种方法可能没有多大意义。我已经在我的本地机器上测试过了,它可以工作

<script>
    var quoteMaker = {
        data : {
            'services':null,
            'bedrooms':null,
            'furnishing':null,
            'quoteString':''
        },
        servicesListener : function(){
           this.data.services = document.getElementById('service').options[document.getElementById('service').selectedIndex].text;
        },
        bedroomsListener : function(){
           this.data.bedrooms = document.getElementById('bedrooms').options[document.getElementById('bedrooms').selectedIndex].text;
        },
        furnishingListener : function(){
           this.data.furnishing = document.getElementById('furnishing').options[document.getElementById('furnishing').selectedIndex].text;
        },
        changeData : function(divObj){
            this.data.quoteString='';
            if( divObj.id == 'service' ){
                this.servicesListener();
            }else if( divObj.id == 'bedrooms' ){
                this.bedroomsListener();
            }else if( divObj.id == 'furnishing' ){
                this.furnishingListener();
            }
            this.updateQuote();
        },
    updateQuote : function() {
      if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£70"; 
      if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£75";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£80";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£85";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£90";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£100";

      if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£60"; 
      if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£65";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£70";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£75";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£80";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£85";

      if (this.data.services == "Inventory" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£55"; 
      if (this.data.services == "Inventory" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£60";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£65";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£70";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£75";
      if (this.data.services == "Inventory" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£80";


      if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£50"; 
      if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£55";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£60";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£65";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£70";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£75";

      if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£40"; 
      if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£45";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£50";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£55";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£60";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£65";

      if (this.data.services == "Check-In" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£35"; 
      if (this.data.services == "Check-In" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£40";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£45";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£50";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£55";
      if (this.data.services == "Check-In" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£60";


      if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£55"; 
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£60";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£65";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£70";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£75";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Furnished") 
         this.data.quoteString = "£80";

      if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£45"; 
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£50";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£55";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£60";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£65";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Part Furnished") 
         this.data.quoteString = "£70";

      if (this.data.services == "Check-Out" &&this.data.bedrooms =="1" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£40"; 
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="2" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£45";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="3" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£50";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="4" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£55";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="5" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£60";
      if (this.data.services == "Check-Out" &&this.data.bedrooms =="6+" && this.data.furnishing == "Unfurnished (except for white goods)") 
         this.data.quoteString = "£65";
    document.getElementById("quote").innerHTML=this.data.quoteString;
},
        init: function(){

        }   
    }
    quoteMaker.init();
</script>


    <div id="form">
    <p class="lead">Complete the form for an instant quote</p>
        <form name="quote-maker" action="">
            <p>Select service<br />
            <select id="service" name="services" onchange="quoteMaker.changeData(this);">
                <option value="Inventory">Inventory</option>
                <option value="Check-In">Check-In</option>
                <option value="Check-Out">Check-Out</option>
            </select></p>        
            <p class="lead">How many bedrooms does the property have?<br />
            <select id="bedrooms" name="bedrooms" onchange="quoteMaker.changeData(this);">
                <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="5">6+</option>
            </select></p> 
            <p class="lead">Is the property furnished or unfurnished?<br />
            <select id="furnishing" name="furnishing" onchange="quoteMaker.changeData(this);">
                <option value="1">Furnished</option>
                <option value="2">Part Furnished </option>
                <option value="3">Unfurnished (except for white goods)</option>
            </select></p>
        </form>
    </div>
    <div id="quote"></div>

注意:我清理了您的 html。将所有 &lt;select&gt; 输入包装在一个表单中

【讨论】:

  • 感谢您的帮助,因此使用此代码选择不同的选项会返回表单下方的选定选项。我想要做的是通过我的函数将这三个选项作为参数传递,当找到匹配的“if”语句时,它会返回相应的值。例如,如果有人选择“Inventory”+“1”+“Furnished”,这些将作为其(服务、卧室、家具)参数传递给报价函数,并且当找到匹配的“if”语句时:if (service == "库存" && 卧室 == "1" && 家具 == "带家具") 退货 ("£70");
  • 好的。用你的函数逻辑修改了我的 updateQuote 方法。从这里拿走
  • 非常感谢,你真的帮了大忙,这很有魅力:D
  • 您忽略了字符串中"Unfurnished (except for white goods)" 的空格,导致该条件始终失败。更新了我的例子。现在工作。
  • 哦,我刚刚意识到 unfurnished 不起作用,再次感谢,所以我需要括号前的空格?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-02-16
  • 2014-04-20
  • 2011-06-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多