Why is the page reloading when submitting a form?

Question

Web development

There is a form handler, so that it does not reload, return false is added; at the end

$("#form-ingress").submit(function () {
    var login = $("#login-ingress").val();
    var password =$("#ingress-password").val();
    if(login != "" && password!=""){
        Ingress(login,password);
    }
    return false;
});

if the form is initially on the html page, then everything is fine, the page is not reloaded,
but if the form is added to the dom tree via js with the following code:

function ingressOpen (){
    $('#ingress').html(
        '                <form id="form-ingress" action="" class="form-horizontal">\n' +
        '                    <div class="good_z"></div>\n' +
        '                    <label class="sr-only" for="login-ingress">Ваш логин</label>\n' +
        '                    <div class="input-group mb-2">\n' +
        '                        <div class="input-group-prepend">\n' +
        '                            <div class="input-group-text"><i class="fas fa-user "></i></div>\n' +
        '                        </div>\n' +
        '                        <input type="text" name="login" required class="form-control" id="login-ingress"\n' +
        '                               placeholder="Ваш логин">\n' +
        '                    </div>\n' +
        '                    <label class="sr-only" for="login-password">Пароль</label>\n' +
        '                    <div class="input-group mb-2">\n' +
        '                        <div class="input-group-prepend">\n' +
        '                            <div class="input-group-text"><i class="fas fa-key fa-flip-horizontal"></i></div>\n' +
        '                        </div>\n' +
        '                        <input type="password" name="password" required class="form-control" id="ingress-password"\n' +
        '                               placeholder="Пароль">\n' +
        '                    </div>\n' +
        '                    <button class="btn btn-success center-block" type="submit">\n' +
        '                        Войти\n' +
        '                    </button>\n' +
        '                </form>\n'
    )
}

then on clicking on the submit button, a reload occurs, how to prevent this?

Answer 1

What, exactly, needs to be done:
1. Give all checkboxes one class, for example js-checkbox
2. Assign a name to each checkbox
3. If name is not unique between groups, then enter a data attribute with the name of the group
4. Set the waiting period between requests
t .e. each checkbox will look like this:

<input class="js-checkbox" type="checkbox" id="<Уникальный ID>" name="<Название свойства>" data-type="<Название группы>" value="true" />
<label for="<Уникальный ID чекбокса>">Лэйбл</label>

For example:

<input class="js-checkbox" type="checkbox" id="check_atlas_concore" name="atlas_concore" data-type="ArrayCheck" value="true" />
<label for="check_atlas_concore">Atlas Concore</label>

then everything will work like this:

var timer = null;

function pushData()
{
    var data = {};
    var checkedBoxes = $('.js-checkbox:checked');
    var checkedBoxesQ = checkedBoxes.length;

    checkedBoxes.each(function(){
        var item = {};
        item[this.name] = true;
        data[$(this).data('type')] = item;

        if (!--checkedBoxesQ) {
            $.ajax({
                type: 'POST',
                url: '',
                data: data,
                success: function(msg) {
                }
            });
        }
    });
}


$('.js-checkbox').on('change', function(){
    clearTimeout(timer);
    timer = setTimeout(pushData, 1000);
});

but, it's best to wrap the entire filter in a form, for example with id myFilter
and include the name of the group in the name of each checkbox,
for example:

<input class="js-checkbox" type="checkbox" id="check_atlas_concore" name="ArrayCheck[atlas_concore]" value="true" />
<label for="check_atlas_concore">Atlas Concore</label>

then pushData will look even more concise:

function pushData()
{
    $.ajax({
        type: 'POST',
        url: '',
        data: $('#myFilter').serialize(),
        success: function(msg) {
        }
    });
}

Answer 2

The submit event will not fire. you first hang handlers on elements, and then create a new element without adding an event to it. Hang the handler on the whole document, and filter the elements:

$(document).on("submit", "#form-ingress",function() {
...
});

Answer 3

onclick="event.preventDefault()" in <form>will cancel the default action (form submission) and drive in the script