どうすればこのようなフォームを作成できますか？

このページでは：https://www.psd2html.com/order-now.htmlあなたが希望するアイテムを選択することができ、価格はあなたの選択で変更されます。どのようにそれを構築することができますか？どうすればこのようなフォームを作成できますか？

出典

2009-08-24 datisdesign

今すぐチェックアウトしたい場合は、私のページのバージョンを更新しました –

これは単なる通常のラジオボタンリストです。ラジオをクリックすると、総コストラベルで値が変更されます。ラジオボタンのonclick機能を使用してそれを行うことができます。ちなみにjqueryを使用することをお勧めします。 Jqueryはjavascriptで構築された素晴らしいフレームワークです。私は再び普通の古いJavaScriptを使用して戻って行くことはありません。

あなたはこのようなあなたのファイルの<head>にjqueryのをreferenceingしていることを確認します：彼らはMootools使用

<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

あなたは今それを試しに行く私はjqueryで小さな間違いを作った –

ありがとう、その作業今:) – datisdesign

、JavaScriptフレームワークオブジェクト指向を達成するために：これは試してください。ここ

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

その効果が、バニラのJavaScriptでも（ブラウザ間の問題などを処理するためのフレームワークをお勧めしますが）、現在のお気に入りはのようです）。

基本的に、各レイアウトオプションで選択されたラジオボタンに基づいて、合計価格に対応する要素への参照が（<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

@ajrawson - それはちょっと涼しい –

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

私の編集のように、onclickステートメントにjavascriptを追加してみてください。あなたはどんなエラーを受けますか？私は100％ですが、これは方法です...私はポイントが私にあなたを助けて欲しいです：P –

私の投稿で行ったようにファイル内のjqueryを参照していますか？私はそれをダウンロードして個人的にローカルのリファレンスを持っていることをお勧めしますが、これは新しいものを試してみるのに良いことです。 –

あなたは "アクションでのjQuery" を持っている場合、あなたは正確にそこに見つけることができます例。一言で言えば

：価格はこのように、スパンの追加属性として格納されていました：

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

を次にあなたが必要なリスナーを作成して、セレクタ「スパン[価格]」を使用して価格を得ることができますjQueryのを使用して（それを掛けます総数を得る）

出典

2009-08-24 15:01:43 Roman

私が過去に試した他のほとんどのJavaScriptライブラリよりも把握が簡単であるため、JQueryをお勧めします。 JQueryを使い、あなたが望むもののようなエフェクトを今実装するのが簡単になるまで、幾分JavaScriptに挑戦しました。

出典

2009-08-24 15:28:51 Kobojunkie

ウェブの美しさは、（ほぼ）すべてのプレゼンテーションと論理コードが表示可能であることです！ PHPやRailsのコードは表示されませんが、ページのヘッダーにあるリンクをたどることで、CSSファイル、外部リンクされたJS、一般的にどのように文書全体がどのように組み合わされているかを確認できます。

私の意見では、DOMスニッファを使うよりも良い方法はありません（今私が作った、私は信じています）。

XRayには、ページとそのCSSプロパティをチェックアウトできるブックマークレットがあります。
Web Developer Toolbarは、私が知っているものを検査するための最も包括的なツールです。
さらに、多くの人が実際にFireBugが好きです。最後の2つはFirefox用ですが、実際にはそれらを見て、あなた自身で突き刺して覚醒する方法を学んでください。

あなたはサーバー側のものを（決して）得ることはできませんが、興味のあるJSのようなクライアントサイドのものは簡単に調べることができます。

出典

2009-08-24 15:54:14

どうすればこのようなフォームを作成できますか？

答えて

関連する問題