jQuery - show () hide ()

Question

jQuery - show () hide ()

Navigation

#1 by (3 votes)

0

I have a button called "new" ...

<input type="submit" style="width:200px; height:28px;" name="nueva" id="nueva" value="Añadir">

I want to select or click, open a form / div to fill in some data.

<form action="<?php echo $_SERVER['PHP_SELF'];?>" name="anadir" id="anadir" method="POST">
        <label for="nombre">Nombre: </label><input type="text" id="nombre" name="nombre"/></label><br/><br/>
        <label for="capacidad">Capacidad: </label>
        <?php
        echo "<select name='capacidad'>";
        for($i=1; $i<11; $i++){
            if($i==1){
                echo "<option value='$i' selected='selected'>$i</option>";
            }else{
                echo "<option value='$i'>$i</option>";
            }
        }
        echo "</select>";
        ?><br/><br/>
        <label for="descripcion">Descripción: </label><input type="text" id="descripcion" name="descripcion"/></label><br/><br/>
        <label for="precio">Precio: </label><input type="text" id="precio" name="precio"/></label><br/><br/>

        <input type="submit" value="Guardar" id="guardar" name="guardar"/>
        <input type="reset" value="Resetear" id="resetear" name="resetear"/>
    </form>

Doubts:

1) Why does it open but close to the second one? Without giving option to fill in data.

2) How would you rate if all the fields are filled out, and click "Save", close the form?

JQuery code:

$(document).ready(function(){
    $('#anadir').hide();
    $("#nueva_cabana").on("click", function() {
        $('#anadir').show();
    });
});

javascript jquery html

asked by omaza1990 29.11.2017 в 12:17

source

1 answer

Timeouts vs ExpireTimeSpan UseCookieAuthentication how to interpret a string as a php variable

score 3 · Accepted Answer

The button is a submit therefore it does postback when you click it and it refreshes the view. Put a normal one.

Here are a few more details:

You have many bad closing labels on the labels.

You have bad identification of the button in jquery.

I recommend using toggle , so it will show and hide.

$(document).ready(function() {
  $('#anadir').hide();
  $("#nueva").on("click", function() {
    $('#anadir').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" style="width:200px; height:28px;" name="nueva" id="nueva" value="Añadir">
<form action="<?php echo $_SERVER['PHP_SELF'];?>" name="anadir" id="anadir" method="POST">
  <label for="nombre">Nombre: </label>
  <input type="text" id="nombre" name="nombre" />
  <br/><br/>
  <label for="capacidad">Capacidad: </label>
  <?php
  echo "<select name='capacidad'>";
  for($i=1; $i<11; $i++){
      if($i==1){
          echo "<option value='$i' selected='selected'>$i</option>";
      }else{
          echo "<option value='$i'>$i</option>";
      }
  }
  echo "</select>";
  ?>
    <br/><br/>
    <label for="descripcion">Descripción: </label>
    <input type="text" id="descripcion" name="descripcion" />
    <br/><br/>
    <label for="precio">Precio: </label>
    <input type="text" id="precio" name="precio" />
    <br/><br/>
    <input type="submit" value="Guardar" id="guardar" name="guardar" />
    <input type="reset" value="Resetear" id="resetear" name="resetear" />
</form>