将表单字段传递给URL

时间：2012-03-29 00:08:56

标签： forms url dynamic

我不是开发人员，但已被要求整合Paymate'立即付款'按钮into a website。

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＆amp; reference是输入Paymate链接生成表单的所有变量，用于生成粘贴到源代码中的实时链接。

我的问题是，有两件商品可供出售，其数量可变。

我需要生成一个接受数字的表单字段，并且在输入此数字时，需要动态更改Paymate按钮的URL，以便amt是正确的数字。例如25件商品@ 3.50。

我不知道怎么回事。

3 个答案:

答案 0 :(得分：1)

看起来是一个非常好的原因。我使用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>

答案 1 :(得分：1)

您确定需要比使用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>

答案 2 :(得分：0)

正如Mark所说，在发送给Paymate之前，您基本上必须自己设置计算，因为他们没有为您提供内置解决方案。

如果您对编程不满意，只需将网站切换到Paypal即可快速安装。

相关问题
最新问题