在HTML中隱藏/顯示錶單會產生異常結果

我一直在嘗試一段時間（一段時間=整天），以找出爲什麼我的表單有這個奇怪的問題。我有一個客戶想要一個獨立的HTML頁面在本地運行，它將顯示一個帶有幾個文本框和一個按鈕的窗體。輸入信息後，用戶單擊該按鈕，第二個窗體應顯示新的文本框。表單不能重定向到其他網站或文件。這一切都必須在該（HTML）文件中。在HTML中隱藏/顯示錶單會產生異常結果

我想到這將是最容易與jQuery做，但加載整個庫只是爲了隱藏一種形式是愚蠢的。所以我看看其他選項並決定使用純Javascript。

問題是，當我第一次單擊「下一個」第一個窗體消失，但接着一秒鐘後，像發送某種請求一樣。貝婁是我目前擁有的代碼。我嘗試製作一個JSFiddle，但每次訪問它時瀏覽器都會阻塞。

的Javascript：

function hideAll() { 
    document.getElementById('first').style.display = 'block'; 
    document.getElementById('second').style.display = 'none'; 
    showFirstForm(); 
} 

function showFirstForm() { 
    if (document.getElementById('second').style.display == 'block') { 
    document.getElementById('first').style.display = 'block'; 
    document.getElementById('second').style.display = 'none'; 
    } 
} 

function showSecondForm() { 
    if (document.getElementById('first').style.display == 'block') 
    { 
    document.getElementById('second').style.display = 'block'; 
    document.getElementById('first').style.display = 'none'; 
    } 
}

HTML：

<body class="if5" onload="hideAll()"> // I'm loading hideAll() on refresh to hide second form 
    .... 
    <!-- FORM 2 --> 
    <form id="first" action="#" class='tx_anmelden' method="post" autocomplete="off" > 

    <filedset> 
    <label for="name"> Your name </label> 
    <input name="name" value="MyName" /></input> 
    <button onClick="showFirstForm()">Next</button> 
    </filedset> 
    </form> 


    <!-- FORM 1 --> 
    <form id="second" class='tx_anmelden'> 

    <fieldset> 
    <label for="name"> Your name </label> 
    <input name="name" value="MyNaffffffme" /></input> 
    <button onClick="showSecondForm()">Next</button> 
    </fieldset> 
    </form> 
    ....

參考：

getElementByID

來源

2013-12-11 sensation

你是說，以顯示在第二形式的第二形式，並顯示在第一個第一種形式。看到問題了嗎？ – epascarello

@epascarello是正確的，你有正確的註釋，但切換窗體中的id。你也有其他一些問題，我在我的答案中放置了一個可用的jsfiddle鏈接。 – RustyToms

除了你有你的表格ID切換的事實，<button>的默認類型爲submit。所以當你的按鈕被點擊時，它會發布表格#。因此，糾正你的表單的id，然後更改您的按鈕代碼類型button：

<button type="button" onClick="showSecondForm()">Next</button>

下面是一些文檔：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

下面是使用更正後的代碼工作的jsfiddle：http://jsfiddle.net/789SP/

來源

2013-12-11 00:21:40 RustyToms

這個技巧。提交按鈕發送請求並且頁面自動重新加載。我修復了這個「bug」。感謝JSFiddle的貢獻，我的代碼很相似。接受答案。 – sensation

第一關，沒有類型屬性或類型屬性爲submit的表單中的任何按鈕默認情況下都會在單擊時提交表單。

其次，它看起來像你正試圖實施某種嚮導。如果這是真的，你不希望每個部分都是它自己的形式，因爲最後你會想要發送所有這些數據到服務器，如果它有兩種形式，這將不起作用。

整個事情需要在一個窗體中顯示/隱藏。對各部分之間導航，你會希望使用

<button type="button" onClick="showSecondForm()">Next</button>

做嚮導始終處於一個痛苦的對接。一旦你開始處理驗證，你需要找出哪一步有錯誤並顯示該部分，或者如果用戶使用後退按鈕，他們可能希望表單返回到第一步。您可能想要搜索提供一些鍋爐板功能的第三方解決方案。 These might help

儘管如此，這應該會讓你有一個好的開始。

編輯

不要從頭開始嘗試此。使用this

來源

2013-12-11 00:21:49

-1

<!-- FORM 2 --> 
<form id="first" action="#" class='tx_anmelden' method="post" autocomplete="off" > 

<fieldset> **fieldset was misspelled as "filedset"** 
<label for="name"> Your name </label> 
<input name="name" value="MyName"></input> **your input had /> at it's end, which is unfortunately wrong** 
<button onClick="showFirstForm()">Next</button> 
</fieldset> **fieldset was misspelled as "filedset"** 
</form> 


<!-- FORM 1 --> 
<form id="second" class='tx_anmelden'> 

<fieldset> 
<label for="name"> Your name </label> 
<input name="name" value="MyNaffffffme"></input> **your input again had /> at it's end, which is unfortunately wrong** 
<button onClick="showSecondForm()">Next</button> 
</fieldset> 
</form>

來源

2013-12-11 00:23:30 EvilBeer

在HTML中隱藏/顯示錶單會產生異常結果

回答

相關問題