JavaScriptを使用して複数部門のフォームを設定する方法

Question

これを行う方法が必要です.3つの異なる部門が呼び出しを記録するために使用するWebページをHTML5とJavaScriptで作成しています。ボタンをクリックすると空白のページがロードされ、ボタンをクリックするとその特定の部門のHTMLフォームが表示されますここで別の質問で見つかったコードを使用しました

問題Iフォームが送信されると、ページが空白のデフォルトに戻されます。最後に使用された前の部門フォームを維持するにはどうすればよいですか？

つまり、部門1が表示され、ユーザーがサブをクリックする部門2のフォームを使用していて、サブミットをクリックすると、部門3の部門2のフォームなどがリロードされます。

今すぐフォームをリロードするために部門を再利用する必要があります。私はonsubmitやclickのようなものを使ってみましたが、そうするためにはトリガーしません。ここで

は私のコードです：

HTMLここ

<div class="department"> 
    <input type="button" class="DeptTitle" value="Department 1" onClick="return changeDept1()" /> 
    <input type="button" class="DeptTitle" value="Department 2" onClick="return changeDept2()" /> 
    <input type="button" class="DeptTitle" value="Department3" onClick="return changeDept3()" /> 
</div> 
<div class="body" id="default"></div> 
<div class="body" id="Dept1"><form id="calllog" action="" method="post"><input type="Submit" value="Submit" /></form></div> 
<div class="body" id="Dept2"><form id="calllog" action="" method="post"><input type="Submit" value="Submit" /></form></div> 
<div class="body" id="Dept3"><form id="calllog" action="" method="post"><input type="Submit" value="Submit" /></form></div> 

は、私が最後にここに部署

/* Different Departments, hides all but default */ 

#default {display: block;} 
#Dept1 {display: none;} 
#Dept2 {display: none;} 
#Dept3 {display: none;} 

を隠し、表示するために使用私のCSSは、私が使用するJavaScriptコードですさまざまなフォームを切り替えるにはここの別の答えから。

function changeDept1() { 
document.getElementById('default').style.display = "none"; // hide default div tag 
document.getElementById('Dept1').style.display = "block"; // show Dept1 Form div tag 
document.getElementById('Dept2').style.display = "none"; // hide Dept2 Form div tag 
document.getElementById('Dept3').style.display = "none"; // hide Dept3 div tag 
} 

function changeDept2() { 
document.getElementById('default').style.display = "none"; // hide default div tag 
document.getElementById('Dept1').style.display = "none"; // hide Dept1 Form div tag 
document.getElementById('Dept2').style.display = "block"; // show Dept2 Form div tag 
document.getElementById('Dept3').style.display = "none"; // hide Dept3 div tag 
} 

function changeDept3() { 
document.getElementById('default').style.display = "none"; // hide default div tag 
document.getElementById('Dept1').style.display = "none"; // hide Dept1 Form div tag 
document.getElementById('Dept2').style.display = "none"; // hide Dept2 Form div tag 
document.getElementById('Dept3').style.display = "block"; // show Dept3 div tag 
} 

上記は、フォーム間で変更するために機能します。フォームが送信されると、フォームを変更しないようにします。私はフォームを再表示するために、送信ボタンとフォーム自体の両方にonsubmitを追加しようとしました。私が使用しようとしたスクリプトは、ここにあります：

function showDept1() { 
document.getElementById('Dept1').style.display = "block"; // show Dept1 Form div tag 
} 

私は最初の部門では、提出されたときに消えないようにテストとしてテストしていました。

フォームが切り替わるたびにフォームをリセットする方法もあります。私が1つの書式に記入してから別の部署に転記し直すと、最初の書式はまだ記入されています。これら2つの問題が関連するかどうかは不明です。

ありがとうございます。

Answer 1

名前付きアンカーを使用しないでJavaScriptをスキップしてください。

例えば、私はあなたが必要とする最低限のコードでCodePenを持っている：http://codepen.io/aardrian/pen/OPgmPe

あなたがアクションでそれを見たい場合は、ここではそれは（あなたは明らかにこれを調整することができ、3つのオプションのそれぞれを示していますリスト以外の要素）を使用します。

• http://s.codepen.io/aardrian/debug/OPgmPe#Expando1
• http://s.codepen.io/aardrian/debug/OPgmPe#Expando2
• http://s.codepen.io/aardrian/debug/OPgmPe#Expando3

これで、基本的に上記のURLである適切な名前付きアンカーを持つURLに、既に3つの<form>要素があるので、各フォームを投稿できます。

JavaScriptはありません。

CSSの全体：

.expando { 
    display: none; 
} 

.expando:target { 
    display: block; 
} 

（内容の）HTML全体：私はそれをテストし、コードがしかし、問題はまだ残ってきれいです

<ul> 
    <li><a href="#Expando1">The Tick</a> 
     <ul class="expando" id="Expando1"> 
     <li>Has superhuman strength and mass;</li> 
     <li>Is nigh-invulnerable; </li> 
     <li>Has powers that increase as the situation becomes more dramatic;</li> 
     <li>Does not seem to require oxygen;</li> 
     <li>Cannot keep his balance if his antennae are removed.</li> 
     </ul>  
    </li> 
    </ul> 

    <ul> 
    <li><a href="#Expando2">Sewer Urchin</a> 
     <ul class="expando" id="Expando2"> 
     <li>Has slime &amp; stench secreting spikes on his suit enable him to stick on any surface;</li> 
     <li>Is equipped with lemon grenades, butter shooters, bars of soap and other various apparel to aid him in his underground endeavors; </li> 
     <li>Has an oxygen tank and mask which enable him to breath in the thickest of sewer sludge;</li> 
     <li>Has a submarine that he garbage-picked.</li> 
     </ul>  
    </li> 
    </ul> 

    <ul> 
    <li><a href="#Expando3">Arthur</a> 
     <ul class="expando" id="Expando3"> 
     <li>Has a suit that enables wobbly flight;</li> 
     <li>Has an accounting background.</li> 
     </ul>  
    </li> 
    </ul>