HTML is not dynamically adding value attributes for form fields in Bootstrap Modal

Question

I have a Contact Me form which is displayed in the modal. When the inputs are incorrect, the user is directed to a dedicated Contact Me page.

Form in modal :

Dedicated page for the form :

I am trying to show input errors straightaway in the modal itself. I am using on-blur function to do this. The issue is that, the form field values aren't dynamically updated for forms in the modal. The form field values are however updated in the dedicated page.

HTML for forms in modal (value attribute not appearing) :

HTML for forms in dedicated page (value attribute correctly shown):

And also, jQuery doesn't detect the form fields in modal but detects the fields in the dedicated page.

jQuery code :

$(document).on('blur', '#id_name', function() {
    var name = $(this).val();
    alert(name);  // works only in the dedicated page !
});

Any help? Thanks !

Answer 1

When you execute your script, your modal isn't attached to the page yet so the elements can't be retrieved. Wrap all your script inside this:

$(document).ready(function() { //here all my code });

And you should fix the issue