如何获得动态价值的总价值？

时间：2012-03-28 06:20:09

标签： php jquery input

我有这样的形式：

<input type='hidden' name='seq' id='idseq' value='1' />
<div id='add_field' class='locbutton'><a href='#' title='Add'>Add</a></div>
<div id='remove_field' class='locbutton2'><a href='#' title='Delete'>Delete</a></div>
<div id="idcover">
1.<br />
<div class="group">
<div class="satu"><input type='text' name='score[1][]' id='score[1][]'></div>
<div class="dua"><input type='text' name='weight[1][]' id='weight[1][]'> %</div>
<div class="tiga"><input type='text' name='weightscore[1][]' id='weightscore[1][]' 
disabled></div>
</div>
</div>
<br /><br />
<div id='idtotalcover' class='totalcover'>
Total <div class='total'><input type='text' name='total' id='idtotal' disabled /></div>
</div>

这是jquery脚本：

<script type="text/javascript">
$(document).ready(
function ()
{
  $("input[id^=score],input[id^=weight]").bind("keyup", recalc);
  recalc();
var counter = $("#idseq").val();
$("#add_field").click(function () 
{
  counter++;
  $.ajax({
  url: 'addinput.php',
  dataType: "html",
  data: "count="+counter,
  success: function(data) 
  {
     $('#idcover').append(data);

    $('.dua input').keyup(function() 
     {
       var $duaInput = $(this);
       var weight=$duaInput.val(); 
       var score=$duaInput.closest(".group").find('.satu input').val(); 
       $.ajax({
       url: "cekweightscore.php",
       data: "score="+score+"&weight="+weight,
       success: 
       function(data)
       {
         $duaInput.closest(".group").find('.tiga input').val(data);


        }//success
        });//ajax 
    });    

  }//success
  });//ajax  
});

});
function recalc()
{
  var a=$("input[id^=score]");
  var b=$("input[id^=weight]");
    $("[id^=weightscore]").calc("(score * weight)/100",{score: a,weight: b},
        function (s)
        {
          return s.toFixed(2);
        },

        function ($this){
        //function($("[id^=weightscore]")){
            // sum the total of the $("[id^=total_item]") selector
            //alert($this);
            //var sum = $this.sum();
            var sum=$this.sum();
            $("#idtotal").val(sum.toFixed(2));
        }
    );
}

</script>

这是php代码：

<?
  $count=$_GET['count'];
  echo"
  <br>
  $count
  <div class='group' >
  <div class='satu'>
    <input type='text' name='score[$count][]' id='score[$count][]'>
  </div>
  <div class='dua'>
   <input type='text' name='weight[$count][]' id='weight[$count][]'> %
  </div>
  <div class='tiga'>
  <input type='text' name='weightscore[$count][]' id='weightscore[$count][]' disabled>
  </div>
  </div>";
?>

当我点击“添加”按钮时，我无法获得新表单的值，因此无法计算新表单。我能做些什么来获得动态价值的总价值？

1 个答案:

答案 0 :(得分：0)

我记得昨天读过这个完全相同的问题，我仍然不知道你想做什么。

  • 为什么要通过AJAX添加输入而不是从头开始在Javascript中创建输入？ AJAX调用很昂贵，建议在需要从服务器更新/检索值时使用。

  • 为什么要尝试在服务器端进行计算？如果您正在处理动态输入，那么您应该在客户端进行计算，然后在完成后更新服务器。

  • 为什么使用晦涩的名称/ id属性值？

反正 我创建了this example，它包含两个不同的解决方案，一个包含ul和table。希望这个例子与你想要做的事情相符，并且可能会给你一些见解。

我使用计时器来更新模拟服务器数据。计时器设置为变量update_wait。其他动态计算在客户端完成。

我也会发布Javascript代码，以防你不喜欢弄乱

Example | Javascript 

var update_server_timer = null,
    update_wait = 1000; //ms

var decimals = 3;

/**********************
     List solution
**********************/
function CreateListRow(){
    var eLi = document.createElement("li"),
        eScore = document.createElement("div"),
        eWeight = document.createElement("div"),
        eWeightScore = document.createElement("div");

    var next_id = $("#cover li:not(.total)").length + 1

    eScore.className = "score";
    eWeight.className = "weight";
    eWeightScore.className = "weightscore";

    //Score element
    var eScoreInput = document.createElement("input");
    eScoreInput.type = "text";
    eScoreInput.name = "score_"+next_id;
    eScoreInput.id = "score_"+next_id;

    eScore.appendChild(eScoreInput);

    //Weight element
    var eWeightInput = document.createElement("input");
    eWeightInput.type = "text";
    eWeightInput.name = "weight_"+next_id;
    eWeightInput.id = "weight_"+next_id;

    var eWeightPerc = document.createElement("div");
    eWeightPerc.className = "extra";
    eWeightPerc.innerHTML = "%";

    eWeight.appendChild(eWeightInput);
    eWeight.appendChild(eWeightPerc);

    //Weightscore element
    var eWeightScoreInput = document.createElement("input");
    eWeightScoreInput.type = "text";
    eWeightScoreInput.name = "weight_"+next_id;
    eWeightScoreInput.id = "weight_"+next_id;

    eWeightScore.appendChild(eWeightScoreInput);

    $(eScore).keyup(function(){
        CalculateListRow($(this).closest("li"));
    });

    $(eWeight).keyup(function(){
        CalculateListRow($(this).closest("li"));
    });

    //item element
    eLi.appendChild(eScore);
    eLi.appendChild(eWeight);
    eLi.appendChild(eWeightScore);

    return eLi;
}

function CalculateListRowTotal(){
    var fTotal = 0;

    $("#cover li:not(.total) div:nth-child(3) input").each(function(){
        var fVal = parseFloat($(this).val());

        if(isNaN(fVal)) fVal = 0;

        fTotal += fVal;
    });

    fTotal = parseFloat(fTotal.toFixed(decimals));

    $("#cover li.total div input").val(fTotal);

    //Update server variables here
    RestartUpdateServerTimer();
}

function CalculateListRow($Li){
    var fScore = parseFloat($("div.score input", $Li).val()),
        fWeight = parseFloat($("div.weight input", $Li).val())/100,
        fRes = (fScore*fWeight);

    if(isNaN(fRes)) fRes = 0.00;

    $("div.weightscore input", $Li).val(parseFloat(fRes.toFixed(decimals)));

    CalculateListRowTotal();
}

$("#cover li div.weight input, #cover li div.score input").keyup(function(){
    CalculateListRow($(this).closest("li"));
});

function AddListRow(){
    $("#cover li.total").before(CreateListRow());
    RestartUpdateServerTimer();
}

function RemoveListRow(){
    $("#cover li.total").prev().remove();
    CalculateListRowTotal();
}

$(".left_container .menu .add").click(function(){ AddListRow(); });
$(".left_container .menu .rem").click(function(){ RemoveListRow(); });

/**********************
     Table solution
**********************/

function CreateTableRow(){
    var eTr = document.createElement("tr"),
        eTds = [document.createElement("td"),
                document.createElement("td"),
                document.createElement("td")];

    var next_id = $("#cover2 tbody tr").length + 1;


    $(eTds[0]).append(function(){
        var eInput = document.createElement("input");
        eInput.type = "text";
        eInput.name = eInput.id = "score_"+next_id;

        $(eInput).keyup(function(){
            CalculateTableRow($(this).closest("tr"));
        });

        return eInput;
    });

    $(eTds[1]).append(function(){
        var eRelativeFix = document.createElement("div"),
            eInput = document.createElement("input"),
            eExtra = document.createElement("div");

        eRelativeFix.className = "relative_fix";

        eInput.type = "text";
        eInput.name = eInput.id = "weight_"+next_id;

        eExtra.innerHTML = "%";
        eExtra.className = "extra";

        eRelativeFix.appendChild(eInput);
        eRelativeFix.appendChild(eExtra);

        $(eInput).keyup(function(){
            CalculateTableRow($(this).closest("tr"));
        });

        return eRelativeFix;
    });

    $(eTds[2]).append(function(){
        var eInput = document.createElement("input");
        eInput.type = "text";
        eInput.name = eInput.id = "weightscore_"+next_id;

        return eInput;
    });

    for(i = 0; i < eTds.length; i++){
        eTr.appendChild(eTds[i]);
    }

    return eTr;
}

function CalculateTableRowTotals(){
    var $rows = $("#cover2 tbody tr"),
        $totals = $("#cover2 tfoot tr th");

    var fTotal = [];

    //Each row
    $rows.each(function(){
        var $columns = $("td", this);
        //Each column
        $columns.each(function(i, e){
            var fVal = parseFloat($("input", e).val());

            if(isNaN(fVal)) fVal = 0;

            if(isNaN(fTotal[i])) fTotal[i] = 0;

            fTotal[i] += fVal;
        });
    });

    for(i = 0; i < fTotal.length; i++){
        fTotal[i] = parseFloat(fTotal[i].toFixed(decimals));
    }

    fTotal[1] = (fTotal[2]/fTotal[0]*100).toFixed(decimals)+"%";
    fTotal[2] = parseFloat(fTotal[2].toFixed(decimals));

    $totals.each(function(i, e){
        $(this).text(fTotal[i]);
    });

    //Update server variables here
    RestartUpdateServerTimer();
}

function CalculateTableRow($Tr){
    var fScore = parseFloat($("td:nth-child(1) input", $Tr).val()),
        fWeight = parseFloat($("td:nth-child(2) input", $Tr).val())/100,
        fRes = (fScore*fWeight);

    if(isNaN(fRes)) fRes = 0.00;

    $("td:nth-child(3) input", $Tr).val(parseFloat(fRes.toFixed(decimals)));
    CalculateTableRowTotals();
}

function AddTableRow(){
    if($("#cover2 tbody tr").length == 0){
        $("#cover2 tbody").append(CreateTableRow());
    }else{
        $("#cover2 tbody tr:last-child").after(CreateTableRow());
    }

    RestartUpdateServerTimer();
}

function RemoveTableRow(){
    $("#cover2 tbody tr:last-child").remove();
    CalculateTableRowTotals();
}

$(".right_container .menu .add").click(function(){ AddTableRow(); });
$(".right_container .menu .rem").click(function(){ RemoveTableRow(); });

$("#cover2 tbody tr td:nth-child(1) input, #cover2 tbody tr td:nth-child(2) input").keyup(function(){
    CalculateTableRow($(this).closest("tr"));
});

/**********************
     Server data

- Simulates the data on the server,
- whether it be in a SQL server or session data
**********************/

var ServerData = {
    List: {
        Count: 3,
        Total: 5.50
    },
    Table: {
        Count: 3,
        Totals: [65, 8.46, 5.50]
    }
};

function UpdateServerData(){
    //List
    var ListCount = $("#cover li:not(.total)").length,
        ListTotal = $("#cover li.total input").val();

    //Table
    var TableCount = $("#cover2 tbody tr").length,
        TableTotals = [];

    $("#cover2 tfoot th").each(function(i, e){
        TableTotals[i] = parseFloat($(this).text());
    });

    var data = {
        json: JSON.stringify({
            List: {
                Count: ListCount,
                Total: ListTotal
            },
            Table: {
                Count: TableCount,
                Totals: TableTotals
            }
        })
    }

    //Update
    $.ajax({
        url: "/echo/json/",
        data: data,
        dataType: "json",
        type:"POST",
        success: function(response){
            ServerData.List = response.List;
            ServerData.Table = response.Table;

            var displist = "Server data<h1>List</h1><ul><li>Count: "+ServerData.List.Count+"</li><li>Total: "+ServerData.List.Total+"</li></ul>",
                disptable = "<h1>Table</h1><ul><li>Count: "+ServerData.Table.Count+"</li>";

            for(i=0; i<ServerData.Table.Totals.length; i++)
                disptable += "<li>Total "+i+": "+ServerData.Table.Totals[i]+"</li>";
            disptable += "</ul>";

            $("#server_data").html(displist+"<br />"+disptable).effect("highlight");
        }
    });
}

function RestartUpdateServerTimer(){
    if(update_server_timer != null) clearTimeout(update_server_timer);

    update_server_timer = setTimeout(function(){
        UpdateServerData()
    }, update_wait);
}

UpdateServerData();

更新

由于您很难掌握这个概念，因此这里有一个复制粘贴解决方案，无需使用AJAX即可使用。我想指出你的HTML标记和一般编码是一团糟......

Example |代码

<script type="text/javascript">
$(document).ready(function(){
function CreateInput(){
    var $group = $("<div>"),
        $score = $("<div>"),
        $weight = $("<div>"),
        $weightscore = $("<div>");

    var group_count = $("div.group").length+1;

    $group.addClass("group");
    $score.addClass("satu");
    $weight.addClass("dua");
    $weightscore.addClass("tiga");

    var $input_score = $("<input>"),
        $input_weight = $("<input>"),
        $input_weightscore = $("<input>")

    $input_score
        .attr("name", "score["+group_count+"][]")
        .attr("type", "text")
        .attr("id", "score["+group_count+"][]");

    $input_weight
        .attr("name", "weight["+group_count+"][]")
        .attr("type", "text")
        .attr("id", "weight["+group_count+"][]");

    $input_weightscore
        .attr("name", "weightscore["+group_count+"][]")
        .attr("type", "text")
        .attr("id", "weightscore["+group_count+"][]")
        .attr("disabled", true);

    $input_score.keyup(function(){
        CalculateGroup($(this).parents(".group"));
    });

    $input_weight.keyup(function(){
        CalculateGroup($(this).parents(".group"));
    });

    $score.append($input_score);
    $weight.append($input_weight);
    $weightscore.append($input_weightscore);

    $group.append($score)
          .append($weight)
          .append($weightscore);

    return $group;
}

function CalculateGroup($group){
    var fScore = parseFloat($(".satu input", $group).val()),
        fWeight = parseFloat($(".dua input", $group).val()),
        fWeightScore = parseFloat((fScore*(fWeight/100)).toFixed(2));

    if(isNaN(fWeightScore)) fWeightScore = 0;

    $(".tiga input", $group).val(fWeightScore);
    CalculateTotal();
}

function CalculateTotal(){
    var fWeightScoreTotal = 0;

    $("#idcover div.group div.tiga input").each(function(){
        var fTotal = parseFloat(parseFloat($(this).val()).toFixed(2));

        if(isNaN(fTotal)) fTotal = 0;

        fWeightScoreTotal += fTotal;
    });

    fWeightScoreTotal = parseFloat(fWeightScoreTotal.toFixed(2));

    $("#idtotalcover div.total input").val(fWeightScoreTotal);
}

$(".satu input, .dua input").keyup(function(){
    CalculateGroup($(this).parents(".group"));
});

$("#add_field a").click(function(e){
    $("#idcover").append(CreateInput());

    e.preventDefault();
});

$("#remove_field a").click(function(e){
    $("#idcover div.group:last-child").remove();
    CalculateTotal();

    e.preventDefault();
});

});
</script>
相关问题
最新问题