passing values from html to jquery after editing

Question

I have a modal form, and after editing it, I want to pass the values from the fields to jquery . However, I'm not sure why this is not working because the alert is showing blank. Instead of the values within the field.

html

    <!-- Modal for edit_lesson_plans-->
                <div class="modal-header">
                    <h4 class="modal-title">Edit Lesson Plan</h4>
                    <button type="button" class="close modal-close" data-dismiss="modal"><i
                            class="fas fa-times"></i>
                    </button>
                </div>
                <form class="lesson-update-section" action="{% url 'home' %}" method="post">
                    {% csrf_token %}
                    <div class="modal-body">
                        <div class="form-row align-center was-validated">
                            <!-- New Lesson Plans -->
                            <div class="form-group col-lg-6">{{ edited_lp.level }}</div>
                            <div class="form-group col-lg-6">{{ edited_lp.lesson }}</div>
                            <div class="form-group col-lg-12">{{ edited_lp.description }}</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" id="update_lesson_plan" class="btn btn-success"
                                name="update_lesson_plan">Submit
                        </button>
                        <button type="submit" id="delete_lesson_plan" class="btn btn-danger"
                                name="delete_lesson_plan">Delete
                        </button>
                    </div>
                </form>

edited_lp is dynamically generated

This is a copy of the html that gets generated.

<input type="number" name="level" class="form-control" id="id_level" placeholder="Lesson level number" required="">
<input type="text" name="lesson" class="form-control" id="id_lesson" placeholder="Lesson name" required="">
<textarea name="description" cols="40" rows="3" class="form-control" id="id_description" placeholder="Lesson description"></textarea>

jquery

$(document).on('show.bs.modal', '#edit-lesson-plan-modal', function () {

    modal.find('.modal-footer #update_lesson_plan').off().on().click(function () {
        // I have tried the below as a test:
        alert($("#id_level").val());
    });
});

How should I be referencing the fields after editing it such that I can pass the values onto jquery successfully??

Could it be that it does not recognize that there is an id_level at all..?

Answer 1

Working fiddle .

The main problem comes from the click event, we shouldn't call on()/off() without passing no parameter, it should be like :

modal.find('.modal-footer #update_lesson_plan').off('click').on('click',function(e) {
  e.preventDefault();

  alert($("#id_level").val());
});

Answer 2

Possibly because of the dynamically generating items which loads after document.ready, So the better way is to give reference of the closest parent that existed at the time of page load.

For example.

Div1
  div2
      div.dynamic

Now if you try to get value or text directly from div.dynamic, you will get null so yo must reference like $('.div2').find('div.dynamic').html()