Здравствуйте уважаемые программисты. Я столкнулся с трудностью , над которой уже 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">
<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">
<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">
<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">
<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>