Отключить элементы формы внутри div

Question

У меня проблема с слишком длинной строкой формы запроса.

Я планирую решить эту проблему, просто отключив все неиспользуемые элементы формы перед отправкой. Но мне нужна помощь в создании этой функции JS ...

Вы должны знать, что у меня есть js-функция, которая показывает подкатегории всякий раз, когда выбрана основная категория . Это происходит "onChange" в выпадающем списке . Таким образом, "onChange" из выпадающего списка категории, правильный DIV сделан видимым с использованием javascript, и поэтому делает подкатегории видимыми для пользователя, чтобы указать (пользователи могут выбрать цвет, марку, год и т. д. в подкатегориях).

Например, если вы выбрали " Автомобили " из основного списка , функция js создаст DIV, который содержит все " Автомобили * 1026". * "видимые параметры (цвет, марка, год и т. д.). Затем, если вы выбрали другую категорию, скажите « Грузовые автомобили », «Автомобили» станут невидимыми, а « Грузовые автомобили » DIV станет видимым. Простой.

Однако моя проблема в том, что даже если DIV в данный момент не видны, элементы формы внутри них все равно отправляются. Это совершенно ненужно. Итак, мне нужна функция javascript, которая может быть интегрирована в уже существующую функцию, которая скрывает / показывает DIV подкатегории, которая отключает все элементы внутри неиспользуемых DIV.

Вот функция, которая показывает / скрывает DIV подкатегории и вызывается при изменении выпадающего списка основной категории:

var category=document.nav_form_main.nav_category_list.value;
(category=="Cars")?byId("nav_sub_cars").style.display='block' :  byId("nav_sub_cars").style.display='none';
(category=="Trucks")?byId("nav_sub_trucks").style.display='block' :  byId("nav_sub_trucks").style.display='none';

Я бы хотел что-то вроде этого:

(category=="Cars")?byId("nav_sub_cars").style.display='block' :  disableDiv("nav_sub_cars");

function disableDiv(divId){
    Disable all form elements inside divId 
    AND 
    make divId invisible.
}

ПРИМЕЧАНИЕ. В элементах div содержатся только элементы формы и таблицы. Другими словами, мне все равно, если все элементы внутри div отключены. Под элементами формы я имею в виду: ввод текста, списки выбора, флажки и радио.

Я совсем немного знаю js, поэтому любая помощь в создании этой функции, которая не должна быть слишком сложной, ценится ...

Спасибо

Answer 1

Я думаю, что лучшим решением будет создание статических страниц результатов для каждого поиска.Используйте POST для первоначальной отправки формы, обработайте ее на стороне сервера, каким-то образом сохраните результаты в базе данных, а затем перенаправьте пользователя на страницу, отображающую результаты.

Это часто встречается в программном обеспечении форума, выполучить перенаправление на страницу типа search.php?id=123.

---

Еще одно решение, которое может быть проще, - это сгенерировать все опции с помощью Javascript, когда вы выбираете автомобили или грузовики, а затем полностью удалить другие поля, которые вы делаетене хочу подчиняться.( Смотрите здесь учебник по добавлению и удалению элементов с помощью Javascript)

Answer 2

Этот код должен помочь.Я проверял это в IE6 и FF3.6.Функция loopThroughItems не важна, я просто не хотел повторять цикл.Вам также следует взглянуть на использование jQuery, если это приемлемый вариант - вы бы улучшили кросс-браузерную совместимость и это было бы всего лишь несколькими строками кода.что-то вроде этого.Я не проверял это, и вам пришлось бы изменить селектор, чтобы исключить отправку ввода.В любом случае ваш код будет более компактным, лаконичным и улучшит кросс-браузерную совместимость.

$("#divId").find("input, select").attr("disabled", "disabled");
$("#divId").hide();

Answer 3

Как насчет перемещения этого элемента в другой элемент за пределами формы:

HTML:

<form> 
   <div id="div1">
      ...some input, select button etc here....
   </div>
</form>

<div id="temp-div1" style="display:none;">

</div>

Функция JS:

function disableDiv(divId){
    var src = byId(divId);
    var dst = byId('temp-' + divId);

    var htm = src.innerHTML; //assigned it first to temp to avoid duplicate elements on dom
    src.innerHTML = '';
    dst.innerHTML = htm;    
}

function enableDiv(divId){
    var dst= byId(divId);
    var src= byId('temp-' + divId);

    var htm = src.innerHTML; //assigned it first to temp to avoid duplicate elements on dom
    src.innerHTML = '';
    dst.innerHTML = htm;    
}

Довольно неприятно, но это будетсделать трюк.