Два сценария jquery для суммирования ввода формы

Я создаю несколько виджетов, которые позволяют пользователям выбирать переключатели и jquery, а затем вычисляет общую сумму. В настоящее время вычисления jquery смешиваются, так как они находятся на одной странице. Я пытался изменить #ids и т. Д., Но он все еще не работает. Вот то, что я до сих пор:Два сценария jquery для суммирования ввода формы

Widget 1

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    function recalculate() { 
     var sum = 0; 

     $("input[type=radio]:checked").each(function() { 
      sum += parseInt($(this).attr("value")); 
     }); 

     $("#output").html(sum.toFixed(2)); 
    } 

    $("input[type=radio]").change(function() { 
     recalculate(); 
     $('#invoice_description').val($(this).attr('rel')); 
    }); 
}); 
</script>

Образец моей формы

<div class="form-row"> 
    <div class="form-row-title"><input type="radio" class="checkbox" name="register" value="<?php echo $vendor; ?>" checked /></div> 
    <div class="form-row-label">Vendor Registration (Up To 3 Attendees: $<?php echo $vendor; ?>)</div> 
    <div class="clear"></div> 
</div> 

<div class="form-row"> 
    <div class="form-row-title" style="color: #090; font-weight: 700;">Total Due:</div> 
    <div class="form-row-content" style="padding: 10px 0;"><b><span id="output">0.00</span></b></div> 
    <div class="clear"></div> 
</div>

Widget 2

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    function recalculate() { 
     var sum = 0; 

     $(".dues input[type=radio]:checked").each(function() { 
      sum += parseInt($(this).attr("value")); 
     }); 

     $("#output2").html(sum.toFixed(2)); 
    } 

    $(".dues input[type=radio]").change(function() { 
     recalculate(); 
     $('#dues_description').val($(this).attr('rel')); 
    }); 
}); 
</script>

Пример виджета 2 вида

<div class="form-row"> 
    <div class="form-row-title"> 
    <input type="radio" id="general" class="dues" name="membership" value="<?php echo $general; ?>" rel="General Society Membership" /> 
    </div> 
    <div class="form-row-label">General Society Membership ($<?php echo $general; ?>) <i id="general-tip" class="fa fa-question-circle fa-1x"></i></div> 
    <div class="clear"></div> 
</div> 

<div class="form-row"> 
    <div class="form-row-title" style="color: #090; font-weight: 700;">Total Due:</div> 
    <div class="form-row-content" style="padding: 10px 0;"><b><span id="output2">0.00</span></b></div> 
    <div class="clear"></div> 
</div>

источник

2015-11-17 RiotAct

ли виджет1 вмешиваться в widget2, но не наоборот? Мне любопытно, потому что widget2 имеет более специфический селектор ввода, тогда как widget1 ищет все проверенные радиовходы. Таким образом, на странице виджет1 будет смотреть на любой проверенный радиовход, тогда как widget2 будет искать радиостанции, проверенные в '.dues'. Кроме того, widget1 придает слушателям все радиостанции на экране. – Brodie

Чтобы избежать путаницы, на самом деле это не пример [виджета jQuery] (https://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/) и у вас возникла эта проблема из-за объема вашей переменной 'sum'. Вы не столкнетесь с этой проблемой, если будете следовать некоторым примерам виджета :) и примените их к своим обстоятельствам. – wahwahwah

Не сказал, что я делаю виджет jquery, это виджет администратора Wordpress с использованием некоторого jquery. сумма суммируется только в первом виджетах, но второй виджет добавляет к общему количеству виджета. Если это имеет смысл. Я просто попробовал добавить более специфичный селектор ввода для виджета 1, но не повезло. – RiotAct

Хорошо, наконец, понял это. Это было немного сложно, так как у меня есть другие скрипты, но это то, что сработало для меня.

function recalculate() { 
    var sum = 0; 

    $(".mtg:checked").each(function() { 
     sum += parseInt($(this).attr("value")); 
    }); 

    $("#output").html(sum.toFixed(2)); 
}

Я изменил слушатель как класс ввода вместо типа ввода. Таким образом, я смог установить разные классы и не иметь конфликта.

источник

2015-11-18 06:03:51 RiotAct

Два сценария jquery для суммирования ввода формы

ответ

Смежные вопросы