按钮和 POST 方法 - 不允许执行 javascript 方法答案

【问题标题】：Button and POST method - Not allowing execution of javascript method按钮和 POST 方法 - 不允许执行 javascript 方法
【发布时间】：2014-05-19 23:44:18
【问题描述】：

我在使用按钮时遇到了一些问题，我使用的是一个内部有 POST 方法的 DIV，但是，这个按钮不需要 POST 方法，所以：

<div id="lightA" class="white_content" height="300">
    <h1>Adivinar...</h1>
    <h2>Que personaje escoges?:</h2>
    <form type="post">
      <input type="text" list="personajes">
      <datalist id="personajes" style="display:block">
        <?php
        session_start();
        include "config.php";
        if(isset($_SESSION["user_name"]))
        {
          $select = "SELECT nombre_personaje FROM partida WHERE user_name =".$_SESSION["user_name"]."AND personaje_activo = 'T'";
          $query = mysqli_query($con, $select);
          $rows = mysqli_num_rows($query);
          $cont = 0;
          $tableval;
          if($rows > 0)
          {
            while($row = mysqli_fetch_array($query))
            {
              if($row['personaje_activo'] = "T")
              {
                =$tableval."<option value=\"".$row['']."\">";
              }
            }
          }
          else
          {
            ?>
            &nbsp;
            <?
          }
        }
        echo $tableval;
        ?>
      </datalist>
      <button type="submit" action="submit_character.php" name="select" style="display:inline">Elegir!</button>
    </form>
    <button onclick:"javascript:cerrarPop('lightA')">Cancelar</button>
  </div>

现在这是有趣的部分，<button onclick:"javascript:cerrarPop('lightA')">Cancelar</button> 根本没有执行任何操作，我在想，只需将按钮放在帖子中，但是页面会自行刷新并执行我不需要的 <body background="imagen.jpg" onload="javascript:mostrarPop('lightP')"> ，然后我正在寻找如何为该弹出 DIV 设置 cookie，但我对 AJAX 的了解有限。

这也是我的 JS 脚本：

<script type="text/javascript">
  function mostrarPop(name) {
    document.getElementById(name).style.display='block';
    document.getElementById('fade').style.display='block';
  }
  function cerrarPop(name) {
    document.getElementById(name).style.display='none';
    document.getElementById('fade').style.display='none';
  }
</script>

感谢任何帮助，AJAX 会很棒，我正在阅读一些代码，但是有点令人困惑。

提前致谢。

更新

这是完整的代码：

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Guess who? - Lobby</title>

  <style type="text/css">

  .black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.6;
    opacity:.80;
    filter: alpha(opacity=80);
  }
  .white_content {
    text-align: center;
    display: none;
    margin-top: 50px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 35%;
    height: 500px;
    padding: 16px;
    border: 16px solid orange;
    background: rgba(0,0,0,.8);
    z-index:1002;
    overflow: auto;
  }

  input[type="text"]{

    width:173px;

    display:inline;

    margin-left:5px;

  }

  body { width:960px; margin:0 auto;}

  div.chatbox{

    position:fixed;

    display:table;

    border-collapse: collapse;

    width: 250px;

    height: 350px;

    border-radius: 9px;

    padding: 0.5em;

    background: rgba(0,0,0,.5);

    margin-top:25px;

    margin-bottom:100px;

    margin-right:50px;

    margin-left:705px;

  }

  div.gamebox{

    position:fixed;

    background: rgba(0,0,0,.5);

    width: 630px;

    height: 560px;

    border-radius: 9px;

    padding: 0.5em;

    margin-top:25px;

    margin-bottom:100px;

    margin-right:50px;

    margin-left:25px;

  }
  div.optionbox{

    position:fixed;

    border-collapse: collapse;

    width: 235px;

    height: 190px;

    border-radius: 9px;

    padding: 0.5em;

    background: rgba(0,0,0,.5);

    margin-top:395px;

    margin-bottom:100px;

    margin-right:50px;

    margin-left:705px;

  }

  h1 {
    margin-top: 10px;

    font-family: "Times New Roman", Times, serif;

    font-weight: bold;

    text-align: center;

    font-size: 30px;

    color: #F00;

    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;

  }
  h2 {
    display: inline; 

    margin-top: 10px;

    font-family: "Times New Roman", Times, serif;

    font-weight: bold;

    text-align: left;

    font-size: 25px;

    color: #FFF;

  }
  iframe {
    background-color: #FFF;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
  }
  input[type="submit"]{
    background-color: #FFF;
    margin-top: 1px;
    margin-left: 5px;
    margin-right: 5px;
  }
  </style>

  <script type="text/javascript">
  mostrarPop = function(name) {
    document.getElementById(name).style.display='block';
    document.getElementById('fade').style.display='block';
  }
  cerrarPop = function(name) {
    document.getElementById(name).style.display='none';
    document.getElementById('fade').style.display='none';
  }
  </script>

</head>
<body background="imagen.jpg" onload="mostrarPop('lightP')">
  <div id="lightP" class="white_content">
    <h1>Tu personaje secreto es:</h1>
    <?php
    session_start();
    include "config.php";
    if(isset($_SESSION["user_name"]))
    {
      $selectcategoria = "SELECT DISTINCT id_partida, id_categoria FROM partida WHERE user_name =".$_SESSION["user_name"];
      $querycategoria = mysqli_query($con, $selectcategoria);
      $rowcategoria = mysqli_fetch_array($querycategoria);
      $personajenum = rand(0,23);
      $selectpersonaje = "SELECT nombre_personaje, foto_personaje FROM Categoria WHERE id_personaje =".$personajenum;
      $querypersonaje = mysqli_query($selectpersonaje);
      $rowpersonaje = mysqli_fetch_array($querypersonaje);
      $selectturno = "SELECT user_name_retador, user_name_oponente FROM  WHERE user_name =".$_SESSION["user_name"];
      $queryturno = mysqli_query($con, $selectcategoria);
      $rowturno = mysqli_fetch_array($query);

      if($_SESSION["user_name"]=$rowturno["user_name_oponente"]){
        $insertestado = "INSERT INTO estadojugador(id_partida, user_name, turno_activo, personaje_secreto) VALUES(".$row['id_partida'].", ".$_SESSION["user_name"].", "."false".", ".$rowpersonaje["nombre_personaje"].")";
        $queryestado  = mysqli_query($insertestado);
      }
      else
      {
        $insertestado = "INSERT INTO estadojugador(id_partida, user_name, turno_activo, personaje_secreto) VALUES(".$row['id_partida'].", ".$_SESSION["user_name"].", "."true".", ".$rowpersonaje["nombre_personaje"].")";
        $queryestado  = mysqli_query($insertestado);
      }
      echo "<img src=\"categorias/".$rowpersonaje["foto_personaje"]."\" width=\"240\" height=\"360\" style=\"display:block; margin: 0 auto;></img>";        
    }

    ?>
    <button onclick="cerrarPop('lightP')" style="margin-top:10px; margin: 0 auto;">Continuar!</button>
  </div>
  <div id="lightA" class="white_content" height="300">
    <h1>Adivinar...</h1>
    <h2>Que personaje escoges?:</h2>
    <form type="post">
      <input type="text" list="personajes">
      <datalist id="personajes" style="display:block">
        <?php
        session_start();
        include "config.php";
        if(isset($_SESSION["user_name"]))
        {
          $select = "SELECT nombre_personaje FROM partida WHERE user_name =".$_SESSION["user_name"]."AND personaje_activo = 'T'";
          $query = mysqli_query($con, $select);
          $rows = mysqli_num_rows($query);
          $cont = 0;
          $tableval;
          if($rows > 0)
          {
            while($row = mysqli_fetch_array($query))
            {
              if($row['personaje_activo'] = "T")
              {
                =$tableval."<option value=\"".$row['']."\">";
              }
            }
          }
          else
          {
            ?>
            &nbsp;
            <?
          }
        }
        echo $tableval;
        ?>
      </datalist>
      <button type="submit" action="submit_character.php" name="select" style="display:inline">Elegir!</button>
    </form>
    <button onclick:"cerrarPop('lightA')">Cancelar</button>
  </div>
  <div id="fade" class="black_overlay"></div>
  <div class="chatbox">
    <table width="240" height="250">
      <form method="post" action="handler_partidas.php">
        <tr>
          <td><iframe src="messages_partidas.php" name="iframe" width="230" height="305"></iframe></td>
        </tr>
        <tr>
          <td><input type="text" name="message"> <button type="submit" name="send">Enviar</button>
          </tr>
        </form>
      </table>
    </div>
    <div class="gamebox">
      <table width="240" height="250">
        <form method="post" action="fill_table.php"> 
        </form> 
      </table>  
    </div>
    <div class="optionbox">
      <h1>Opciones</h1>
      <button onclick="">Rendirse</button>
      <button onclick="javascript:mostrarPop('lightA')">Adivinar...</button></br>
      <button type="submit" name="yes">Si</button>
      <button type="submit" name="no">No</button>
    </div>
  </body>
  </html>

【问题讨论】：

试试这个onclick="cerrarPop('lightA');"

标签： javascript html ajax

【解决方案1】：

您的代码有 2 个问题，第一个是按钮 onclick 事件。应该是这样的；

<button onclick="cerrarPop('lightA')">Cancelar</button>

第二个问题是函数定义。也可以这样;

cerrarPop = function (name) {
    document.getElementById(name).style.display='none';
    document.getElementById('fade').style.display='none';
  }

jsfiddle link

【讨论】：

谢谢，我在我的服务器中实现了您的解决方案，但一点运气都没有。更改了两个方法定义，至于 javascript:，它在我正在使用的其他 pop DIV 中并没有打扰，但是，我已经删除了它们。
@Nevinyrral 抱歉，我没有清楚地理解您的问题。什么是问题？点击continuar按钮时你想做什么？
问题是我正在从第一个答案stackoverflow.com/questions/19064987/… 实现这个 JS 脚本，但是按钮 Continuar 是关闭弹出 DIV 的按钮，在表单标签之外，按钮是'未被检测到。
我认为不要花时间去实现它。有一些与此相关的好库。 jqueryui.com/dialog/#modal-confirmation 是其中之一，也是弹出框和对话框的好选择。可以在jqueryui.com/themeroller自定义，也可以在jqueryui.com/download使用任意jquery-ui的主题。
有意思，这个弹窗可以用CSS吗？编辑：愚蠢的问题，我会看看谢谢你的帮助。