Set checkbox label’s text in modal

I have a modal for creating new post. I want to allow the user to select departments for sharing so I’m using checkboxes for choosing the audience.

HTML:

<div class="modal fade" id="createNewPostModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title">Create New Post</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <form method="post" id="createNewPostForm">
                        <textarea rows="3" name="text" placeholder="Write something..."></textarea>
                        <div>
                            <p>Select audience to share</p>
                            <div>
                                <input type="checkbox" id="depACheckBox">
                                <label id="depACheckBoxLabel" for="depACheckBox"></label>
                                <input type="checkbox" id="depBCheckBox" >
                                <label id="depBCheckBoxLabel" for="depBCheckBox"></label>
                                <input type="checkbox" id="depCCheckBox">
                                <label id="depCCheckBoxLabel" for="CheckBox"></label>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success" onclick="return createNewPost(this.parentNode);" id="createNewPostButton" data-dismiss="modal">Share</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Different users have different departments to be shown and they are saved in mongoDB user document. I need to set the labels of the checkboxes on loading the modal.

I’m getting user’s document on page load, so my attempt inside the getUser function:

    $(document).ready(function() {
        $("#createNewPostModal").on('load', function(){
            document.getElementById('depACheckBoxLabel').innerText = window.user.depA.name;
            document.getElementById('depBCheckBoxLabel').innerText = window.user.depB.name;
            document.getElementById('depCCheckBoxLabel').innerText = window.user.depC.name;
        });
    });

I tried innerHTML as well but label still remains empty. How do I set the label text as or after the modal is shown?

Answer

If you call onload on anything other than window it will have no effect.

If you want to check for the #createNewPostModal div before running your function you can do something like the below example:

$(document).ready(checkModal);

function checkModal () {
  if($('#createNewPostModal').is(':visible')){ //if the container is visible on the page
    document.getElementById('depACheckBoxLabel').innerHTML = "this";
    document.getElementById('depBCheckBoxLabel').innerHTML = "works";
    document.getElementById('depCCheckBoxLabel').innerHTML = "now";
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal fade" id="createNewPostModal">
  <p>Select audience to share</p>
  <div>
    <input type="checkbox" id="depACheckBox">
    <label id="depACheckBoxLabel" for="depACheckBox"></label>
    <input type="checkbox" id="depBCheckBox">
    <label id="depBCheckBoxLabel" for="depBCheckBox"></label>
    <input type="checkbox" id="depCCheckBox">
    <label id="depCCheckBoxLabel" for="CheckBox"></label>
  </div>
</div>

Feel free to adjust the check for :visible to something that suits your needs when referring to that container.

---

Additionally, as requested in your comment, if you want to call this function onclick you can do this:

$('button').click(checkModal);

function checkModal () {
  if($('#createNewPostModal').is(':visible')){ //if the container is visible on the page
    document.getElementById('depACheckBoxLabel').innerHTML = "this";
    document.getElementById('depBCheckBoxLabel').innerHTML = "works";
    document.getElementById('depCCheckBoxLabel').innerHTML = "now";
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal fade" id="createNewPostModal">
  <p>Select audience to share</p>
  <div>
    <input type="checkbox" id="depACheckBox">
    <label id="depACheckBoxLabel" for="depACheckBox"></label>
    <input type="checkbox" id="depBCheckBox">
    <label id="depBCheckBoxLabel" for="depBCheckBox"></label>
    <input type="checkbox" id="depCCheckBox">
    <label id="depCCheckBoxLabel" for="CheckBox"></label>
  </div>
</div>


<button onclick="checkModal()">Click</button>

Just swap button for whatever element you want to trigger the function from.

---

Lastly, if it isn’t necessary to wait for the #createNewPostModal div to load then just call your function like this and it should work:

$(document).ready(function() { document.getElementById('depACheckBoxLabel').innerHTML = window.user.depA.name; document.getElementById('depBCheckBoxLabel').innerHTML = window.user.depB.name; document.getElementById('depCCheckBoxLabel').innerHTML = window.user.depC.name; });