我該如何創建一個這樣的表單？

本頁面裏提供的商品：https://www.psd2html.com/order-now.html你可以選擇你想要的商品，價格會隨着你的選擇而改變。它如何建造？我該如何創建一個這樣的表單？

2009-08-24 datisdesign

我更新了我的頁面版本，如果你現在想看看它 – 2009-08-24 19:39:26

這只是一個正常的單選按鈕列表，當單擊收音機時，總成本標籤中的值會更改。您可以使用單選按鈕的onclick功能來執行此操作。順便推薦使用jquery。 jquery是一個非常棒的框架，基於javascript。我再也不會回頭使用普通的舊javascript了。

確保您referenceing的jQuery在你的文件的<head>這樣的：

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery

這裏試試這個：

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Untitled Page</title> 
    <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      Your payment amount is : <span id="spn_Price"></span> 
     </div> 

      <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);"/> 
      <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);"/> 

     <script type="text/javascript"> 
      function DisplayPrice(price) 
      { 
       $('[id$=spn_Price]').html(price); 
      } 
     </script> 
    </form> 
</body> 
</html>

來源

2009-08-24 14:52:34

我只是複製粘貼這段代碼，但沒有任何反應！ – datisdesign 2009-08-24 16:24:22

在那裏你去試試吧現在我在jquery中犯了一個小錯誤 – 2009-08-24 19:38:47

感謝它現在的工作:) – datisdesign 2009-08-24 20:09:43

他們使用Mootools，面向JavaScript框架的目的是實現這種效果，但它也可以在香草JavaScript中完成（雖然我會推薦一個框架來處理跨瀏覽器問題，等等。目前的最愛似乎是jQuery）。

基本上，根據每個佈局選項中選定的單選按鈕，根據所選無線電對與總價相對應的元素進行引用（<em id="amount">$[price]</em>）和html集。

來源

2009-08-24 14:54:02

你可以通過WTFramework bookmartklet瞭解他們使用的是什麼javascript框架http://blog.olicio.us/2008/11/08/wtframework-bookmarklet/ – ajrawson 2009-08-24 15:55:33

@ajrawson - 這是一個很酷的 – 2009-08-24 16:27:32

的東西，可以幫助你..

使用jQuery：

<p> 
you amount is : <span id="displayPrice"></span> 
</p> 

<input type="radio" value="159" name="price" onclick="javascript:$('displayPrice').html(this.value)"/> 
<input type="radio" value="259" name="price" onclick="javascript:$('displayPrice').html(this.value)"/>

等..

來源

2009-08-24 14:58:05

thnx，但我不能得到它工作！ – datisdesign 2009-08-24 15:14:30

嘗試在onclick語句中添加javascript，就像我的編輯一樣。你會得到什麼錯誤。我是100％這是它的方式...我想要點，所以讓我來幫你：P – 2009-08-24 15:42:50

你是否像我在我的文章中引用jquery文件？我建議下載它，並親自進行本地參考，但這對於嘗試新的東西非常有用。 – 2009-08-24 16:00:05

如果你有「的jQuery在行動」那麼你會發現有確切例。

一言以蔽之：價格被存儲爲跨度的附加屬性，如：

<span price="100">100$</span>

然後使用jQuery，您可以創建必要的監聽器，並使用選擇「跨度[價格]」得到的價格（當時乘以在數量和得到總價格）

來源

2009-08-24 15:01:43 Roman

我會推薦JQuery，因爲它比我過去試過的大多數其他JavaScript庫更容易掌握。我碰巧遇到過JavaScript挑戰，直到我拿起JQuery，並且現在很容易實現像你想要的那樣的效果。

來源

2009-08-24 15:28:51 Kobojunkie

網絡的美妙之處在於（幾乎）UI中的所有表示和邏輯代碼都是可見的！您將無法看到PHP或Rails代碼否，但通過在頁面的頭部中查看鏈接，您可以看到css文件，外部鏈接的JS以及整個文檔如何放在一起。

在我看來，沒有比使用DOM嗅探器更好的學習方式了（現在，我認爲，我相信）。

XRay有一個小書籤，可以讓您檢出頁面及其CSS屬性。
Web Developer Toolbar是檢查任何我知道的最全面的工具。
此外，很多人真的很喜歡FireBug。最後兩個只適用於Firefox，但真的，看看他們，並學會自己捅捅。

你永遠不會得到服務器端的東西（有很好的理由），但客戶端的東西，如你感興趣的JS很容易檢查。

來源

2009-08-24 15:54:14

我該如何創建一個這樣的表單？

回答

相關問題