Twitter Bootstrap Question posted in

'submit' never seems to fire on button element when clicked-Twitter bootstrap

i am new to web design and i am working on some projects out of a book. i have one where i am supposed to use a element and a element. in the book i read that the reset button should reset all elements to the values that they had when the page was initially loaded, but that never happens. i have also tried looking at the event listener break points in chrome dev tools for a submit event when the submit button is clicked. this also seems not to work. am i missing something here? i am going to post my html and hope that you can help me see what my mistake is.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>coffeerun</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body class="container">
<header>
<h1>CoffeeRun</h1>
</header>
<section>
<div class="panel panel-default">
  <div class="panel-body">
    <form data-coffee-order="form">
     <div class="form-group">
        <label for="coffeeOrder">Coffee Order</label>
        <input class="form-control" name="coffee" value="" id="coffeeOrder">
      </div>
      <div class="form-group">
        <label for="emailInput">Email</label>
        <input class="form-control" type="email" name="emailAddress" value="" id="emailInput">
      </div>
      <div class="radio">
        <label>
            <input type="radio" name="size" value="short">
            Short
          </label>
      </div>
      <div class="radio">
        <label>
            <input type="radio" name="size" value="tall" checked>
            Tall
          </label>
      </div>
      <div class="radio">
        <label>
            <input type="radio" name="size" value="grande">
            Grande
          </label>
      </div>
      <div class="form-group">
        <label for="flavorShot">Flavor Shot</label>
        <select id="flavorShot" class="form-control" name="flavor">
            <option value="">None</option>
            <option value="caramel">Caramel</option>
            <option value="almond">Almond</option>
            <option value="mocha">Mocha</option>
          </select>
      </div>
      <div class="form-group">
        <label for="strengthLevel">Caffeine Rating</label>
        <input id="strengthLevel" type="range" name="strength" value="30">
      </div>
    </form>
  </div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
<script src="scripts/datastore.js" charset="utf-8"></script>
<script src="scripts/formHandler.js" charset="utf-8"></script>
<script src="scripts/truck.js" charset="utf-8"></script>
<script src="scripts/main.js" charset="utf-8"></script>
</body>

Tags:

3

Answers


  1. 0

    You have to have the inputs and buttons inside a form tag:

    <form>
<section>
<div class="panel panel-default">
...
</section>
</form>
    Login or Signup to reply.
  2. 0

    You should put it in the ‘form’ tag 😉

    Login or Signup to reply.
  3. 0

    The input elements need to be contained within the <form>.

    For example:

    <form>
  <button type="submit" class="btn btn-default">Submit</button>
  <button type="reset" class="btn btn-default">Reset</button>
</form>

    The reason for this is obvious when you are dealing with multiple forms. How would the submit and reset input buttons now which form they were dealing with if not contained within the form?? For Example:

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

<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>

    The correct implementation:

    <form>
  <button type="submit" class="btn btn-default">Submit</button>
  <button type="reset" class="btn btn-default">Reset</button>
</form>

<form>
  <button type="submit" class="btn btn-default">Submit</button>
  <button type="reset" class="btn btn-default">Reset</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search