Question

我有一个带输入字段的表单。在第一部分之后有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";

    }

有更好的解决方案吗？ thx任何帮助：）

更新1

确定将其设置为可见且不可见不是问题我在页面上有一个大的白色块如何动态调整大小？

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

Answer 2

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

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

设置表单部分隐形

2 个答案: