Use show and Hide with bootstrap

Asked

Viewed 42 times

-1

I want to display a sequence of Forms with the jquery show and Hide on a site stylized with bootstrap the code used was that and n appear to have errors, because it works for half a second and back to q tava

 $("#button-gender").click(function() {
    $("#boy-or-girl").hide();
    $("#food").show();
})

The code refers to that page:

    <html>
        <head>
            
            <meta charset="UTF-8">
            <link rel="s

tylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <link rel="stylesheet" href="styles/main.css">
        <link rel="stylesheet" href="styles/quiz.css">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;531;600;700;800;900&display=swap" rel="stylesheet">
       
    </head>

    <body>
        

        
        <div class="container first-content" id="boy-or-girl">
            <form action="">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="boy" id="boy" value="M">
                    <label class="form-check-label" for="boy">Menino</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="girl" id="girl" value="F">
                    <label class="form-check-label" for="girl">Menina</label>
                </div>
                <div class="form-group row">
                    <div class="col-sm-10">
                      <button type="submit" class="btn btn-primary" id="button-gender">Próximo</button>
                    </div>
                  </div>
            </form>
        </div>
        <div class="container" id="food" style="display: none;">
            <div class="jumbotron jumbotron-fluid mt-3 rounded-pill">
                <div class="container">
                <h1 class="display-4">Escolha sua comida</h1>
                <p class="lead"></p>
                </div>
            </div>
            <form class="mb-2" method="POST" action="registra.php">
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" value="" name="biscoito" id="defaultCheck1">
                    <label class="form-check-label" for="defaultCheck1">
                        Biscoitos
                    </label>
                </div>
                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" value="" name="" id="defaultCheck1">
                    <label class="form-check-label" for="defaultCheck1">
                        Salgadinhos
                    </label>
                </div>
            </form>
        </div>
        



        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        <script src="quiz.js"></script>
    </body>
</html>

I would like to know why the div q dei . Hide() comes back immediately and how to make it stop, if you see this happening help< I recorded in this drive.

jquery css bootstrap-4

1 answer

-1


You used two forms instead of just one. I believe that you are trying to send the data to registra.php in a single request. Thus, the ideal is to treat as a Multi-step Form.

The modifications I made below were:

  1. I removed the <form action=""> and passed the fields into the form that has the action="registra.php"
  2. I switched the name of radio for "gender", so you can only select one at a time.
  3. I switched the button Next to input, so it does not submit the form.
  4. I added the button of submit at the end of the form.
<form class="mb-2" method="POST" action="registra.php">
  <div class="container first-content" id="boy-or-girl">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="gender" id="boy" value="M">
      <label class="form-check-label" for="boy">Menino</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="gender" id="girl" value="F">
      <label class="form-check-label" for="girl">Menina</label>
    </div>
    <div class="form-group row">
      <div class="col-sm-10">
        <input type="button" class="btn btn-primary" id="button-gender" value="Próximo" />
      </div>
    </div>
  </div>
  <div class="container" id="food" style="display: none;">
    <div class="jumbotron jumbotron-fluid mt-3 rounded-pill">
      <div class="container">
        <h1 class="display-4">Escolha sua comida</h1>
        <p class="lead"></p>
      </div>
    </div>
    <div class="form-check mb-2">
      <input class="form-check-input" type="checkbox" name="biscoitos">
      <label class="form-check-label" for="biscoitos">
        Biscoitos
      </label>
    </div>
    <div class="form-check mb-2">
      <input class="form-check-input" type="checkbox" name="salgadinhos">
      <label class="form-check-label" for="salgadinhos">
        Salgadinhos
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Finalizar</button>
  </div>
</form>

Browser other questions tagged jquery css bootstrap-4

You are not signed in. Login or sign up in order to post.