フォームフィールドをURLに渡す

私は開発者ではありませんが、Paymateの「今すぐ支払う」ボタンinto a websiteの統合を依頼されています。形態であるフォームフィールドをURLに渡す

Paymate has an ajax form to generate the code：

<a onclick="self.name = 'parent';" target="_blank" 
    href="https://www.paymate.com/PayMate/ExpressPayment?mid=<username>&amt=<amount>&ref=<reference>"> 

    <img src="https://www.paymate.com/images/ebay/paymate_accepted_logo_88x31.gif" 
     border="0" alt="Pay with Paymate Express"> 
</a>

username、amount & referenceは、ソースコードに貼り付けるライブリンクを生成するためにペイメイトのリンク生成フォームにすべての変数が入力されています。

私の問題は、複数の数量が可変で売られる2つのアイテムがあることです。

数字を受け入れるフォームフィールドを作成する必要があります。この番号を入力する際には、PaymateボタンのURLを動的に変更する必要があり、amtが正しい数字になります。例えばそれぞれ@ 3.50点の25項目。

私はこれについてどうやって行くのか分かりません。

出典

2012-03-29 Steve

JavaScriptライブラリ（jQuery、Prototype、RightJSなど）を使用していますか？ –

このウェブサイトでは、2つのJSファイルを使用する有料テンプレートを使用しています。 http://www.whitewreath.com/media/system/js/mootools.js http://www.whitewreath.com/media/system/js /caption.js – Steve

ウェブ開発を行うための学習の最初のステップではなく、一回限りの問題であれば、最も近い開発者に$ 50を支払うだけで30分かかりますか？ – blahdiblah

非常に良い原因のようです。うまくいけば、あなたの目的に適応できるjQueryを使って何かを作りました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <title></title> 
    </head> 
    <body> 

    <form id="product1" action="#"> 
     <div>Price per item: <span class="price">3.50</span></div> 
     <label for="quantity">Quantity:</label> 
     <select name="quantity" class="quantity"> 
     <option value="1" selected="selected">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     </select> 
     <div> 
     Order value: AUD$<span class="order">3.50</span> <i>including AUD$8.00 postage</i> 
     </div> 
     <input type="hidden" name="mid" value="demonstration" /> 
     <input type="hidden" class="amt" name="amt" value="0" /> 
     <input type="hidden" name="ref" value="product1" /> 
     <input type="hidden" name="currency" value="AUD" /> 
     <input type="hidden" name="amt_editable" value="N" /> 
     <img class="submit" src="https://www.paymate.com/images/ebay/paymate_accepted_logo_88x31.gif" border="0" alt="Pay with Paymate Express" /> 
    </form> 

    <hr /> 

    <form id="product2" action="#"> 
     <div>Price per item: <span class="price">5.00</span></div> 
     <label for="quantity">Quantity:</label> 
     <select name="quantity" class="quantity"> 
     <option value="1" selected="selected">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     </select> 
     <div> 
     Order value: AUD$<span class="order">5.00</span> <i>including AUD$8.00 postage</i> 
     </div> 
     <input type="hidden" name="mid" value="demonstration" /> 
     <input type="hidden" class="amt" name="amt" value="0" /> 
     <input type="hidden" name="ref" value="product2" /> 
     <input type="hidden" name="currency" value="AUD" /> 
     <input type="hidden" name="amt_editable" value="N" /> 
     <img class="submit" src="https://www.paymate.com/images/ebay/paymate_accepted_logo_88x31.gif" 
      border="0" alt="Pay with Paymate Express" /> 
    </form> 

    <script type="text/javascript"> 

    var paymentUrl = "https://www.paymate.com/PayMate/ExpressPayment?"; 
    var postage = 8; 


    jQuery.noConflict(); 

jQuery(document).ready(function ($) { 

    asset("#product1"); 
    asset("#product2"); 

    function asset(product){ 

     $(product + " input.quantity").val("1"); 

     var price = $(product + " .price").text(); 

     $(product + " .quantity").change(function() { 
      var val = ""; 
      var order = 0; 
      $(product + " select.quantity option:selected").each(function() { 
        val += $(this).text(); 
        order = ((val * price) + postage).toFixed(2); 
        $(product + " span.order").text(order); 
        $(product + " .amt").val(order) 
       }); 
     }); 

     $(product + " .submit").click(function() { 
       var params = $(product).serialize(); 
       // alert(paymentUrl + params); 
       // Go to page 
       window.location.href = paymentUrl + params; 

     }); 
    } 

}); 

    </script> 
    </body> 
</html>

更新：テキストフィールドの代わりに、ダウン選択ドロップを使用。与えられた値が実際に数値であるかどうかをチェックするために少し検証を追加しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <title></title> 
    </head> 
    <body> 

    <form id="product1" action="#"> 
     <div>Price per item: <span class="price">3.50</span></div> 
     <label for="quantity">Quantity:</label> 
     <input type="text" name="quantity" class="quantity" /> 
     <div> 
     Order value: AUD$<span class="order">3.50</span> <i>including AUD$8.00 postage</i> 
     </div> 
     <input type="hidden" name="mid" value="demonstration" /> 
     <input type="hidden" class="amt" name="amt" value="0" /> 
     <input type="hidden" name="ref" value="product1" /> 
     <input type="hidden" name="currency" value="AUD" /> 
     <input type="hidden" name="amt_editable" value="N" /> 
     <img class="submit" src="https://www.paymate.com/images/ebay/paymate_accepted_logo_88x31.gif" border="0" alt="Pay with Paymate Express" /> 
    </form> 

    <hr /> 

    <form id="product2" action="#"> 
     <div>Price per item: <span class="price">5.00</span></div> 
     <label for="quantity">Quantity:</label> 
     <input type="text" name="quantity" class="quantity" /> 
     <div> 
     Order value: AUD$<span class="order">5.00</span> <i>including AUD$8.00 postage</i> 
     </div> 
     <input type="hidden" name="mid" value="demonstration" /> 
     <input type="hidden" class="amt" name="amt" value="0" /> 
     <input type="hidden" name="ref" value="product2" /> 
     <input type="hidden" name="currency" value="AUD" /> 
     <input type="hidden" name="amt_editable" value="N" /> 
     <img class="submit" src="https://www.paymate.com/images/ebay/paymate_accepted_logo_88x31.gif" 
      border="0" alt="Pay with Paymate Express" /> 
    </form> 

    <script type="text/javascript"> 

    var paymentUrl = "https://www.paymate.com/PayMate/ExpressPayment?"; 
    var postage = 8; 

    jQuery.noConflict(); 

    jQuery(document).ready(function ($) { 

    asset("#product1"); 
    asset("#product2"); 

    function asset(product){ 

     $(product + " input.quantity").val("1"); 

     var price = $(product + " .price").text(); 

     $(product + " .quantity").keyup(function() { 
      var order = 0; 
      var val = $(product + " input.quantity").first().val(); 
      if($.isNumeric(val)){ 
       order = ((val * price) + postage).toFixed(2); 
       $(product + " span.order").text(order); 
       $(product + " .amt").val(order); 
      } 
     }); 

     $(product + " .submit").click(function() { 
       var val = $(product + " input.quantity").first().val(); 
       if($.isNumeric(val)){ 
        var params = $(product).serialize(); 
        // Go to page 
        window.location.href = paymentUrl + params; 
       } 
     }); 
    } 

    }); 

    </script> 
    </body> 
</html>

出典

2012-04-12 21:57:27

選択ドロップダウンボックスを顧客が希望する数の項目を入力するテキストフィールドに変更できると思いますか？ – Steve

テキストフィールドを使用するバージョンを追加しました。選択ドロップダウンは、ユーザーが提供するものをより慎重に制御できるため、しばしば使用されます。私は1-5をサポートすることを選択しましたが、簡単にこれを拡張することができます。 Amazonは選択したドロップダウンを自分のサイトで使用しています。典型的には1〜1000の範囲です（アマゾンは本当に対数表示でそれを大きくしていないことを感謝します！）） –

Beautiful。 Markありがとうございました。アマゾンはいつか対称型に流れ込むかもしれない！... :-) – Steve

メソッド= GETのフォームよりも複雑なものが必要ですか？ GETフォームはすべての入力を受け取り、あなたが求めているものと非常によく似た、そのアクションのURLにそれらを固定します。

<form method="get" action="https://www.paymate.com/PayMate/ExpressPayment"> 
Username: <input type="text" size="10" maxlength="40" name="mid"> <br /> 
Amount: <input type="text" size="10" maxlength="40" name="amt"> <br /> 
Reference: <input type="text" size="10" maxlength="40" name="ref"> <br /> 

<input type="submit" value="Pay Now"> 
</form>

出典

2012-04-13 00:06:08 bukzor

また、AタグのURLで囲まれたイメージが必要なので、結果はクリック可能なイメージになります。 – Steve

マークが述べたように、あなたは基本的に、彼らはあなたのための組み込みソリューションを提供していないので、前ペイメイトに送信する計算を自分で設定する必要があります。

プログラミングに慣れていない場合は、ウェブサイトをPaypalに切り替えるだけです。セットアップがはるかに迅速です。

出典

2012-04-19 03:08:13 DACrosby

ありがとうダグラス。ウェブサイトの所有者はPaymateを選択しました。料金はPaypalよりも低いからです。 – Steve

フォームフィールドをURLに渡す

答えて

関連する問題