PHP文件中输入错误

时间：2017-07-31 14:35:42

标签： javascript 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 nome”按钮时，表单不会隐藏。 为什么第一个按钮有效，第二个按钮没有？

5 个答案:

答案 0 :(得分：1)

代码存在一些问题：

1）2个不同元素的相同ID（＆＃39; mybutton＆＃39;）。

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并知道应该隐藏哪个元素或者你是什么喜欢做。

答案 1 :(得分：0)

button元素的默认行为是提交它们所在的表单。

要防止出现这种情况，您可以添加type =＆＃34;按钮＆＃34;属性到你的按钮。这样你的javascript代码就会被执行。

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

答案 2 :(得分：0)

  1. 请勿使用多个具有相同值的ID
    2.   

    https://www.w3.org/TR/html5/dom.html#the-id-attribute id属性   指定其元素的唯一标识符（ID）。值必须是   在元素的主要子树中的所有ID中唯一且必须   包含至少一个字符。该值不得包含任何空格   字符。

    改用class。

    1. 检查您的IDE，似乎它在“=”之前和之后添加空格不足。我打赌NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT sda 8:0 0 12G 0 disk ├─sda1 8:1 0 10G 0 part / ├─sda2 8:2 0 1K 0 part └─sda5 8:5 0 2G 0 part [SWAP] sdb 8:16 1 96M 0 disk /media/alexander/boot sdc 8:32 1 7,5G 0 disk └─sdc1 8:33 1 7,5G 0 part /media/alexander/WATTO sr0 11:0 1 56,8M 0 rom /media/alexander/VBOXADDITIONS_5.1.24_1170123
      2. 中不应该有任何空格

      <强>答案：

      您没有关闭第一个"DatabaseManagerMySQL.php?operation_type = insert"标记，这就是为什么该形式的第一个按钮（“Aggiorna nome”一个）就像sumbit按钮（默认情况下的行为）并提交到<form> < / p>

答案 3 :(得分：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

＆＃13;
＆＃13; 
function button(form_div) {
        var x = document.getElementById(form_div);
        if (x.style.display === 'none') {
            x.style.display = 'block';
        } else {
            x.style.display = 'none';
        }
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：-1)

快速解决方案是简单地创建一个单独的javascript函数，确保Div ID不同。以下代码类似于发布的代码，但（i）包含新的javascript函数和（2）新的Div ID。

此代码可以使用两个按钮来隐藏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>
相关问题
最新问题