Question

我的表单查询字符串太长了。

我计划通过在提交之前简单地禁用所有未使用的表单元素来解决此问题。但我需要帮助才能使这个js功能......

每当选择主要类别时，您需要知道我有一个显示子类别的js函数。这在下拉列表上发生“onChange”。因此，类别下拉列表的“onChange”，使用javascript使正确的DIV 可见，从而使子类别可见用户指定（用户可以在子类别中选择颜色，品牌，年份等）。

例如，如果您从主要类别下拉列表中选择“汽车”，则js函数将生成包含所有“的DIV >汽车“选项可见（颜色，品牌，年份等）。然后，如果您选择其他类别，例如“卡车”，则“汽车”将变为不可见，并且“卡车”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

这段代码可以解决问题。我在IE6和FF3.6中测试过它。 loopThroughItems函数不是必需的我只是不想重复循环。如果它是一个可行的选项，你还应该看一下使用jQuery - 你已经改进了跨浏览器兼容性，它只有几行代码。

function loopThroughItems(items, func){
    var i;
    for(i = 0; i <= items.length; i++){
        func(items[i]);
    }
}

// Change test to ID of your div.
var div = document.getElementById("test");

loopThroughItems(div.getElementsByTagName("input"), function(input){
    if (!input || input.type.toLowerCase() == "submit") return;
    input.disabled = true;
});

loopThroughItems(div.getElementsByTagName("select"), function(select){
    if (!select) return;
    select.disabled = true;
});

    // Hide div.
div.style.display = "none";

使用jQuery，语法大致类似于此。我没有对此进行测试，您必须更改选择器，以便排除提交输入。无论哪种方式，您的代码都将更加紧凑，简洁，并且可以提高跨浏览器的兼容性。

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

Answer 2

我认为最好的解决方案是为每次搜索创建静态结果页面。使用POST进行初始表单提交，在服务器端处理它，以某种方式将结果存储在数据库中，然后将用户重定向到显示结果的页面。

您经常在论坛软件上看到这一点，您会被重定向到search.php?id=123这样的网页。

另一个可能更简单的解决方案是在您选择汽车或卡车时使用Javascript生成所有选项，然后完全删除您不想提交的其他字段。（See here for a tutorial使用Javascript添加和删除元素

Answer 3

如何将div移动到表单之外的另一个元素：

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;    
}

非常讨厌，但这样就可以了。

禁用div中的表单元素

3 个答案: