Как установить сумму, которая будет начисляться на кнопку полосы в зависимости от количества выбранных флажков - PullRequest
Новая
       16

Как установить сумму, которая будет начисляться на кнопку полосы в зависимости от количества выбранных флажков

0 голосов
/ 22 января 2019

Обновлено / Отредактировано:

Я пытаюсь установить сумму в долларах США для кнопки оплаты Stripe, основываясь на количестве отмеченных флажков.Каждый из них стоит 3 доллара.то есть;Если флажок установлен, кнопка «Платить сейчас» будет отображать сумму «$ 3».Если выбраны два параметра, кнопка «Платить сейчас» будет отображать сумму «Платить сейчас» в размере 6 долларов США и т. Д.У меня нулевой опыт работы с рельсами.Документация для Stripe для этого чужда мне.Я просто не знаю с чего начать.Вот что у меня есть: 

<dl>
 <dt><div label id="mustcheck"><label for="cat1">1</label><input type="checkbox" name="cat1" id="cat1" class="categories" value="checkbox" onclick="get1()" /></dt>

    <dt><label for="cat2">2</label><input type="checkbox" name="cat2" id="cat2" class="categories" value="checkbox" onclick="get2()" /></dt>

    <dt><label for="cat3">3</label><input type="checkbox" name="cat3" id="cat3" class="categories" value="checkbox" onclick="get3()" /></dt>

    <dt><label for="cat4">4</label><input type="checkbox" name="cat4" id="cat4" class="categories" value="checkbox" onclick="get4()" /></dt>

    <dt><label for="cat5">5<input type="checkbox" name="cat5" id="cat5" class="categories" value="checkbox" onclick="get5()" /></div></dt>  

    Price: <strong>$<span name="total-price-view" id="total-price-view" value="">0</strong></span>

    <input type="submit" value="Subscribe" id="subscribe" name="subscribe" onclick=""/>

ОБНОВЛЕНИЕ: Я собираюсь использовать стандартную кнопку на странице обзора.Поэтому я взял код из примера @ korben и включил его в свою страницу регистрации следующим образом (а также добавил класс и <span name="total-price-view> в html-форму): 

<script src="https://checkout.stripe.com/checkout.js"></script>
<script>

var pacs = document.getElementsByClassName("categories");

function attachEventListeners() {
for (var i = 0; i < pacs.length; i++) {
console.log('looping');
pacs[i].addEventListener('change', function (e) {
        var totalPrice = calculatePrice();
  document.getElementById('total-price-view').innerHTML = totalPrice;
    });
  }
}

function calculatePrice() {
var pricePerCheckbox = 3.00;  // $3.00
var totalChecked = 0;
for (var i = 0; i < pacs.length; i++) {
    if (pacs[i].checked) {
    totalChecked++;
     }
 }
var Totals = totalChecked * pricePerCheckbox;
return Totals;
}

 attachEventListeners();

  </script>

Что мне нужно сделатьТеперь отправьте значение этого <span> на страницу обзора.

Я пробовал: 

<body onload="calculatePrice()">
Price: <strong>$<span name="total-price-view" id="total-price-view" value="return calculatePrice()">0</strong></span>

Я также пробовал: 

  document.getElementById('total-price-view').value = Totals;

1 Ответ

0 голосов
/ 23 января 2019

Я думаю, что лучше всего было бы дать каждому из этих флажков определенный класс (например, price-adjusted-checkbox), который вы можете использовать для ссылки на него в Javascript.Я написал пример того, как это сделать, здесь:

https://jsfiddle.net/a6cvd5px/9/

Вы собираетесь прикрепить к ним прослушиватель событий для прослушивания изменений, а затем, когда изменение происходит, вывызвать пересчет.Этот пересчет может затем перейти к вашему .open().

...