0

数字を挿入するための動的入力フィールドを持つフォームがあります。最初の入力は静的で、他の5つはスクリプトで動的に作成されます。最後の 1 つのフィールドは、数値の合計が結合される場所です。

<form class="form-horizontal" id="whereEntry" method='post' action=''>
   <fieldset>

      <div class="control-group">
        <div class="controls controls-row">
            <input type="text" class="span3 register_input" id="main_activity" name="main_activity" placeholder="Company's main activity">
              <input type="text" class="span1 register_input income_count" id="income" name="income" placeholder="% of income">
               </div>
                </div>

<div class="control-group">
<div class="controls controls-row">
    <div id="InputsIncomeWrapper">
    </div>
</div>
<div class="row">
    <input type="text" class="span1 register_input pull-right" id="income_sum"  name="income_sum">
</div>
<div class="row">
    <a href="#" id="AddMoreIncomeBox" class="btn btn-info pull-right"><i class="icon-plus"></i>Add More</a>
</div>
</div>

       </fieldset>
       </form>

合計のスクリプト:

//calculation script
var $form = $('#whereEntry'),
$sumDisplay = $('#income_sum');

$form.delegate('.income_count', 'change', function ()
{
var $summands = $form.find('.income_count');
var sum = 0;
$summands.each(function ()
{
    var value = Number($(this).val());
    if (!isNaN(value)) sum += value;
});

$sumDisplay.val(sum);
});

動的フィールドのスクリプト:

 //add dynamic field script
 $(document).ready(function() {

 var MaxInputs       = 5; //maximum input boxes allowed
 var InputsWrapper   = $("#InputsIncomeWrapper"); //Input boxes wrapper ID
 var AddButton       = $("#AddMoreIncomeBox"); //Add button ID

 var x = InputsWrapper.length; //initlal text box count
 var FieldCount=1; //to keep track of text box added

 $(AddButton).click(function (e)  //on add input button click
 {
    if(x <= MaxInputs) //max input box allowed
    {
        FieldCount++; //text box added increment
        //add input box
        $(InputsWrapper).append('\
        <div>\
        <input type="text" class="register_input span3"\
        name="main_activity_'+ FieldCount +'" id="main_activity_'+ FieldCount +'"\
        placeholder="Company´s other activity" style="margin:0px 15px 20px 0px"/>\
        <input type="text" class="span1 register_input income_count" id="income_'+ FieldCount +'"\
        name="income_'+ FieldCount +'" placeholder="% of income"\ style="margin:0px 15px 20px 15px"/>\
        <a href="#" class="removeclass pull-left"><i class="icon-remove icon-remove-addincome"></i></a></div>');
        x++; //text box increment
    }
  return false;
 });

 $("body").on("click",".removeclass", function(e){ //user click on remove text
    if( x > 1 ) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
    }
 return false;
}) 

});

jsfiddle の例を次に示します: http://jsfiddle.net/Uwbe6/2/

これですべてが機能しますが、たとえば 2 つの動的フィールドを追加する場合、最初の静的フィールドに 30、2 番目の動的フィールドに 40、3 番目の動的フィールドに 30 を入力します。#income_sum の値は 100 です。しかし、気が変わって 2 つの動的フィールドを「オフ」にするとします。問題は、合計値が 40 に戻らず、最初のフィールドからのみプルされることです。100のままです。難しくない解決策はありますか？.income_count の削除などに .change() を使用したものですか?

4

1 に答える 1

1

要素を削除するときに変更イベントをトリガーするだけです：

http://jsfiddle.net/qWhvH/

$("body").on("click", ".removeclass", function (e) { //user click on remove text
        if (x > 1) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }

        $('.income_count').trigger('change');
        return false;
    })
于 2013-06-06T12:29:40.437 に答える