Передать поле формы в URL - PullRequest
Новая
       10

Передать поле формы в URL

1 голос
/ 29 марта 2012

Я не являюсь разработчиком, но меня попросили интегрировать кнопки Paymate 'Pay Now' в веб-сайт .

Paymate имеет форму ajax для генерации кода в форме: 

<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 для генерации активной ссылки для вставки в исходный код.

Моя проблема в том, что нужно продать два товара, которые бывают разного количества.

Мне нужно создать поле формы, которое принимает число, и при вводе этого числа, URL-адресКнопка Paymate должна быть изменена динамически, так что amt является правильной цифрой.например, 25 предметов по 3,50.

Я не знаю, как это сделать.

Ответы [ 3 ]

1 голос
/ 13 апреля 2012

Вы уверены, что вам нужно что-то более сложное, чем форма с методом = 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>
1 голос
/ 13 апреля 2012

Похоже, очень хорошая причина.Я создал что-то, используя 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>
0 голосов
/ 19 апреля 2012

Как уже упоминал Марк, перед отправкой в ​​Paymate вам, в основном, нужно настроить расчеты, поскольку они не предлагают вам встроенного решения.

Если вы не знакомы с программированием, просто переключите веб-сайт на Paypal , который намного быстрее настроить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...