Button和POST方法 - 不允许执行javascript方法

时间：2014-05-19 23:44:18

标签： javascript html ajax

我在使用按钮时出现问题，我使用的是内置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>

1 个答案:

答案 0 :(得分：0)

您的代码有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

相关问题
最新问题