0

我有一个带有输入字段的表单。第一部分之后有 2 个按钮（外部、内部），外部将您重定向到其他地方，内部按钮应显示（设置可见）更多输入字段。

喜欢

<form action="servlet_link" method="post">
<table class="ui-widget">
    <colgroup width="350" span="2"></colgroup>
    <tbody>
        <tr>
            <td>
            <p class="form">
                Familyname
            </p><td>
            <input class="ui-widget-content ui-state-default ui-corner-all" name="familyname" type="text"">
            </td>
        </tr>
        <tr>
            <td>
            <p class="form">
                Givenname
            </p></td>
            <td>
            <input class="ui-widget-content ui-state-default ui-corner-all" name="ustid" type="text">
            </td>
        </tr>
    </tbody>
</table>
    <div class="center">
    <!-- Buttons -->
    <table align="center">
        <tr>
            <td>
                <!-- sends data post and redirects u -->
                <a href="javascript:document.forms[0].submit()" class="btn" name="extern">External</a>                                  
            </td>
            <td>
                <!-- shows more input fields and sets both buttons invisible --> 
                <a href="???" class="btn" name="intern" >Internal</a>
            </td>
        </tr>
    </table>
    </div>

    <!-- part 2 should be shown -->

    <table class="ui-widget">
    <colgroup width="350" span="2"></colgroup>
    <tbody>
        <tr>
            <td>
            <p class="form">
                Companyname
            </p><td>
            <input class="ui-widget-content ui-state-default ui-corner-all" name="companyname" type="text"">
            </td>
        </tr>
        <tr>
            <td>
            <p class="form">
                address
            </p></td>
            <td>
            <input class="ui-widget-content ui-state-default ui-corner-all" name="address" type="text">
            </td>
        </tr>
    </tbody>
</table>
    <div class="center">
    <!-- Buttons -->
    <table align="center">
        <tr>
            <td>
                <!-- sends data post and redirects u -->
                <a href="javascript:document.forms[0].submit()" class="btn" name="extern">External</a>                                  
            </td>
        </tr>
    </table>
    </div>
</form>

我是否必须给所有元素一个 id 标签并通过以下方式将其设置为不可见：

JS：

function invisbleForm() {

            document.getElementById("companynameText").style.display ="block";

    }

有更好的解决方案吗？谢谢任何帮助:)

更新 1

好的，将它设置为可见和不可见不是问题，我的页面上有一个大的白色块我如何动态调整它的大小？

4

2 回答 2

1

那么你可以这样做：

为您的表单分配一个 id，然后在您希望显示的输入字段中添加一个类“myFields”。然后试试这个：

var myForm = document.getElementById('FormId');
var ipnutFieldsToShow = myForm.getElementsByClassName('myFields');
for(var i = 0; i < inputFieldsToShow.length; i++) {
   inputFieldsToShow[i].style.display ="block";
}
于 2013-08-29T13:33:49.293 回答
1

您可以为要显示的每个元素添加一个类名，并使用本机方法“document.getElementsByClassName”。

看看：https ://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

于 2013-08-29T13:33:52.733 回答