2012-04-28 9 views
0

私は以前同様の質問をしましたが、後でこのビットにjavascriptを使用する必要があることを認識しました。ここに私の状況があります:ボタンでJS関数を使用して変数を表示する

私は、製品xと "購入"ボタンを持つショッピングウェブサイトを持っています。 "購入"ボタンはチェックアウトページにリンクし、 "商品"と "価格"という2つのグローバル変数を持つjavascript機能にリンクしています。私はこれらの2つの変数をチェックアウトページに表示したいのですが、チェックアウトページはユーザーが押した「購入」ボタンによって自動的に更新されます。

var x = "iPhone"; 
var xprice = 199.99; 
var product; 
var price; 

function productX(){ 
    product = x; 
    price = xprice; 
} 

^^^^動作しません。変数が書き込まれている領域では、単に「未定義」をリレーします。彼らが私が何をしようとしているのか理解できれば誰かを助けることができますか?

私は、確認ページにその人が購入しようとしている商品と、購入した購入ボタンに応じた価格を表示するだけです。私はそれをJavaScriptを使用して動作させるように見えることはできません。私はPHP、データベース、またはクッキーを使用したくありません。あなたは2ページ目のリンクのURLにそれらを追加する必要がありますあなたの2番目のページに値を渡したい場合は

はあなた

+0

非常にわかりやすいされていないよ場合は? HTMLで表示/非表示/スワップする場所だけでなく、 –

+0

@mj_ - 修正してください。 1つのJSページを使用して2つの別々のHTML5ページ。 – Envious

+0

これは、1ページにグローバル変数のペアを設定しているように見えます。どのようにこれらの変数を2ページに渡していますか?ページ2に行くと、ページ1の範囲を外しているので、それらの値が消えることは私の理解です。 –

答えて

1

ありがとうございます。

2ページ目をチェックアウトと呼びます。おそらく次のようにして、チェックアウトのページにリンクします:

<a href="checkout">Checkout</a> 

を今、あなたはフォームを使用することはできませんこれを行うに提出...詳しくはこちらをお読みください。 submitting a GET form with query string params and hidden params disappear

あなたが構築する必要があります。クエリ文字列を自分..(これは?something=10&somethingelse=20ある)URLの一部。あなたが行う必要がありますどのような

は、イベントリスナーを経由して、ボタンのクリックにJavaScript関数を添付してあります。また、あなたのリンクにIDを与える必要があります。この関数には、アイテムの価格と名前の2つのパラメータがあります。

<a id="checkout" href="checkout">Checkout</a> 

function checkout(price, name) 
{ 
    document.getElementById('checkout').href += "?price="+price+"&name="+name; 
} 

一つの2ページ目にはyou'lは、配列に文字列値を分割することにより、URLから、これらの値を取得する必要がロードされています。

ここを参照してください:、まあ How to get the value from the GET parameters?

+0

どのように?私はまだJavscriptの初心者です。変数をグローバルにすると、両方のページに到達することができると仮定しました。 – Envious

+0

いいえ、新しいページが読み込まれるとすぐに、すべてのJavaScriptが再読み込みされます。私は自分の投稿を編集して、基本的なコードを書きます。 – Jack

1

を使用すると、別のページからデータを渡すためにしようとしていることを考えると、PHP、またはクッキーなしで、これは困難になるだろう。あなたは次のページに行くために、あなたの「購入ボタン」でフォームを持っている、あなたは、フォームのアクションは=「GET」を設定、およびフォームで2つの隠されたフィールドを持つことができると仮定

<input id="productInput" type="hidden" name="prpduct" value="" \> 
<input id="priceInput" type="hidden" name="price" value="" \> 

そして、

function productX(){ 
document.getElementById("productInput").value = x; 
document.getElementById("priceInput").value = xprice; 
} 

これは、JavaScriptの値をGET経由で次のページに渡せるようにするためです。確かに、JavaScriptはのために設計されていない、

。だから、あなたの次のページで、これらの値を取得するには、次のように、この1としての機能を使用する必要があります:

function GetFromUrl(url, key) { 
var pairs = url.substring(url.indexOf('?') + 1).split('&'); 
for (var i = 0; i < pairs.length; i++) { 
    var pair = pairs[i].split('='); 
    if(key == pair[0]) 
    return pair[1]; 
} 
return null; 
} 

を(ここではMake a JavaScript array from URLオーバーカサブランカへの信用は、私は彼の機能を変更)

その後、ボディのonloadで、この関数を呼び出します。ここから

product = GetFromUrl(window.location, "productInput"); 
price = GetFromUrl(window.location, "priceInput"); 

、あなたは実際のページを変更するために、いくつかのdocument.getElementById()のものを行う必要があるでしょう。

申し訳ありませんが、私は私が買いエリアとチェックアウトは、2つの異なるページであることを前提とし...

関連する問題