2017-07-31 147 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

是的,没有测试,但问题需要再次检查 –