2011-12-11 2 views
1

、これは私がこれまで持っているものです。Javascriptを - だから私は、たとえばなどなど、次に別の、あなたはそれをクリックしたとき、それは別のフォームが表示されますことを、フォーム上</p> <p>を働いている複数のフォームの表示の問題

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

機能は正常ですが、問題はすべてのフォームをページの更新/読み込み時に表示することです。そのページを読み込むと、最初のものだけが表示されるようにするにはどうしたらいいですか?

乾杯!

答えて

0

ページが読み込まれると、JS関数の呼び出しが行われないため、処理されず、すべてのフォームが表示されます。関数の1つに明示的な呼び出しを追加する必要があります。だから、最初のフォームを表示するだけで、あなたのスクリプトブロック(例えばshowDetails後の()関数)で

showGeneral(); 

を追加する必要があると思います。

+0

返信いただきありがとうございます。 私はどこにどのように置くべきなのか混乱しています: 'showGeneral();' 私に例を教えてもらえますか? ありがとうございます –

+0

もちろん - いくつかのオプションがあります。あなたがちょうどshowGeneral();開始点と終了点の間のどこかの行に、

0

各JS関数をイベントに結びつけて、イベントがトリガーされたときに関数が呼び出されるようにする必要があります。

あなたの質問を理解したので、onclickイベントハンドラをフォームのいくつかの要素に関連付ける必要があります。最初のクリックがクリックされると、2番目のフォームの適切な関数が呼び出されます。また、最初は最初のフォームを(CSSを介して)表示するように設定します。

関連する問題