Как остановить отправку всех полей в div формы?

Question

Я разделил форму на две части: sec1 и sec2. Каждый раздел является частью div с именами sec1Div и sec2Div. Исходя из некоторого выбора, один из div является скрытым . Но проблема в том, что все еще поля в скрытом разделе представлены. Пожалуйста, предложите способ, чтобы все поля в div не отправлялись при отправке.

Answer 1

Есть несколько способов сделать это. Вы можете привязать функцию к событию submit , или удалить name атрибуты полей внутри скрытого div. Вы также можете отключить поля, установив disabled="disabled".

Если вы используете jQuery , вы можете сделать эти примеры.

Чтобы отключить все поля в скрытом div, вы можете сделать что-то вроде:

function hideDiv(el) {
    $('input', el).each(function(){
        $(this).attr('disabled', 'disabled');
    });
    $(el).hide();
}

И, соответствующая функция показа div:

function showDiv(el) {
    $('input', el).each(function(){
        $(this).removeAttr('disabled');
    });
    $(el).show();
}

Пожалуйста, напомните, что это всего лишь пример кода. Но вы можете взять идею из этого.

Answer 2

Причина, по которой это происходит, заключается в том, что элементы все еще находятся внутри элемента form. Скрытие div с использованием CSS не изменит этого - они все еще присутствуют в DOM.

Скорее всего, было бы проще добавить скрытое поле input к каждому div, которое можно использовать для определения серверной стороны, какую из них вы должны обрабатывать. Затем вы можете просто игнорировать данные из скрытой формы.

Если вам действительно нужно остановить публикацию данных, это немного грязно, но вы можете переместить скрытое содержимое div за пределы элемента form, чтобы поля не были отправлены. Если вы хотите снова отобразить div, вам нужно будет переместить поля обратно. В зависимости от сложности вашего CSS, это может вызвать проблемы в некоторых браузерах, поэтому я бы посоветовал использовать мое первое предложение.