使用Javascript函數從HTML選擇表單生成價格

我正在爲網站構建報價生成器，表單使用三個下拉框。我剛剛開始討論JS，所以我需要一些幫助將所選數據從HTML傳遞給JS並返回一個引號。我已經創建了一個函數，它有三個參數（服務，臥室，傢俱），您可以在這裏看到：http://jsfiddle.net/alan1986/g3bKV/我確定有一個更好的方法可以編寫這個函數，這將花費更少的代碼。使用Javascript函數從HTML選擇表單生成價格

無論如何，這是我最擔心的，這個功能可能太大，但至少它的工作原理。我一直在研究如何從表單中組合選定選項並將它們傳遞給一個函數的答案，我可以看到它如何使用整數工作，但我需要使用字符串。所以這裏有一些代碼，我一直在從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;

來源

2013-10-04 Pixelomo

你想讓返回的報價看起來像什麼？ ##£作爲一個字符串？當我聽到'報價'時，我想總計但我猜這不是你要找的 –

是的我想結果是一個字符串，即「£75」，我想出現在「=」在表格下方的div中。我希望將三個選定的選項作爲其三個參數傳遞給該函數，並且當找到匹配的三個選項時，將返回適當的字符串，例如「£75」。我是否需要在此函數之上構建函數，或者向數組發送三個選項，然後將數組傳遞給函數？如果在點擊時返回報價單的表單下方有一個提交按鈕，我會同樣高興。有沒有更簡單的方式來編寫我的功能？謝謝 – Pixelomo

你可以把我的代碼放在下面，並添加一些智能來設置你的字符串值嗎？或者你需要幫助嗎？ –

我寫的附加一個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。將所有的<select>輸入封裝在一個表單中

來源

2013-10-04 14:53:35

感謝您的幫助，因此使用此代碼選擇不同的選項會返回表單下方的選定選項。我想要做的就是通過我的函數傳遞這三個選項作爲參數，當找到匹配的'if'語句時，它會返回相應的值。例如，如果有人選擇「庫存」+「1」+「裝備」，這些將作爲它的（服務，臥室，裝備）參數傳遞給報價函數，並且當找到匹配的'if'語句時：if（service == 「Inventory」&& bedrooms ==「1」&& furnishing ==「Furnished」） return（「£70」）; – Pixelomo

好的。用你的功能邏輯修改了我的updateQuote方法。從這裏拿走它 –

非常感謝，你真的幫了我很大的忙，D – Pixelomo

使用Javascript函數從HTML選擇表單生成價格

回答

相關問題