Если флажок установлен, добавьте £ 1,50 к сумме, если не добавите ничего - PullRequest
Новая
       1

Если флажок установлен, добавьте £ 1,50 к сумме, если не добавите ничего

2 голосов
/ 25 ноября 2011

Привет. Я пытаюсь создать базовую форму, которая добавляет стоимость в 1,5 фунта к общей цене, если установлен флажок. Поэтому у меня есть пользователь, который вводит цену (стоимость ваучера), которую он может забрать или доставить - доставка составляет £ 1,50.

У меня есть базовые знания javascript и я нашел следующий код, который позволяет мне добавлять два поля формы вместе - 

<script type="text/javascript"><!--
function updatesum() {
document.form.sum.value = (document.form.sum1.value -0) + (document.form.sum2.value -0);
}
//--></script>

HTML 

<form name="form" >
Enter a number:
<input name="sum1" onChange="updatesum()" />
and another number:
<input type="checkbox" name="sum2" onChange="updatesum()" value="1.50" checked> 
Their sum is:
<input name="sum" readonly style="border:0px;">
</form>

очевидно, что это работает, но опять же, очевидно, значение остается на уровне 1,50, независимо от того, установлен флажок или нет - поэтому мне нужна помощь с оператором "если". искал вокруг, но действительно застрял.

Ответы [ 2 ]

3 голосов
/ 25 ноября 2011

Вам нужно только добавить значение, если флажок установлен. 

<script type="text/javascript">
function updatesum() {
     var deliveryFee = document.form.sum2.checked ? Number(document.form.sum2.value) : 0;
     document.form.sum.value = (document.form.sum1.value -0) + deliveryFee;
}
</script>

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

<form name="form" >
    Enter a number:
    <input id="voucher" name="cost" />
    and another number:
    <input type="checkbox" id="deliveryFee" name="fee" value="1.50" checked="checked" > 
    Their sum is:
    <input id="total" name="sum" readonly style="border:0px;">
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript">
    $(document).ready( function() {
        $('#voucher,#deliveryFee').change( function() {
             var fee = Number( $('#deliveryFee:checked').val() || 0 );
             var cost = Number( $('#voucher').val() );
             $('#total').val( cost + fee );
        });
     });
</script>
1 голос
/ 26 ноября 2011

Рекомендуется сделать несколько вещей:

Установите идентификаторы, типы и значения на входах. Используйте getElementById ('id'), чтобы получить и установить значения. Самое важное: проанализировать входные данные как числа с плавающей запятой, затем суммировать и присваивать. 

<html>
<head>
<title>
</title>
<script type="text/javascript">
function updatesum(){
    document.getElementById('total').value = 
        parseFloat(document.getElementById('value').value) +
        (document.getElementById('extra').checked?
         parseFloat(document.getElementById('extra').value):0);
}
</script>
</head>
<body>
<form name="form" >
Enter a number:
<input name="value" id="value" onChange="javascript:updatesum();" />
add extra 1.5?
<input type="checkbox" name="extra" id="extra" onClick="javascript:updatesum();"
 onChange="javascript:updatesum();" value="1.50" checked=""> 
Their total is:
<input name="total" id="total" type="text" readonly="readonly" style="border:0px;">
</form>
</body>
</html>

(Извините за мои первые правки. Я немного заржавел в Javascript. Это решение отлично работает.)

*** Примечание: Добавить onClick = "javascript: updatesum ();" для ввода флажка, чтобы он работал лучше в IE.

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

Нет похожих вопросов

...