2013-07-24 133 views
1

我需要一些帮助:我有以下形式:校验和之前提交

<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> 

现在因为一些输入的请求而产生的,我不知道如何检查的总和( 。加上)。在提交之前,我基本上需要确保它等于100。什么是解决我的问题?谢谢。

+0

环路通过对'onsubmit'活动形式?如果出现问题,请让用户知道并停止该过程。 – melancia

回答

0

你可以使用jQuery

$(".toAdd").length 

或简单的JS

var myInputs= document.getElementsByTagName('input'); 
var noOfInputs =myInputs.length; 

以及这会给你我的数/通过循环p元素,为值相加......

var sum; 
$(".toAdd").each(function() { 
    sum=sum+$(this).val(); 
}); 
+1

他显然不使用jQuery。 – Barmar

+0

即使他没有增加价值。 – Barmar

+0

我确实有jquery。主要问题 - 不知道前端如何工作。包括javascript。或者任何具有用户界面的东西。 – alxkls

1
var total = 0; 
var toAdds = document.getElementsByClassName("toAdd"); 
for (var i = 0; i < toAdds.length; i++) { 
    total += parseInt(toAdds[i].value, 0); 
} 
if (total == 100) { 
    // OK 
} else { 
    // not OK 
} 

另外,你的鳕鱼E对于添加新的选项需要设置类:

newOption.className = "toAdd"; 
+0

你能解释“newOption.className =”toAdd“;” –

+0

@AbdulWaheed它设置元素的类,像'选项class =“toAdd”>在HTML中。 – Barmar

2

尝试

<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