Button and POST method - Not allowing execution of javascript method

Question

I'm having a some trouble with a button, I'm using a DIV that has a POST method inside of it, however, this button in question doesn't need the POST method, so:

<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>

Now this is the funny part, <button onclick:"javascript:cerrarPop('lightA')">Cancelar</button> isn't executing anything at all, I was thinking, well just put the button inside the post, however the page refresh itself and executes <body background="imagen.jpg" onload="javascript:mostrarPop('lightP')"> which I don't need, then I was looking how to set a cookie for that pop DIV, but I have a limited knowledge in AJAX.

Here's also my JS script:

<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>

Any help is appreciated, AJAX would be awesome, I'm reading some code right however is a bit confusing.

Thanks in advance.

Update

Here's the entire code:

<!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>

try this `onclick="cerrarPop('lightA');"` – Jacob May 19 '14 at 23:49 — Jacob, May 19 '14 at 23:49

score 0 · Answer 1 · answered May 19 '14 at 23:51

0

There is 2 problem on your code first one is button onclick event. It should be like;

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

Second problem is function defination. It is also be like;

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

jsfiddle link

answered May 19 '14 at 23:51

umut

1,016
1
12
25

Thanks, I implemented your solution inside my server, no luck at all. Changed the two method definitions, as for the javascript:, it didn't bother in the other pop DIVs I'm using, however, I've erased them. – Nevinyrral May 20 '14 at 00:06
@Nevinyrral Sorry I didn't understand your problem clearly. What is problem ? What do you want do when click continuar button? – umut May 20 '14 at 00:17
The thing is that I'm implementing this JS Script from the first answer, http://stackoverflow.com/questions/19064987/html-css-popup-div-on-text-click, however the button Continuar is the button that closes the pop DIV, been outside the form tag, the button isn't been detected. – Nevinyrral May 20 '14 at 00:24
I think dont spend time for implementing it. There are some good libraries related to this. http://jqueryui.com/dialog/#modal-confirmation is one of them and a good one for popup and dilaog box. You can customize it in http://jqueryui.com/themeroller/ or you can use any theme of jquery-ui in http://jqueryui.com/download/. – umut May 20 '14 at 00:32
Interesting, does this pop-ups can use CSS? Edit: silly question, I'll take a look thank you for your help. – Nevinyrral May 20 '14 at 00:44
Not only css but also javascript. I think you can look jquery jquery-ui for implementing client-side javascript code. They are stable and easy-to-use tools for web development. – umut May 20 '14 at 00:49

Button and POST method - Not allowing execution of javascript method

1 Answers1