Bootstrap Модальная проблема с входами и h5 - PullRequest
0 голосов
/ 25 января 2019

Так что, где говорится в кнопке data-whatever="Add a recipe" Я полагаю, что это переопределяет мои заполнители для моих входных тегов, и я не уверен, почему, если я избавлюсь от этого, это будет работать, но новый заголовок рецепта h5 будет пустым

<button id="button" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="Add a recipe">Add a recipe</button>
<!-- end of button -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New Recipe</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
      </div>
      <div class="modal-body">
        <form class="recipe-form" action="/pizza" method="POST">
          <a id="userId" data-id=<%=user.id %>></a>

          <input type="text" id="pizza-title" name="pizza-title" placeholder="title"><br>
          <input type="text" id="pizza-recipe" name="pizza-recipe" placeholder="recipe"><br>

          <label for="vegy1">Cucumber</label>
          <input type="number" class="quant" name="vegy1" data-name="cucumber" min="0" max="3" value="0">

          <label for="vegy2">Tomato</label>
          <input type="number" class="quant" name="vegy2" data-name="tomato" min="0" max="3" value="0">

          <label for="vegy3">Pineapple</label>
          <input type="number" class="quant" name="vegy3" data-name="pineapple" min="0" max="3" value="0">

          <label for="vegy4">Avocado</label>
          <input type="number" class="quant" name="vegy4" data-name="avocado" min="0" max="3" value="0"><br>

          <label for="vegy5">Eggplant</label>
          <input type="number" class="quant" name="vegy5" data-name="eggplant" min="0" max="3" value="0">

          <label for="vegy6">Olive</label>
          <input type="number" class="quant" name="vegy6" data-name="olive" min="0" max="3" value="0">

          <label for="vegy7">Onion</label>
          <input type="number" class="quant" name="vegy7" data-name="onion" min="0" max="3" value="0">

          <label for="vegy8">Mushroom</label>
          <input type="number" class="quant" name="vegy8" data-name="mushroom" min="0" max="3" value="0"><br>

          <label for="vegy9">Garlic</label>
          <input type="number" class="quant" name="vegy9" data-name="garlic" min="0" max="3" value="0">

          <label for="vegy10">Spinach</label>
          <input type="number" class="quant" name="vegy10" data-name="spinach" min="0" max="3" value="0">

          <label for="vegy11">Cilantro</label>
          <input type="number" class="quant" name="vegy11" data-name="cilantro" min="0" max="3" value="0">

          <label for="vegy12">Chicken</label>
          <input type="number" class="quant" name="vegy12" data-name="chicken" min="0" max="3" value="0"><br>

          <label for="vegy13">Anchovy</label>
          <input type="number" class="quant" name="vegy13" data-name="anchovy" min="0" max="3" value="0">

          <label for="vegy14">Bacon</label>
          <input type="number" class="quant" name="vegy14" data-name="bacon" min="0" max="3" value="0">

          <label for="vegy15">Sausage</label>
          <input type="number" class="quant" name="vegy15" data-name="sausage" min="0" max="3" value="0">

          <label for="vegy16">Beef</label>
          <input type="number" class="quant" name="vegy16" data-name="beef" min="0" max="3" value="0"><br>

          <label for="vegy17">Ham</label>
          <input type="number" class="quant" name="vegy17" data-name="ham" min="0" max="3" value="0">

          <label for="vegy18">Pepperoni</label>
          <input type="number" class="quant" name="vegy18" data-name="pepperoni" min="0" max="3" value="0">

          <label for="vegy19">Salami</label>
          <input type="number" class="quant" name="vegy19" data-name="salami" min="0" max="3" value="0">

          <label for="vegy20">Banana</label>
          <input type="number" class="quant" name="vegy20" data-name="banana" min="0" max="3" value="0"><br>

          <p id="totalCal"></p>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary addPizza">Add Recipe</button>
          </div>

        </form>
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 25 января 2019

Вот рабочая скрипка вашего кода, в будущем добавляйте ее всякий раз, когда это возможно

https://codepen.io/rodozlatan/pen/aXvqag

Можете ли вы объяснить лучше оттуда, какая часть не работает какожидается?

<button id="button" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="Add a recipe">Add a recipe</button>
<!-- end of button -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New Recipe</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
      </div>
      <div class="modal-body">
        <form class="recipe-form" action="/pizza" method="POST">
          <a id="userId" data-id="1"></a>

          <input type="text" id="pizza-title" name="pizza-title" placeholder="title"><br>
          <input type="text" id="pizza-recipe" name="pizza-recipe" placeholder="recipe"><br>

          <label for="vegy1">Cucumber</label>
          <input type="number" class="quant" name="vegy1" data-name="cucumber" min="0" max="3" value="0">

          <label for="vegy2">Tomato</label>
          <input type="number" class="quant" name="vegy2" data-name="tomato" min="0" max="3" value="0">

          <label for="vegy3">Pineapple</label>
          <input type="number" class="quant" name="vegy3" data-name="pineapple" min="0" max="3" value="0">

          <label for="vegy4">Avocado</label>
          <input type="number" class="quant" name="vegy4" data-name="avocado" min="0" max="3" value="0"><br>

          <label for="vegy5">Eggplant</label>
          <input type="number" class="quant" name="vegy5" data-name="eggplant" min="0" max="3" value="0">

          <label for="vegy6">Olive</label>
          <input type="number" class="quant" name="vegy6" data-name="olive" min="0" max="3" value="0">

          <label for="vegy7">Onion</label>
          <input type="number" class="quant" name="vegy7" data-name="onion" min="0" max="3" value="0">

          <label for="vegy8">Mushroom</label>
          <input type="number" class="quant" name="vegy8" data-name="mushroom" min="0" max="3" value="0"><br>

          <label for="vegy9">Garlic</label>
          <input type="number" class="quant" name="vegy9" data-name="garlic" min="0" max="3" value="0">

          <label for="vegy10">Spinach</label>
          <input type="number" class="quant" name="vegy10" data-name="spinach" min="0" max="3" value="0">

          <label for="vegy11">Cilantro</label>
          <input type="number" class="quant" name="vegy11" data-name="cilantro" min="0" max="3" value="0">

          <label for="vegy12">Chicken</label>
          <input type="number" class="quant" name="vegy12" data-name="chicken" min="0" max="3" value="0"><br>

          <label for="vegy13">Anchovy</label>
          <input type="number" class="quant" name="vegy13" data-name="anchovy" min="0" max="3" value="0">

          <label for="vegy14">Bacon</label>
          <input type="number" class="quant" name="vegy14" data-name="bacon" min="0" max="3" value="0">

          <label for="vegy15">Sausage</label>
          <input type="number" class="quant" name="vegy15" data-name="sausage" min="0" max="3" value="0">

          <label for="vegy16">Beef</label>
          <input type="number" class="quant" name="vegy16" data-name="beef" min="0" max="3" value="0"><br>

          <label for="vegy17">Ham</label>
          <input type="number" class="quant" name="vegy17" data-name="ham" min="0" max="3" value="0">

          <label for="vegy18">Pepperoni</label>
          <input type="number" class="quant" name="vegy18" data-name="pepperoni" min="0" max="3" value="0">

          <label for="vegy19">Salami</label>
          <input type="number" class="quant" name="vegy19" data-name="salami" min="0" max="3" value="0">

          <label for="vegy20">Banana</label>
          <input type="number" class="quant" name="vegy20" data-name="banana" min="0" max="3" value="0"><br>

          <p id="totalCal"></p>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary addPizza">Add Recipe</button>
          </div>

        </form>
      </div>
    </div>
  </div>
</div>
...