vendredi 22 juillet 2016

how to show pre-filled items on page from popup

I have structure like following:

enter image description here

On "Add/Edit" click one popup opens as follows:

enter image description here

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