I have structure like following:
On "Add/Edit" click one popup opens as follows:
I have to show some items from popup as default/ pre-fill for first time. e.g. Latex, Penicillin. And then user can add/edit items by wish.
I have tried to make 'Latex' as default but my code is not working properly. I have made 'Latex' shown for first time on page. So it comes as checked on popup page. But when I select other items with 'Latex' then only other selected items are shown on page. 'Latex' doesn't come evenif it is selected. When I check 'Latex' after unchecking it once, then also it doesn't come.
I have also tried to make checked checkboxes uncheck on click "+Add/Edit" but in that checkboxes are not getting uncheck.
Can someone please tell how I should show some pre-fill items on page?
Jquery code :
//array to store checkbox values
checkValues3 = new Array();
$("input[name='mh3'][value='Latex']").attr("checked", true);
var checkedNum = $('input[name="mh3"]:checked').length;
var selectedItems = $('<ul></ul>');
if (checkedNum) {
selectedItems.append('<li>'+$( "input:checked" ).val()+'</li>');
$( "#text3" ).html(selectedItems);
}
/* $( ".inline3" ).click(function() {
$('.inline3').colorbox({onLoad: function() {
$("input[name='mh3'][value='Latex']").attr("checked", false);
}});
});*/
document.getElementById('update3').onclick = function(){
//capture all text in a variable
var textStr3 = $('<ul></ul>');
//iterate all checkbox values to create ul
$.each(checkValues3, function( index, value ){
textStr3.append('<li>'+value+'</li>');
});
//add text
$("#text3").html(textStr3);
parent.$.colorbox.close();
return false;
};
//add change handler for checkbox
$('input:checkbox[name=mh3]').change(function(){
value3 = $(this).val();
if(this.checked){
checkValues3.push(value3);
}
else
{
//Removing by value
checkValues3 = $.grep(checkValues3, function(n, i) {
return n !== value3;
});
}
});
document.getElementById('cancel3').onclick = function(){
parent.$.colorbox.close();
return false;
};
HTML
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Drug Allergies </span> <!-- <span class="icon-required" ng-show="question.required"></span>--> </label>
<!-- <p style="margin-top: 0px;">Select the surgeries or procedures </p>-->
<div class="form-row added ng-binding" ng-bind-html="question.getText()" id="text3"></div>
<div class="form-row addlink ng-binding" ng-bind-html="question.getText()"><em><a class='inline3' href="#inline_content3">+ Add/Edit</a></em></div>
<!--<div id="ch3" class="hidden">
<br/>
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Other Drug Allergies condition(s)</span> </label><br/>
<input type="text" class="other">
</div> -->
<div style='display:none'>
<div id='inline_content3' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
<div class="added">
<div class="column-left">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="mh3" value="No Known Drug Allergies" id="checkbox1" data-toggle="checkbox">
No Known Drug Allergies
</label>
<br>
<label class="checkbox" for="checkbox2" style="font-size:20px;">
<input type="checkbox" name="mh3" value="Other Antibiotics" id="checkbox2" data-toggle="checkbox">
Other Antibiotics
</label>
<br>
<label class="checkbox" for="checkbox3" style="font-size:20px;">
<input type="checkbox" name="mh3" value="Antiseizure Medications" id="checkbox3" data-toggle="checkbox">
Antiseizure Medications
</label>
<br>
<label class="checkbox" for="checkbox4" style="font-size:20px;">
<input type="checkbox" name="mh3" value="Latex" id="checkbox4" data-toggle="checkbox">
Latex
</label>
</div>
<div class="column-center">
<label class="checkbox" for="checkbox5" style="font-size:20px;">
<input type="checkbox" name="mh3" value="Penicillin" id="checkbox5" data-toggle="checkbox">
Penicillin
</label>
<br>
<label class="checkbox" for="checkbox6" style="font-size:20px;">
<input type="checkbox" name="mh3" value="Aspirin" id="checkbox6" data-toggle="checkbox">
Aspirin
</label>
<br>
<label class="checkbox" for="checkbox7" style="font-size:20px;">
<input type="checkbox" name="mh3" value="Iodine" id="checkbox7" data-toggle="checkbox">
Iodine
</label>
<br>
<label class="checkbox" for="checkbox8" style="font-size:20px;">
<input type="checkbox" name="mh3" value="Other / Not Listed" id="checkbox8" data-toggle="checkbox">
Other / Not Listed
</label>
</div>
<div class="column-right">
<label class="checkbox" for="checkbox9" style="font-size:20px;">
<input type="checkbox" name="mh3" value="Sulfa" id="checkbox9" data-toggle="checkbox">
Sulfa
</label>
<br>
<label class="checkbox" for="checkbox10" style="font-size:20px;">
<input type="checkbox" name="mh3" value="Other Pain Killers" id="checkbox10" data-toggle="checkbox">
Other Pain Killers
</label>
<br>
<label class="checkbox" for="checkbox11" style="font-size:20px;">
<input type="checkbox" name="mh3" value="Insulin" id="checkbox11" data-toggle="checkbox">
Insulin
</label>
</div>
</div>
<input type="submit" name="submit" id="update3" class="button button-orange" style="width: 90px; margin-top:25px;" value="Update">
<input type="submit" name="cancel" id="cancel3" class="button button-orange" style="width: 90px; background-color:#36606e;" value="Cancel">
<!-- <button class="button button-orange" ng-click="onClose()" style="width: 90px; background-color:#36606e;">Cancel</button>-->
</form>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire