Home/ Questions/Q 6930539
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T11:27:37+00:00

So I’m working on a form that when you click it it brings up

  • 0

So I’m working on a form that when you click it it brings up another form, then another, etc etc.

For the example, this is what I have so far:

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

The functions work fine – but the problem is it displays all the forms at on page refresh/load. How do I make it so just the first one displays when you load that page?

Cheers!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When the page loads there is no call to any of the JS functions so none of them are being processed and all your forms are displayed. You need to add an explicit call to one of the functions. So to display the first form only you’d need to add

    showGeneral();

    In your script block (after the showDetails() function for example).

    • 0