Question

我有一个示例反馈网页，其中显示带有输入字段的div块，对应于使用select元素使用一些javascript逻辑选择的部门，源代码在下面

<html>

<body onload="deptSelector();"> 


<script type="text/javascript">
    function init() {
        document.getElementById("ece").style.display = "block";
        document.getElementById("it").style.display = "none";
    }

    function deptSelector() {
        var val = document.getElementById("department").value;
        if(val == "Ece") {
            document.getElementById("ece").style.display = "block";
            document.getElementById("it").style.display = "none";
        } else {
            document.getElementById("ece").style.display = "none";
            document.getElementById("it").style.display = "block";      
        }   
    }
</script>

    <div>
        <label> Department:</label>
        <select id="department" name="dept" onchange="deptSelector()">          
            <option value="Ece">Ece</option>
            <option value="IT">It</option>
        </select>
    </div>  

    <div id="ece">
        <form id="eceFbForm" action="test.jsp" method="POST">
            <label> Enter the feedback for the following ECE staffs</label>
            <div>
                <div>
                    <label>Ece_staff_1:</label>
                    <input type="text" name="eceSt1">
                </div>
                <div>
                    <label>Ece_staff_2:</label>
                    <input type="text" name="eceSt2">
                </div>
            </div>
            <input type="submit" value="submit">        
        </form>     
    </div>

    <div id="it">
        <form id="itFbForm" action="test.jsp" method="POST">
            <label> Enter the feedback for the following IT staffs</label>
            <div>
                <div>
                    <label>It_staff_1:</label>
                    <input type="text" name="itSt1">
                </div>
                <div>
                    <label>It_staff_2:</label>
                    <input type="text" name="itSt2">
                </div>
            </div>
            <input type="submit" value="submit">        
        </form>     
    </div>
</body>

</html>

目前我无法在post数据中传递select选项参数，因为表单位于单独的div块中。那么我如何重新改变表格以便我得到select选项参数以及只有与div块对应的用户输入的选项？

Answer 1

如果您的当前标记没有太大变化，您可以通过两种方式完成。

（1）处理表单提交事件并将select值添加为查询字符串。

演示：http://jsfiddle.net/abhitalks/KsGHS/1/

相关HTML ：

<form id="..." ... onsubmit="chk(this);">

相关的Javascript ：

function chk(frm) {
    var opt = document.getElementById("department").value;
    frm.action = frm.action + "&dept=" + opt;
    frm.submit;
}

（2）为每个表单添加两个隐藏的输入，然后处理表单提交以插入select值。

演示2：http://jsfiddle.net/abhitalks/f99BB/1/

相关HTML ：

<form id="eceFbForm" ... onsubmit="chk(this);">
<input name="dept" type="hidden" />
...
<form id="itFbForm" ... onsubmit="chk(this);">
<input name="dept" type="hidden" />

相关的Javascript ：

function chk(frm) {
    var opt = document.getElementById("department").value;
    frm.dept.value = opt;
    frm.submit;
}

注意：作为最佳实践，必须不引人注意地附加事件处理程序。以上代码仅供参考。

在html中传递select参数和表单数据

1 个答案: