2017-07-31 144 views
0

我想隱藏基於按鈕單擊的窗體。下面是我的代碼:在PHP文件中輸入錯誤

<html> 
 

 
<head> 
 
    <title>Programma per connettersi a un database tramite il linguaggio PHP 
 
    </title> 
 
    <style> 
 
    #mybutton { 
 
     width: 100%; 
 
     padding: 50px 0; 
 
     text-align: center; 
 
     background-color: orange; 
 
     margin-top: 20px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <button onclick="button()">Inserisci studente</button> 
 

 
    <div id="mybutton"> 
 
    <div> 
 
     <input type="hidden" name="action" value="submit"> Nome Studente:<br> 
 
     <input name="Nome" type="text" value="" placeholder="Inserisci il 
 
     nome dello studente" size="30" /><br> Cognome Studente:<br> 
 
     <input name="Cognome" type="text" value="" placeholder="Inserisci 
 
     il cognome dello studente" size="30" /><br> Eta Studente:<br> 
 
     <input name="Eta" type="integer" value="" placeholder="Inserisci 
 
     l'età dello studente" size="30" /><br> 
 
     <input type="submit" name="insert" value="Inserisci" /> 
 
    </div> 
 
    </div> 
 
    <br><br><br> 
 

 
    <button onclick="button()">Aggiorna nome</button> 
 

 
    <div id="mybutton"> 
 
    Inserisci il nome dello studente da modificare nello spazio sottostante 
 
    <br> 
 
    <div> 
 
     <input type="hidden" name="action" value="submit"> Nuovo Nome:<br> 
 
     <input name="NewName" type="text" value="" placeholder="Inserisci il 
 
    nuovo nome" size="30" /><br> Vecchio Nome:<br> 
 
     <input name="OldName" type="text" value="" placeholder="Inserisci il 
 
    nome attuale" size="30" /><br> 
 
     <input type="submit" name="insert" value="Aggiornare" /> 
 
    </div> 
 
    </div> 
 

 
    <script> 
 
    function button() { 
 
     var x = document.getElementById('mybutton'); 
 
     if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
     } else { 
 
     x.style.display = 'none'; 
 
     } 
 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

當點擊第一個按鈕,一切正常,但是在第二種情況下,當我按下按鈕「Aggiorna諾姆」,形式不隱藏。 爲什麼第一個按鈕工作,第二個按鈕不工作?

+3

不能有多個具有相同ID的元素。 ID對於整個文檔必須是唯一的。如果_do_具有多個具有相同ID的元素,它將始終使用第一個元素。 –

+0

您還需要關閉表單。你打開兩個,但你沒有關閉任何。 –

+0

@SvenTheSurfer - 當你建議編輯時,不要改變原始代碼_。例如,您的編輯完全刪除了表單元素。 –

回答

1

有與代碼的幾個問題:2個不同的元素( '爲myButton')

1)相同的ID。

2)表單標籤沒有正確關閉,所以按鈕提交表單。

在這裏,我搞掂你的代碼,所以它的工作原理:

<html> 
<head> 
    <title>Programma per connettersi a un database tramite il linguaggio 
     PHP</title> 
    <style> 
     .mybutton { 
      width: 100%; 
      padding: 50px 0; 
      text-align: center; 
      background-color: orange; 
      margin-top:20px; 
     } 
    </style> 
</head> 
<body> 

    <button data-id="first-div" onclick="button(this)">Inserisci studente</button> 

    <div id= "first-div" class="mybutton"> 
     <form action = "DatabaseManagerMySQL.php?operation_type = insert" method 
       = "POST" enctype = "multipart/form-data"> 
      <input type ="hidden" name = "action" value = "submit"> 
      Nome Studente:<br> 
      <input name = "Nome" type = "text" value = "" placeholder="Inserisci il 
        nome dello studente" size = "30"/><br> 
      Cognome Studente:<br> 
      <input name = "Cognome" type = "text" value = "" placeholder="Inserisci 
        il cognome dello studente" size = "30"/><br> 
      Eta Studente:<br> 
      <input name = "Eta" type = "integer" value = "" placeholder="Inserisci 
        l'età dello studente" size = "30"/><br> 
      <input type= "submit" name = "insert" value = "Inserisci"/> 
     </form> 
    </div> 
    <br><br><br> 

    <button data-id="second-div" onclick = "button(this)">Aggiorna nome</button> 

    <div id = "second-div" class="mybutton"> 
     Inserisci il nome dello studente da modificare nello spazio sottostante 
     <br> 
     <form action = "DatabaseManagerMySQL.php?operation_type = update" method = 
       "POST" enctype = "multipart/form-data"> 
      <input type ="hidden" name = "action" value = "submit"> 
      Nuovo Nome:<br> 
      <input name = "NewName" type = "text" value = "" placeholder="Inserisci il 
        nuovo nome" size = "30"/><br> 
      Vecchio Nome:<br> 
      <input name = "OldName" type = "text" value = "" placeholder="Inserisci il 
        nome attuale" size = "30"/><br> 
      <input type= "submit" name = "insert" value = "Aggiornare"/> 
     </form> 
    </div> 

    <script> 
     function button(obj) { 
      var divId = obj.getAttribute("data-id"); 
      var x = document.getElementById(divId); 
      if (x.style.display === 'none') { 
       x.style.display = 'block'; 
      } else { 
       x.style.display = 'none'; 
      } 
     } 
    </script> 

</body> 

我做什麼是使用一類,而不是爲你的元素的ID,並添加data-id到該按鈕,使JS函數接收元素的id並知道應該隱藏什麼元素或者你喜歡做什麼。

+0

現在感謝代碼工作 – neoblade11

0

button元素的默認行爲是提交它們被放置在。

爲了防止這種行爲的形式,可以在類型=「按鈕」屬性添加到您的按鈕。這樣你的JavaScript代碼將被執行。

<button type="button" onclick="button()">Aggiorna nome</button> 
-1

快速解決方案是簡單地創建一個單獨的JavaScript函數,確保DivID不同。下面的代碼類似於發佈的代碼,但是(i)包含新的JavaScript功能和(2)新的DivID。

此代碼可以讓兩個按鈕隱藏div。

<html> 
<head> 
<title>Programma per connettersi a un database tramite il linguaggio 
PHP</title> 
    <style> 
    .mybutton { 
    width: 100%; 
    padding: 50px 0; 
    text-align: center; 
    background-color: orange; 
    margin-top:20px; 
    } 
    </style> 
    </head> 
    <body> 

    <button onclick="button()">Inserisci studente</button> 

    <div id= "mybutton" class="mybutton"> 
    <form action = "DatabaseManagerMySQL.php?operation_type = insert" method 
    = "POST" enctype = "multipart/form-data"> 
    <input type ="hidden" name = "action" value = "submit"> 
    Nome Studente:<br> 
    <input name = "Nome" type = "text" value = "" placeholder="Inserisci il 
    nome dello studente" size = "30"/><br> 
    Cognome Studente:<br> 
    <input name = "Cognome" type = "text" value = "" placeholder="Inserisci 
    il cognome dello studente" size = "30"/><br> 
    Eta Studente:<br> 
    <input name = "Eta" type = "integer" value = "" placeholder="Inserisci 
    l'et? dello studente" size = "30"/><br> 
    <input type= "submit" name = "insert" value = "Inserisci"/> 
</div> 
<br><br><br> 

<button onclick="button2();">Aggiorna nome</button> 

<div id = "mybutton2" class="mybutton"> 
Inserisci il nome dello studente da modificare nello spazio sottostante 
<br> 
<form action = "DatabaseManagerMySQL.php?operation_type = update" method = 
"POST" enctype = "multipart/form-data"> 
<input type ="hidden" name = "action" value = "submit"> 
Nuovo Nome:<br> 
<input name = "NewName" type = "text" value = "" placeholder="Inserisci il 
nuovo nome" size = "30"/><br> 
Vecchio Nome:<br> 
<input name = "OldName" type = "text" value = "" placeholder="Inserisci il 
nome attuale" size = "30"/><br> 
<input type= "submit" name = "insert" value = "Aggiornare"/> 
</div> 

<script> 
    function button() { 
    var x = document.getElementById('mybutton'); 
    if (x.style.display === 'none') { 
     x.style.display = 'block'; 
    }else{ 
     x.style.display = 'none'; 
     } 
    } 

    function button2() { 
    var x = document.getElementById('mybutton2'); 
    if (x.style.display === 'none') { 
     x.style.display = 'block'; 
    }else{ 
     x.style.display = 'none'; 
     } 
    } 

    </script> 

</body> 
</html> 
+1

您可能想要包含有關您已更改內容和原因的說明。否則,它是「Where's Waldo」的代碼版本。 –

+0

該答案沒有解決問題 – iXCray

0
  1. 不要使用許多的ID與相同的值

https://www.w3.org/TR/html5/dom.html#the-id-attribute id屬性 指定其元素的唯一標識符(ID)。該值必須是 在元素的主子樹中的所有ID中唯一,且必須包含至少一個字符 。該值不得包含任何空格 個字符。

改爲使用class。

  1. 檢查你的IDE,它似乎在「=」之前和之後添加空格不充分。我敢打賭,不應該有任何空格"DatabaseManagerMySQL.php?operation_type = insert"

答:

你沒有關閉第一<form>標籤,這就是爲什麼第一個按鈕,在形式(以下簡稱「Aggiorna諾姆」一節)就像透過按鈕(默認行爲),並提交給"DatabaseManagerMySQL.php?operation_type = insert"

+1

只是一個說明,OP不關閉第二種形式。 –

+0

是的,他會在第二個問題開一會兒然後 – iXCray

0

在代碼中有一些問題

1. you missing </form> // close form tag in both form 
2. you use same id in main content div so it will not work 
3. you use same id in your javascript function so next form will not work 

因此需要固定

so fixed close tag, use 2 id and send this id in onclick button function id name so one function will fixed issue 

function button(form_div) { 
 
     var x = document.getElementById(form_div); 
 
     if (x.style.display === 'none') { 
 
      x.style.display = 'block'; 
 
     } else { 
 
      x.style.display = 'none'; 
 
     } 
 
    }
<html> 
 
<head> 
 
    <title>Programma per connettersi a un database tramite il linguaggio 
 
     PHP</title> 
 
    <style> 
 
     #mybutton { 
 
      width: 100%; 
 
      padding: 50px 0; 
 
      text-align: center; 
 
      background-color: orange; 
 
      margin-top: 20px; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 

 
<button onclick="button('mybutton1')" type="button">Inserisci studente</button> 
 

 
<div id="mybutton1"> 
 
    <form action="DatabaseManagerMySQL.php?operation_type = insert" method 
 
    ="POST" enctype="multipart/form-data"> 
 
     <input type="hidden" name="action" value="submit"> 
 
     Nome Studente:<br> 
 
     <input name="Nome" type="text" value="" placeholder="Inserisci il 
 
    nome dello studente" size="30"/><br> 
 
     Cognome Studente:<br> 
 
     <input name="Cognome" type="text" value="" placeholder="Inserisci 
 
    il cognome dello studente" size="30"/><br> 
 
     Eta Studente:<br> 
 
     <input name="Eta" type="integer" value="" placeholder="Inserisci 
 
    l'età dello studente" size="30"/><br> 
 
     <input type="submit" name="insert" value="Inserisci"/> 
 
</form>  
 
</div> 
 

 
<br><br><br> 
 

 
<button onclick="button('mybutton2')" type="button">Aggiorna nome</button> 
 

 
<div id="mybutton2"> 
 
    Inserisci il nome dello studente da modificare nello spazio sottostante 
 
    <br> 
 

 
    <form action="DatabaseManagerMySQL.php?operation_type = update" method= 
 
    "POST" enctype="multipart/form-data"> 
 
     <input type="hidden" name="action" value="submit"> 
 
     Nuovo Nome:<br> 
 
     <input name="NewName" type="text" value="" placeholder="Inserisci il 
 
nuovo nome" size="30"/><br> 
 
     Vecchio Nome:<br> 
 
     <input name="OldName" type="text" value="" placeholder="Inserisci il 
 
nome attuale" size="30"/><br> 
 
     <input type="submit" name="insert" value="Aggiornare"/> 
 
</form> 
 
</div> 
 

 

 

 
</body> 
 
</html>

+0

不行,這段代碼還是提交表單。你甚至沒有測試它,對吧? – iXCray

+1

在按鈕上添加'type =「button」'。 –

+0

是的,沒有測試,但問題需要再次檢查 –