We Keep Coding

How to validate multi step form jquery Php

I am working with multi step form with php, I have array $rec where i am getting all
questions ( from database/dynamic).
I want to validate those fields whose key is mandatory and value is 1 (coming from array($rec)).
I want "next" page/question shouldn't display until I fill first question.
Here is my html code
<form action="<?php echo site_url('Nps/FormAdd'); ?>" method="post">
<?php //echo "<pre>"; print_R($keyslug);?>
<input type="hidden" name="mobile_no" value="<?php echo $keyslug['mobileNo']; ?>">
<input type="hidden" name="contact_mapping_id" value="<?php echo $keyslug['id']; ?>">
<?php $i="1";
$lastElement = end($rec);
$i="1";
foreach($rec as $key => $records)
{
<div class="card" id="<?php echo $records['ques_id']; ?>" >
<?php if($records['type']=="range" )
{
?>
<div class="form-group" style="margin-top: 10px;">
<div class="chart-scale develop-rating">
<?php $j=$records['start_range'];
$max= $records['end_range'];
for($i=$j;$i<=$max; $i++) {
?>
<button id="rating" attr-hide-div="<?php if($i <= $records['min_value']) { echo $records['max_show_ques_id']; } else { echo $records['show_ques_id']; }?>"
attr-show-div="<?php if($i <= $records['min_value']) { echo $records['show_ques_id']; } else { echo $records['max_show_ques_id']; }?>"attr-value="<?php echo $i; ?>" class="btn rating-button-click btn-scale btn-scale-asc-<?php echo $i; ?>">
<?php echo $i; ?>
</button>
<?php } ?>
<input type="hidden" id='ques_<?php echo $records['ques_id']; ?>' class="input-develop all-mandatory-check" attr-required="<?php echo $records['mandatory']; ?>" <?php if($records['IsRatingQuestion']=="1") { ?> name='rangeR_<?php echo $records['ques_id']; ?>' <?php } else { ?> name='ques_<?php echo $records['ques_id']; ?>' <?php } ?> value="">
</div>
</div>
<?php
}
elseif($records['type']=="check_box")
{
?>
<div class="form-group checkboxes">
<label class="form-control-label"><?php echo $records['question']; ?></label>
<div>
<?php
$opt = explode("::", $records['options']);
$result = count($opt);
$i="1";
foreach($opt as $s)
{
?>
<label class="form-container"><?php echo $s; ?>
<input class="all-mandatory-check" type="checkbox" attr-required="<?php echo $records['mandatory']; ?>" id="name" value='<?php echo $s; ?>' name='check_<?php echo $records['ques_id']; ?>[]'>
<span class="checkmark"></span>
</label>
<?php } ?>
</div>
</div>
<?php
}
$key;
if($key!="0"){
?>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<?php } ?>
<?php
$record_last_end = $rec;
$lastElement = array_key_last($record_last_end);
if($key == $lastElement)
{
?>
<input type="submit" name="submit" value="submit" class="next action-button" >
<?php } else { ?>
<input type="button" name="next" id="next1" class="next action-button" value="Next" />
<?php } ?>
</div>
</div>
<?php
//$i++;
} ?>
</form>

"Required field" validation Messsage overlaps with the country select field

Recently I have create a Form using html,css and jQuery......There I showed the "required field" validation also.....But if I click on the Submit button with out filling the country field,the "required field" validation message is showing up,but it gets overlapped with the country select field....... I need help guys.... Thank you all....Click to see the image
<style>
.captitalize {
text-transform: capitalize;
}
.nav-menu {
display: none
}
</style>
<div class="account-create login login-register">
<div class="col-xs-12 col-sm-6 col-md-6 box register">
<form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="form-validate" class="form-box register-form">
<li><label for="email_address"><?php echo $this->__('Email Address') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="email" id="email_address" value="<?php echo $this->escapeHtml($this->getFormData()->getEmail()) ?>" title="<?php echo $this->__('Email Address') ?>" class="form-control input-text input-block-level required-entry validate-email"
/>
</div>
</li>
<?php if (Computenext_Global_Config::getInstance()->hasAttribute('SIMPLIFIED_SIGN_UP_FLOW')): ?>
<li><label for="password"><?php echo $this->__('Password') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="password" name="password" id="password" value="<?php echo $this->escapeHtml($this->getFormData()->getPassword()) ?>" title="<?php echo $this->__('Password') ?>" class="form-control input-text input-block-level required-entry validate-admin-custom-password"
/>
</div>
</li>
<li><label for="cpassword"><?php echo $this->__('Confirm Password') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="password" name="cpassword" id="cpassword" value="<?php echo $this->escapeHtml($this->getFormData()->getCpassword()) ?>" title="<?php echo $this->__('Confirm Password') ?>" class="form-control input-text input-block-level required-entry validate-admin-custom-password validate-cpassword"
/>
</div>
<div class="field">
<label for="company"><?php echo $this->__('Company') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="company" id="company" value="<?php echo $this->escapeHtml($this->getFormData()->getCompany()) ?>" title="<?php echo $this->__('Company') ?>" class="form-control input-text required-entry validate-alphanum-with-hypens-spaces input-block-level<?php echo $this->helper('customer/address')->getAttributeValidationClass('company') ?>"
maxlength="75" />
</div>
</div>
<!-- country selection drop down -->
<div class="field">
<label for="country"><?php echo $this->__('Country') ?> <span
class="required">*</span> </label>
<div class="input-box" id="country-dropdown">
<?php //echo $this->getCountryHtmlSelect() ?>
<select id="country_id" name="country_id" class="validate-select without-styles form-control required-entry" onchange="setStateCode(this.value);">
<option value=""><?php echo $this->__('--Please Select--'); ?></option>
</select>
</div>
</div>
<div class="field">
<label for="postcode"><?php echo $this->__('Postcode') ?><span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="postcode" id="postcode" value="<?php echo $this->escapeHtml($this->getFormData()->getPostcode()) ?>" title="<?php echo $this->__('Postcode') ?>" class="form-control input-text input-block-level required-entry validate-zip-code-international validate-zip-code"
maxlength="8" />
</div>
</div>
<!-- state selection dropdown/textbox-->
<div class="field">
<label for="company"><?php echo $this->__('State/Region/Country') ?><span class="required">*</span></label>
<div class="input-box" id="region-div-dropdown">
<select id="region" name="region" class="validate-select without-styles form-control required-entry">
</select>
</div>
</div>
<div class="field">
<label for="city"><?php echo $this->__('Town/City') ?><span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="city" id="city" value="<?php echo $this->escapeHtml($this->getFormData()->getCity()) ?>" title="<?php echo $this->__('Town/City') ?>" class="form-control input-text input-block-level required-entry" />
</div>
</div>
<div class="field">
<label for="address1"><?php echo $this->__('Address 1') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="address1" id="address1" value="<?php echo $this->escapeHtml($this->getFormData()->getAddress1()) ?>" title="<?php echo $this->__('address 1') ?>" class="form-control input-text required-entry input-block-level <?php echo $this->helper('customer/address')->getAttributeValidationClass('address1') ?>"
/>
</div>
</div>
<div class="field">
<label for="address2"><?php echo $this->__('Address 2') ?> <span
class="required">*</span></label>
<div class="input-box">
<input type="text" name="address2" id="address2" value="<?php echo $this->escapeHtml($this->getFormData()->getAddress2()) ?>" title="<?php echo $this->__('Address 2') ?>" class="form-control input-text required-entry input-block-level <?php echo $this->helper('customer/address')->getAttributeValidationClass('address2') ?>"
/>
</div>
</div>
<div class="field">
<label for="phoneno"><?php echo $this->__('Phone Number') ?> <span
class="required">*</span></label>
<div class="input-box">
<div class="country-data">
<div class="country-code">
<input type="text" name="phone_code" id="phone_code" value="" class="input-text" readonly="readonly" />
</div>
<div class="phone-numer">
<input type="text" name="phoneno" id="phoneno" value="<?php echo $this->escapeHtml($this->getFormData()->getPhone()) ?>" title="<?php echo $this->__('Phone Number') ?>" class="form-control input-text required-entry validate-phoneLax input-block-level"
maxlength="15" onblur="trimPhone(this.id);" />
</div>
</div>
</div>
</div>
</div>
<div class="buttons-box clearfix">
<button type="submit" class="button btn btn-primary">
<?php echo $this->__('Submit') ?>
</button>
<span class="required"><b>*</b> <?php echo $this->__('Required Fields') ?></span>
</div>
</form>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
var isIE = /*#cc_on!#*/ false || !!document.documentMode;
if (isIE) {
//jQuery("#modal-alert-tag").modal('show');
jQuery("#captcha-reload").trigger("click");
}
loadCountries();
jQuery('#region-div-text').hide();
jQuery('#region').parent().parent().hide();
});
var dataForm = new VarienForm('form-validate', true);
Validation.add('region-other-text', '<?php echo $this->__('
This is a required field.
'); ?>',
function(v) {
var val = jQuery('#region').val();
if (val == 'other') { //validate only if region will be in "other".
return !Validation.get('IsEmpty').test(v);
} else {
return true;
}
});
<?php if($this->getShowAddressFields()): ?>
new RegionUpdater('country', 'region', 'region_id', <?php echo $this->helper('directory')->getRegionJson() ?>, undefined, 'zip');
<?php endif; ?>
function loadCountries() {
var bcmName = "<?php echo Computenext_Global_Const::getChannelCode() ?>";
var urlString = "/js/" + bcmName.toLowerCase() + "/country_list.json";
var jsonTxt = jQuery.ajax({
url: urlString,
dataType: "json",
async: false
}).responseText;
var jsonData = JSON.parse(jsonTxt);
var htm = '';
for (var c = 0; c < jsonData.length; c++) {
var countryObj = jsonData[c];
if (typeof countryObj !== 'undefined') {
htm += '<option value=' + countryObj.code + '>' + countryObj.country + '</option>';
}
}
jQuery('#country_id').append(htm);
}
function setStateCode(country) {
var bcmName = "<?php echo Computenext_Global_Const::getChannelCode() ?>";
if (country == "") {
jQuery('#region').parent().parent().hide();
jQuery('#phone_code').val('');
} else {
var jsonTxt = jQuery.ajax({
url: "/js/" + bcmName.toLowerCase() + "/country_list.json",
dataType: "json",
async: false
}).responseText;
var jsonData = JSON.parse(jsonTxt);
var htm = '';
for (var c = 0; c < jsonData.length; c++) {
var countryObj = jsonData[c];
//alert(JSON.stringify(countryObj));
if (country == countryObj.code) {
var stateList = countryObj.states;
if (stateList.length == 0) {
jQuery('#region').parent().parent().hide();
} else {
jQuery('#region').parent().parent().show();
htm += '<option value=""><?php echo $this->__('--Please Select--')?></option>';
for (var s = 0; s < stateList.length; s++) {
htm += '<option value=' + stateList[s].key + '>' + stateList[s].value + '</option>';
}
}
jQuery('#phone_code').val('+' + countryObj.phonecode);
}
}
jQuery('#region').html(htm);
}
}
</script>
</div>
Snap For Image

Give this a try
margin-top is set to -20px make it -10px. Try it
CSS
.validation-advice{
margin-top: -10px;
}
hope this helps...

Not working in Mozilla firefox and works fine in chrome $('input[data-type="choise"]').change(function()

Iam working with online test portal developing its working fine with chrome but the problem is it not working woth mozill.My code is as follows and it works fine in chrome and not working in the mozilla firefox Suggest me the alternative or solution for.
input[data-type="choise"] is not working
<script>
( document ).ready(function() {
$('input[data-type="choise"]').change(function() {
var Question = $(this).attr('name');
var Checked = $(this).attr('value');
y++;
if(Checked=="0"){
}else{
x++;
}
$('#score').replaceWith("<span id='score'><input type='hidden' name='score' id='score' value='"+ x +"' /> <input type='hidden' name='totalquestions' id='totalquestions' value='"+ y +"' /></span>");
alert('Selected Choise for ' + Question + ' is ' + Checked+ 'and score is'+ x);
});
});
</script>
<div class="time">
<label> Remaining Time </label> <span id="timer"></span>
</div>
<?php
include('connection.php');
$test=$_SESSION["testnum"];
$query=mysql_query("select * from questions where Testno='$test' order by Id ASC");
if($query==true){ ?>
<form id="scoretarget" name="formsubmit" action="congrasulations.php" method="POST">
<span id="score"><input type="hidden" name="score" id="score" value="" />
<input type='hidden' name='totalquestions' id='totalquestions' value="" />
</span>
<hr class="hr">
<?php $id=1;
While($row=mysql_fetch_array($query)){ ?>
<?php
$questionnum=$row['Questionno'];
$question=$row['Question'];
$ans=$row['Answer'];
?>
<div class="question">
<div class="row">
<div class="col-md-1">
<label class="control-label form-inline">
<?php echo $questionnum?>
</label>
</div>
<div class="col-md-11 quest-left">
<div class="form-group">
<label class="control-label form-inline">
<?php echo $question;?>
</label>
</div>
<fieldset>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option A"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option1'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option B"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option2'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option C"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option3'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option D"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option4'];?></span><br>
</fieldset>
</div>
</div>
</div><br>
<?php ++$id;} ?>
<input type="submit" name="proceed" value="proceed" class="btn btn-info pull-right">
</form>
<?php } else{?>
<div class="question">
<div class="row">
<div class="col-md-12">
<h4 style="text-align:center; color:red;"> Question Paper is not updated </h4>
</div></div></div>
<?php }
?>
</div>

<script>
( document ).ready(function() {
$('input[data-type="choise"]').click(function() {
var Question = $(this).attr('name');
var Checked = $(this).attr('value');
y++;
if(Checked=="0"){
}else{
x++;
}
$('#score').replaceWith("<span id='score'><input type='hidden' name='score' id='score' value='"+ x +"' /> <input type='hidden' name='totalquestions' id='totalquestions' value='"+ y +"' /></span>");
alert('Selected Choise for ' + Question + ' is ' + Checked+ 'and score is'+ x);
});
});
</script>
<div class="time">
<label> Remaining Time </label> <span id="timer"></span>
</div>
<?php
include('connection.php');
$test=$_SESSION["testnum"];
$query=mysql_query("select * from questions where Testno='$test' order by Id ASC");
if($query==true){ ?>
<form id="scoretarget" name="formsubmit" action="congrasulations.php" method="POST">
<span id="score"><input type="hidden" name="score" id="score" value="" />
<input type='hidden' name='totalquestions' id='totalquestions' value="" />
</span>
<hr class="hr">
<?php $id=1;
While($row=mysql_fetch_array($query)){ ?>
<?php
$questionnum=$row['Questionno'];
$question=$row['Question'];
$ans=$row['Answer'];
?>
<div class="question">
<div class="row">
<div class="col-md-1">
<label class="control-label form-inline">
<?php echo $questionnum?>
</label>
</div>
<div class="col-md-11 quest-left">
<div class="form-group">
<label class="control-label form-inline">
<?php echo $question;?>
</label>
</div>
<fieldset>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option A"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option1'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option B"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option2'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option C"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option3'];?></span><br>
<input type="radio" data-type="choise" name="q<?php echo $id; ?>" value="<?php if($ans=="Option D"){ echo"1";}else{echo"0";} ?>"><span> <?php echo $row['Option4'];?></span><br>
</fieldset>
</div>
</div>
</div><br>
<?php ++$id;} ?>
<input type="submit" name="proceed" value="proceed" class="btn btn-info pull-right">
</form>
<?php } else{?>
<div class="question">
<div class="row">
<div class="col-md-12">
<h4 style="text-align:center; color:red;"> Question Paper is not updated </h4>
</div></div></div>
<?php }
?>
</div>

How to create multiple text area at the time of edit option using PHP and JavSscript

I am creating multiple text area using + button and I need to do the same operation when edit option is also there using PHP and JavaScript. Here is my code:
<div style="width:24%; float:left; padding:10px;">No of questions :
<input name="no_of_question" id="ques" class="form-control" placeholder="no of question" value="<?php if($_REQUEST['edit']) { echo $getcustomerobj->no_of_question; } else { echo $_REQUEST['no_of_question']; } ?>" type="text" onkeypress="return isNumberKey(event)">
<div id="err_msg_name" style="font-size:12px; color:#FF0000; text-align: center;"></div>
</div>
<div class="clear"></div>
<div style="padding-bottom:10px;">
Questions : <input type="button" class="btn btn-success btn-sm" name="plus" id="plus" value="+" onClick="addQuestionField();"><input type="button" class="btn btn-danger btn-sm" name="minus" id="minus" value="-" onClick="deleteQuestionField();">
</div>
<div id="container">
<div>
<div style="width:24%; float:left; padding:10px;">
<textarea class="form-control" name="questions0" id="questions" placeholder="Questions" style="background:#FFFFFF;" rows="2"><?php if($_REQUEST['edit']) { echo $getcustomerobj->questions; } else { echo $_REQUEST['questions']; } ?></textarea>
</div>
<div style="float:left;margin-top:37px;">
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_answertype->find($ustatus);
?>
<div style="float:left; margin-right:10px;">
<?php
foreach($feeddata as $v){
?>
<input type="radio" name="answer_type0" id="answer_type0" onClick="selectScale(this.value,'0');" value="<?php echo $v['_id']; ?>"> <?php echo $v['answertype']; ?>
<?php
}
?>
</div>
<div style="float:left; margin-top:-10px;display:none;" id="scaleid0"><select class="form-control" id="nscale0" name="noofscale0">
<option value="">Select Answer Type</option>
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_scale->find($ustatus);
foreach($feeddata as $v){
?>
<option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->no_of_scale == $v['_id'] or $_REQUEST['no_of_scale'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['noofscale']; ?></option>
<?php } ?>
</select>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
My JavaScript function is given below:
<script>
function addQuestionField(){
var get =$("#ques").val();
if(get==null || get==''){
alert('Please add no of questions');
}else{
var counter = 0;
if (counter > 0){
return;
}else{
counter++;
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_answertype->find($ustatus);
?>
<?php
$status=array("status"=>'1');
$feeddatascale=$db->kf_scale->find($ustatus);
?>
for(var i=1;i<get;i++){
$('#container').append('<div><div style="width:24%; float:left; padding:10px;"> <textarea class="form-control" name="questions'+ i +'" id="questions" placeholder="Questions" style="background:#FFFFFF;" rows="2"><?php if($_REQUEST['edit']) { echo $getcustomerobj->questions; } else { echo $_REQUEST['questions']; } ?></textarea></div><div style="float:left;margin-top:37px;"><div style="float:left; margin-right:10px;"><?php foreach($feeddata as $v){?> <input type="radio" name="answer_type'+i+'" id="answer_type0" onClick="selectScale(this.value,'+i+');" value="<?php echo $v['_id']; ?>"> <?php echo $v['answertype']; ?> <?php }?></div><div style="float:left; margin-top:-10px;display:none;" id="scaleid'+i+'"><select class="form-control" id="nscale'+i+'" name="noofscale'+i+'"><option value="">Select Answer Type</option><?php foreach($feeddatascale as $v){ ?><option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->no_of_scale == $v['_id'] or $_REQUEST['no_of_scale'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['noofscale']; ?></option><?php } ?></select></div><div style="clear:both;"></div></div><div style="clear:both;"></div></div>');
}
}
}
}
function deleteQuestionField(){
var get =$("#ques").val();
var textareas = $('#container textarea');
if (textareas.length !== 0) {
textareas.last().remove();
$('#ques').val(textareas.length - 1);
}
}
</script>
Here I can create the multiple text-area,radio button using + button which depends on no of questions field value. Here I need to do the same thing when the following condition is true.
if($id!='' && $_REQUEST['edit']==1){
}
at the time of page reload if the above condition is true then no need to click on + button, the multiple field should also created.

Ignore checkbox that is disable

I have here a code that when you clicked the All link it will check all the check boxes and when None it will uncheck all the check boxes.
But I have a PHP conditions that when the $pta_fee == $pta_fee_trans the check box will be disable, but when I clicked the All link, the disable check box appears to be checked.
How can I ignore the disable check box if I checked the All link?
<div class="sub_profile right">
<p class="sub_content_text" style='margin-left: 25px;'>
All | None
MISCELLANEOUS FEES:
</p>
<?php
if($pta_fee == $pta_fee_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' value="<?php echo $pta_fee; ?>" disabled>
PTA Fee : ₱ <?php echo $pta_fee; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $pta_fee; ?>" id="required-checkbox1" onClick="CheckIfChecked(this.id)">
PTA Fee : ₱ <?php echo $pta_fee; ?></p>
<?php
}
if($maintenance_fee == $maintenance_fee_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' value="<?php echo $maintenance_fee; ?>" disabled>
Maintenance Fee : ₱ <?php echo $maintenance_fee; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $maintenance_fee; ?>" id="required-checkbox2" onClick="CheckIfChecked(this.id)">
Maintenance Fee : ₱ <?php echo $maintenance_fee; ?></p>
<?php
}
if($id_school == $id_school_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' value="<?php echo $id_school; ?>" disabled>
School ID : ₱ <?php echo $id_school; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $id_school; ?>" id="required-checkbox3" onClick="CheckIfChecked(this.id)">
School ID : ₱ <?php echo $id_school; ?></p>
<?php
}
if($electricity == $electricity_trans)
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' value="<?php echo $electricity; ?>" disabled>
Electricity : ₱ <?php echo $electricity; ?></p>
<?php
}
else
{
?>
<p class="sub_content_text" style='margin-left: 30px;'>
<input type='checkbox' name='draw[]' value="<?php echo $electricity; ?>" id="required-checkbox4" onClick="CheckIfChecked(this.id)">
Electricity : ₱ <?php echo $electricity; ?></p>
<?php
}
?>
<div id="sub_profile_cont">
<div class="sub_profile left">
<p class="block_cont left">
<div id = "submit-button-container" style="display:none;">
<input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/>
</div>
<b style="display: none";><input class="action_btn" type="submit" name="submit" id="pay_btn" value="COMPUTE" onClick="setUpdateAction();"/></b>
</p>
</div>
</div>
</div>
--Here's the javascript code for checking all the check boxes:
<script>
function selectToggle(toggle, form) {
var myForm = document.forms[form];
for( var i=0; i < myForm.length; i++ ) {
if(toggle) {
myForm.elements[i].checked = "checked";
}
else {
myForm.elements[i].checked = "";
}
}
}

Try this:
<script>
function selectToggle(toggle, form) {
var myForm = document.forms[form];
for( var i=0; i < myForm.length; i++ ){
if(myForm.elements[i].disabled != true){
if(toggle){
myForm.elements[i].checked = "checked";
}
else{
myForm.elements[i].checked = "";
}
}
}
}