Javascript - проблемы с отображением нескольких форм - PullRequest
Новая
       12

Javascript - проблемы с отображением нескольких форм

1 голос
/ 11 декабря 2011

Итак, я работаю над формой, которая при нажатии на нее вызывает другую форму, затем другую и т. Д. И т. Д.

Например, вот что у меня есть: 

<head>
<script langauge="javascript">
function showGeneral(){
    document.getElementById('general').style.display="block";
    document.getElementById('colors').style.display="none";
    document.getElementById('domain').style.display="none";
    document.getElementById('details').style.display="none"; 
}

function showColors(){
    document.getElementById('general').style.display="none";
    document.getElementById('colors').style.display="block";
    document.getElementById('domain').style.display="none";
    document.getElementById('details').style.display="none";  
}

function showDomain(){
    document.getElementById('general').style.display="none";
    document.getElementById('colors').style.display="none";
    document.getElementById('domain').style.display="block";
    document.getElementById('details').style.display="none"; 
}

function showDetails(){
    document.getElementById('general').style.display="none";
    document.getElementById('colors').style.display="none";
    document.getElementById('domain').style.display="none";
    document.getElementById('details').style.display="block"; 
}

</script> 
</head>

<body>
<div id="general" name="general">
<h1> General </h1>   
<form id="general" name="general">
    Name <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
  Email <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
  <input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showColors();"/> <br>
</form>
</div>



<div id="colors" name="colors" style="display:none">
<h1> Colors </h1>   
<form id="frm2" name="frm2">
    Green? <input type="text" id="frm2txt1" name="frm2txt1"/> <br>
  Red? <input type="text" id="frm2txt2" name="frm2txt2"/> <br>
  <input type="button" id="frm2btn1" name="frm2btn1" value="Continue" onclick="showDomain();"/> <br>
</form>
</div>


<div id="domain" name="domain">
<h1> Domain Name? </h1>   
<form id="frm1" name="frm1">
    Yes <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
  No <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
  <input type="button" id="frm1btn1" name="frm1btn1" value="Continue" onclick="showDetails();"/> <br>
</form>
</div>

<div id="details" name="details">
<h1> Describe Your Order </h1>   
<form id="frm1" name="frm1">
    Img <input type="text" id="frm1txt1" name="frm1txt1"/> <br>
  kk <input type="text" id="frm1txt2" name="frm1txt2"/> <br>
  <input type="button" id="frm1btn1" name="frm1btn1" value="Finish" onclick="showGeneral();"/> <br>
</form>
</div>

</body>

Функции работают нормально, но проблема в том, что он отображает все формы на странице обновления / загрузки. Как сделать так, чтобы при загрузке этой страницы отображалось только первое?

Ура!

Ответы [ 2 ]

0 голосов
/ 11 декабря 2011

Вам необходимо связать каждую из ваших функций JS с событием, чтобы функция вызывалась при запуске события.

Из того, что я понял по вашему вопросу, вам нужно иметь обработчик события onclick, связанный с некоторым элементом вашей формы - чтобы при первом щелчке по нему вызывалась соответствующая функция для второй формы и т. Д.на.Кроме того, изначально просто установите первую форму, которая будет видимой (через ваш CSS).

0 голосов
/ 11 декабря 2011

Когда страница загружается, нет вызова ни одной из функций JS, поэтому ни одна из них не обрабатывается, и отображаются все ваши формы. Вам нужно добавить явный вызов к одной из функций. Так что для отображения только первой формы вам нужно добавить 

showGeneral();

В вашем блоке скрипта (например, после функции showDetails ()).

...