javascript - 提交前检查输入总和

Question

我需要一些帮助:我有以下表格:

    <form id="myForm" method="post" action="?action=agc">
<input type="hidden" name="start_date" value="<?= $_POST['start_date'] ?>" /> 
<input type="hidden" name="end_date" value="<?= $_POST['end_date'] ?>" /> 
<input type="hidden" name="c_name" value="<?= $_POST['c_name'] ?>" /> 
<input type="hidden" name="cluster" value='<?= $abn_cluster[0] ?>' />
<input type="hidden" name="abn" value="abn" />

<a href="javascript:addOption();">Add percent</a> <br /><br />
ABN percent<br />
<input type="text" name="poll[option][0][percent]" class="toAdd">&nbsp;<input type="text" name="poll[option][0][name]" value="<?= $_POST['c_name'] ?>_0_">&nbsp;<input type="checkbox" class="optionBox" value="True" name="poll[option][0][control_sample]" /><br />

<script> 
var optionNumber = 1;  
function addOption() { 
    var theForm = document.getElementById("myForm"); 
    var newOption = document.createElement("input"); 
    var newOption2 = document.createElement("input"); 
    var newOption3 = document.createElement("input"); 
    var newLabel = document.createElement("label");
    var newContent = document.createTextNode("  ");
    var newContent2 = document.createTextNode("  ");

    newOption.name = "poll[option]["+optionNumber+"][percent]";
    newOption.type = "text";
    theForm.appendChild(newOption);
    theForm.appendChild(newContent);
    newOption2.name = "poll[option]["+optionNumber+"][name]";
    newOption2.type = "text";
    newOption2.value = "<?= $_POST['c_name'] ?>_"+optionNumber+"_"
    theForm.appendChild(newOption2);
    theForm.appendChild(newContent2);

    newOption3.name = "poll[option]["+optionNumber+"][control_sample]";
    newOption3.type = "checkbox";
    newOption3.className = "optionBox";
    newOption3.value = "True"
    theForm.appendChild(newOption3);

    theForm.appendChild(document.createElement("br")); 
    optionNumber++;
}
</script>
    </p>
</div>
<div class="modal-footer" id="appendform">
    <button type="submit" class="btn btn-primary">Continue</button>
    </form>

现在因为一些输入是根据要求生成的，我不知道如何检查 (.toAdd) 的总和。在提交之前，我基本上需要确保它等于 100。什么可以解决我的问题？谢谢。

Answer 1

尝试

<form id="myForm" method="post" action="iap_crm_campaign.php?action=abngamecampaign" onsubmit="return validate()">

然后

function validate(){
    var sum = 0;

    for(var i = 0; i < optionNumber; i++){
        sum += parseFloat(document.getElementsByName('poll[option][' + i + '][percent]')[0].value);
    }

    if( sum == NaN || sum != 100){
        alert('Sum of percentage must be 100');
        return false;
    }
}

演示:Fiddle