комплектная форма детали невидимая

Question

У меня есть одна форма с полями ввода. После первой части есть две кнопки (внешние, внутренние), внешняя перенаправляет вас куда-то еще, а внутренняя кнопка должна показывать (устанавливать видимые) больше полей ввода.

как

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

    } 

Есть ли лучшее решение, чтобы сделать это? ТНХ за любую помощь :)

UPDATE 1

Ok, чтобы установить его видимое и невидимое не Поставленная задача у меня есть большой белый блок на моей странице, как я могу динамически изменять его размер?

Answer 1

Ну вы могли бы сделать это:

Ассинг идентификатор в форму затем добавить класс «мышимоиПоля» для полей ввода, которые вы хотите показать. Тогда попробуйте это:

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