'submit' ne semble jamais tirer sur l'élément du bouton lorsque cliqué

Je suis nouveau à la conception de sites Web et je travaille sur quelques projets sur un livre. j'en ai un où je suis supposé utiliser un élément et un élément. Dans le livre j'ai lu que le bouton de réinitialisation devrait réinitialiser tous les éléments aux valeurs qu'ils avaient lorsque la page a été initialement chargée, mais cela n'arrive jamais. J'ai également essayé de regarder les points de rupture de l'écouteur d'événement dans les outils de développement de chrome pour un événement de soumission lorsque le bouton Soumettre est cliqué. cela semble également ne pas fonctionner. Est-ce que j'ai râté quelque chose? Je vais poster mon code HTML et espère que vous pouvez m'aider à voir ce que mon erreur est.'submit' ne semble jamais tirer sur l'élément du bouton lorsque cliqué

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

Source

2017-09-22 Mox_z

Vous devriez le mettre dans la balise 'forme';)

Source

2017-09-22 03:05:43 rafon

oh wow. Je ne peux pas croire que j'ai raté ça. Merci! –

Vous devez avoir les entrées et les boutons à l'intérieur d'une balise form:

<form> 
<section> 
<div class="panel panel-default"> 
... 
</section> 
</form>

Source

2017-09-22 02:56:46 David

Les éléments d'entrée doivent être contenues dans le <form>.

Par exemple:

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

La raison est évidente lorsque vous avez affaire à des formes multiples. Comment soumettre et réinitialiser les boutons d'entrée maintenant dans quelle forme ils traitaient s'ils n'étaient pas contenus dans le formulaire? Par exemple:

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

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

La mise en œuvre correcte:

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

Source

2017-09-22 03:08:25 Zze

'submit' ne semble jamais tirer sur l'élément du bouton lorsque cliqué

Répondre

Questions connexes