將表單域傳遞到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都被輸入到Paymate的鏈接生成形式變量，以產生一個活鏈接粘貼到的源代碼。

我的問題是，有兩個項目出售可變多個數量。

我需要產生它接受若干表單字段，並在進入這個號碼，需要被動態地改變，從而使AMT是正確的數字的按鈕Paymate的URL。例如25件，每件3.50件。

我不知道如何去做這件事。

來源

2012-03-29 Steve

您是否使用任何JavaScript庫（例如jQuery，Prototype，RightJS等）？ – 2012-03-29 00:12:13

該網站使用付費模板，使用兩個JS文件： http://www.whitewreath.com/media/system/js/mootools.js http://www.whitewreath.com/media/system/js /caption.js – Steve 2012-03-30 02:23:37

如果這是一次性問題，而不是您學習進行Web開發的第一步，那麼您是否考慮過只需向最近的開發人員支付約50美元就花了半小時來完成此任務？ – blahdiblah 2012-04-12 19:13:02

看起來像一個非常好的原因。我用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 2012-04-18 05:58:01

我已添加使用文本字段的版本。經常使用選擇下拉菜單，因爲您可以更仔細地控制用戶提供的內容。我選擇支持1-5，但您可以輕鬆地擴展它。亞馬遜使用select下拉在其網站上，他們通常有一個範圍1-1000（我明白，亞馬遜還沒有真正使其成爲拓地大;！）） – 2012-04-18 07:26:34

美麗。謝謝馬克。亞馬遜可能有一天流入對映節點... :-) – Steve 2012-04-19 09:17:56

你確定你需要比method = 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 2012-04-14 04:07:03

正如馬克提到的那樣，您基本上必須在發送給Paymate之前自己設置計算，因爲他們沒有爲您提供內置解決方案。

如果您對編程不滿意，只需將網站切換到Paypal即可更快地進行設置。

來源

2012-04-19 03:08:13 DACrosby

謝謝道格拉斯。網站所有者選擇了Paymate，因爲他們的收費低於Paypal。 – Steve 2012-06-03 03:34:56

將表單域傳遞到URL

回答

相關問題