使用javascript隱藏/顯示HTML表單（在按鈕上按下）

我的名字是Michael Toscano。我目前正在爲學校開展一個3層的項目，但是我被困在了一個看似微不足道的步驟上。現在，我試圖通過單擊一個按鈕來隱藏各個HTML表單，並通過單擊另一個按鈕來顯示它們。 HTML頁面上只有兩種形式。如果我嘗試隱藏第二個表單，現在我的工作方式是，但是如果我嘗試僅隱藏第一個表單，它會隱藏整個頁面，除了頁面頂部的兩個按鈕（兩個表單）之外。我想，也許我意外地把第二種形式放在第一種形式（如果可能的話），但在查看我的代碼後，它看起來（至少對我來說）就像我終止了第一種形式。總之，整個HTML文件如下：使用javascript隱藏/顯示HTML表單（在按鈕上按下）

<!DOCTYPE html> 
    <html><head> 

    <button type=button id=f1 onclick="func(1)">Order Form</button> 
    <button type=button id=f2 onclick="func(2)">Retrieval Form</button> 

    <script type="text/javascript"> 
    function func(a) { 
     if(a==1) { 
      document.getElementById("order").style.display="none"; 
     } 
     if(a==2) { 
      document.getElementById("order").style.display="block"; 
     } 
    } 
    </script> 

    <script type="text/javascript"> 
     function showValue(newValue) 
     { 
      document.getElementById("range").innerHTML=newValue; 
     } 
    </script> 
    </head> 

    <body> 
<form id=order action=form.php > 

    <p><center>Name: <input type=text 
     name="name" 
     placeholder="Enter Your Name" 
     required 
     autocomplete="on"></center><br> 

    <center>Email: <input type=text 
     name="email" 
     placeholder="Enter Your Email" 
     required 
     autocomplete="off"></center><br> 

    <center>Password: <input type=text 
     name="password" 
     placeholder="15 Characters Or Less" 
     required 
     autocomplete="off"></center><br> 

    <center>Address: <input type=text 
     name="address" 
     placeholder="Enter Your Address" 
     required 
     autocomplete="off"></center><br> 

    <center>Laptops: <input type=range 
     name=laptop 
     value=0 
     min=0 
     max=10 
     onChange="showValue(this.value)"> 

    <center>Monitors: <input type=range 
     name=monitor 
     value=0 
     min=0 
     max=10 
     onChange="showValue(this.value)"> 

    <center>Mouses: <input type=range 
      name=mouse 
     value=0 
     min=0 
     max=10 
     onChange="showValue(this.value)"> 

    <center>Keyboards: <input type=range 
     name=keyboard 
     value=0 
     min=0 
     max=10 
     onChange="showValue(this.value)"> 

    <br> 
    <br> 

    <center>Shipping Carrier: <SELECT name="delivery"> 
     <option value="fedex">FEDEX</option> 
     <option value="ups">UPS</option> 
    </SELECT></center> 

    <br> 

    <center>Would you like an email receipt?<br> 
    <center>Yes <input type="radio" name="group1" value=1> No 
    <input type="radio" name="group1" value=0 checked></center><br> 

    <br> 

    <center><input type=submit value="Submit Order"></center></p> 

    </form> 

    <form id=retrieve action=form2.php> 

    First Name: <input type=text name=first><br> 
    Last Name: <input type=text name=last><br> 
    Password: <input type=password name=p1><br> 
    Retype Password: <input type=password name=p2><br> 
    <input type=submit> 

    </form> 
</body> 
</html>

我想指出的是，我是相當新的HTML和JavaScript，所以我將不勝感激，如果一個簡要的解釋可以陪任何人的響應。謝謝大家。

來源

2013-04-05 Mike

有幾個問題：

你並不需要爲每個JavaScript函數的單獨的腳本標記。只需將所有Javascript放在一個腳本標記中。
我強烈建議使用CSS中心元素而不是<center>標記。您有許多未封閉的<center>標籤可以啓動。就我個人而言，我認爲左對齊比中心看起來好得多。
如果您的HTML是一個完整的文檔，您需要標籤<head>和<body>。使用W3C Markup Validation Service確保您擁有有效的HTML代碼。
HTML中的屬性值應該用引號引起來，例如<form id=order>應該是<form id="order">。甚至有可能required需要是required="required"。
認爲最佳做法是使用javascript「連線」javascript事件，而不是放入內聯事件處理程序。例如：
```
document.getElementById('f1').onclick = function() { 
    func(1); 
}; 
```
我認爲它實際上是更好地把具有形式的ID顯示/隱藏，然後在onclick事件（現在只需要一個單一版本上的按鈕的數據屬性沒有if語句的函數），您只需拉取expando數據值即可。例如<button data-for="order">。
在您的顯示/隱藏代碼中，您只能使用一種形式。在哪裏提到對方？此外，要獲得您正在尋找的切換效果，您需要檢測表單是否已隱藏，並適當更改其顯示樣式。
您應該研究==和===之間的Javascript差異。
您的HTML元素之間不需要太多的垂直空間。我全部都是爲了排長隊，而不是大多數，但是當標記如此分散時，很難掃描。你可以把<br>放在行尾。
許多Javascript程序員更喜歡在上一行的末尾放置開啓的花括號。這是一個小問題，但它有助於節省空間。你會看到，在我的代碼示例中，我遵循了這個約定。這個選擇由你。
您的<select>標籤應該是小寫字母。
「15個字符或更少」是不正確的語法。它應該是「15個字符或更少」或者是「15個或更少的字符」，甚至更好，「最多15個字符」

請參閱this JS Fiddle我的版本正在開發一種清理的HTML文檔。

來源

2013-04-05 18:24:55 ErikE

謝謝你的迴應。你所說的一切（合併）已經幫助我解決了我的問題。你有沒有可能解釋爲什麼「連線」javascript事件？ – Mike 2013-04-05 18:29:49

在那裏，我爲你提供了更多細節。 – ErikE 2013-04-05 18:59:05

非常感謝，非常感謝:) – Mike 2013-04-12 16:35:37

有很多的你的代碼的問題：

您有更多<center>標籤開放比封閉
你沒有<head>也不<body>標籤。
如果你想func()隱藏顯示一個形式，而是隱藏其他，你應該在每個案件的Javascript代碼兩行，例如：document.getElementById("order").style.display="none"; document.getElementById("retrieve").style.display="block";
你也應該找到一種方法，默認隱藏的第二種形式。

來源

2013-04-05 18:23:24

哦，親愛的，我想我有一些編輯工作要做，然後，哈哈。至於和標籤去，我修改他們的編輯，但謝謝你指出。讓我試着清理我的代碼，然後回覆。 – Mike 2013-04-05 18:26:12

你應該爲自己編寫一個能夠警告你語法錯誤的編輯器。看看@ErikE的回答，他也提到了需要補充的東西來解決。 – 2013-04-05 18:28:27

首先你有你的按鈕移動到文檔正文

之後，你可以讓你的功能，更好一點。

//names of functions as well as attributes should describe them 
function show(elementId) { 
    //now we kick out both conditional we do not need them anymore 

    //we hide both forms 
    document.getElementById("order").style.display="none"; 
    document.getElementById("retrieve").style.display="none"; 

    //and then we simply show wanted one isn't that nicer and cleaner? 
    document.getElementById(elementId).style.display="block"; 
}

，現在當我們有我們的功能，我們可以將它放在我們的按鈕

<button type="button" onclick="show('order');">Order Form</button> 
<button type="button" onclick="show('retrieve');">Retrieval Form</button>

，你可以看到我們踢他們的標識，因爲它們是不必要的，我們把屬性爲引號。這必須去身體的元素，而不是頭！

而不是形式的這種風格的塊：

<p><center>Name: <input type=text 
name="name" 
placeholder="Enter Your Name" 
required 
autocomplete="on"></center><br>

你可以做更好的方式是這樣的：

<p style="text-align:center"><input type="text" 
    name="name" 
    placeholder="Enter Your Name" 
    required="required" 
    autocomplete="on" /> 
</p>

（是的，每一行是一個新的段落讓你不需要使用BR標籤）

來源

2013-04-05 19:11:03 Antharon

哇，非常感謝。我現在對每個人的回覆都非常興奮，迫不及待地想出去做一些更好更高效的事情。 – Mike 2013-04-05 19:39:59

我不得不拒絕內聯風格... – ErikE 2013-04-07 09:22:24

使用javascript隱藏/顯示HTML表單（在按鈕上按下）

回答

相關問題