1

Здравствуйте уважаемые программисты. Я столкнулся с трудностью , над которой уже 3 дня ломаю голову. У меня есть несколько одинаковых форм на странице. И суть в том, чтобы выводить сумму платежа в кнопку , но из-за того, что скрипт один для всех моя переменная TOTAL и используется всеми формами одновременно . Тоесть если в одной все выбрано, то при выборе че-го нибудь в друго - к тоталу прибавится , он станет больше и результат будет совсем не тот, что нужно. Хочу избежать дублирования кода, и понять что я делаю не так. Еще странная вещ происоходит, если сделать инпуты - hidden. Они выбираются "checked" , но обратного результат этим скриптом не добиться. Есть еще вариант , Я пробовал не через сложение переменных, что мне больше нравится, а через вывод в значение value , при 4 разных условиях. Но скрипт получается громоздкий, и работает некорректно по выше сказанно причине. Могу его тоже в отдельном сообщении предоставить. Заранее спасибо.

$(document).ready(function() {
  var total = 10;

  $(".onemore").click(function() {

    if ($('input', this).is(":checked")) {
      total = total - 5;
      $(this).closest(".form").find(".ppbutton").attr("value", "ORDER NOW (" + total + "$)");
      $('input', this).prop("checked", false);
      $('a', this).css("color", "black");

    } else

    {
      total = total + 5;
      $(this).closest(".form").find(".ppbutton").attr("value", "ORDER NOW (" + total + "$)");
      $('input', this).prop("checked", true);
      $('a', this).css("color", "#00beff");

    }
  });
  $(".extrafast").click(function() {

    if ($('input', this).is(":checked")) {
      total = total - 10;
      $(this).closest(".form").find(".ppbutton").attr("value", "ORDER NOW (" + total + "$)");
      $('input', this).prop("checked", false);
      $('a', this).css("color", "black");

    } else

    {
      total = total + 10;
      $(this).closest(".form").find(".ppbutton").attr("value", "ORDER NOW (" + total + "$)");
      $('input', this).prop("checked", true);
      $('a', this).css("color", "#00beff");

    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="paypal">
  <form class="form" onsubmit="return dename(this)" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST">
    <table class="checkboxes">

      <tr class="head" style="border-bottom:1px solid black;">
        <td class="firstone">
          <input type="hidden" name="item1" value="Item 1" checked>
        </td>
        <td class="secondone">Basic Gig</td>
        <td class="thirdone">$10.00</td>
      </tr>
      <tr class="onemore">
        <td class="firstone">&nbsp;&nbsp;
          <input class="onemore_checkbox" type="checkbox" name="item2" value="Item2">
        </td>
        <td class="secondone middle onemoretext" style="border-bottom:1px solid black;">
          <label class="onemore_checkbox"><a>One more variant of interior</a>
          </label>
        </td>
        <td class="thirdone middle onemoretext" style="border-bottom:1px solid black;">
          <label class="onemore_checkbox"><a>$5.00</a>
          </label>
        </td>
      </tr>
      <tr class="extrafast">
        <td class="firstone">&nbsp;&nbsp;
          <input class="extrafast_checkbox" type="checkbox" name="item3" value="Item3">
        </td>
        <td class="secondone extrafasttext">
          <label class="extrafast_checkbox"><a>Extra fast 1day delivery</a>
          </label>
        </td>
        <td class="thirdone extrafasttext">
          <label class="extrafast_checkbox"><a>$10.00</a>
          </label>
        </td>
      </tr>
      <input type="hidden" name="item4" value="Item4" checked>

    </table>

    <table class="pp">
      <tr>
        <td>
          <input class="ppbutton" type="submit" border="0" name="payment" value="ORDER NOW (10$)" />
        </td>
        <td>
          <img src='http://paintit.com.ua/wp-content/uploads/2016/02/busket.png'>
        </td>
      </tr>
    </table>

  </form>

</div>
<div class="paypal">
  <form class="form" onsubmit="return dename(this)" action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="POST">
    <table class="checkboxes">

      <tr class="head" style="border-bottom:1px solid black;">
        <td class="firstone">
          <input type="hidden" name="item1" value="Item 1" checked>
        </td>
        <td class="secondone">Basic Gig</td>
        <td class="thirdone">$10.00</td>
      </tr>
      <tr class="onemore">
        <td class="firstone">&nbsp;&nbsp;
          <input class="onemore_checkbox" type="hidden" name="item2" value="Item2">
        </td>
        <td class="secondone middle onemoretext" style="border-bottom:1px solid black;">
          <label class="onemore_checkbox"><a>One more variant of interior</a>
          </label>
        </td>
        <td class="thirdone middle onemoretext" style="border-bottom:1px solid black;">
          <label class="onemore_checkbox"><a>$5.00</a>
          </label>
        </td>
      </tr>
      <tr class="extrafast">
        <td class="firstone">&nbsp;&nbsp;
          <input class="extrafast_checkbox" type="hidden" name="item3" value="Item3">
        </td>
        <td class="secondone extrafasttext">
          <label class="extrafast_checkbox"><a>Extra fast 1day delivery</a>
          </label>
        </td>
        <td class="thirdone extrafasttext">
          <label class="extrafast_checkbox"><a>$10.00</a>
          </label>
        </td>
      </tr>
      <input type="hidden" name="item4" value="Item4" checked>

    </table>

    <table class="pp">
      <tr>
        <td>
          <input class="ppbutton" type="submit" border="0" name="payment" value="ORDER NOW (10$)" />
        </td>
        <td>
          <img src='http://paintit.com.ua/wp-content/uploads/2016/02/busket.png'>
        </td>
      </tr>
    </table>

  </form>

</div>

1 ответ 1

0

Здравствуйте, Андрей. Храните текущее значение для формы как свойство самой формы:

<form data-total="10" class="form" onsubmit="return dename(this)" ...


$(".onemore").click(function() {
  var total = +$(this).closest(".form").data("total");

  ...

  $(this).closest(".form").data("total", total);  
});
7
  • Вы не могли бы объяснить последнюю строку. Какая у нее функция? $(this).closest(".form").data("total", total); 29 фев 2016 в 15:58
  • Эта строка сохраняет обновленное значение total в свойство формы.
    – user176262
    29 фев 2016 в 16:00
  • Да . разобрался. Спасибо. Не подумал о таком варианте. А что делать с тем, что при значении input type="hidden" , то я не могу снять выбор с него? Я бы хотел чекбоксы заменить кастомными картинками . Есть рецепт? 29 фев 2016 в 16:03
  • Вам надо разобраться, как работают html таг input и его поддержка в jQuery. Значения атрибута type для этого тага - взаимоисключающие. Например, он может быть "checkbox" - и тогда вызов .is(":checked") имеет смысл, или "hidden" - и тогда этот вызов смысла не имеет и, очевидно, всегда возвращает false.
    – user176262
    29 фев 2016 в 16:09
  • Будет ли иметь смысл prop( "checked", true ) ? 29 фев 2016 в 16:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.