javascript - 提交不发布所有数据

Question

这是一个非常简单的问题，但我花了 3 天时间寻找我找不到的错误。本表无故只贴“grille de notation”和“Grille d'évaluation”之间的内容...

这是我的表单代码:我知道它很大...对此感到抱歉 你可以试试:https://institut-villebon-staging.herokuapp.com/formulaires/entretien/0

<div id="page-content-wrapper">
  <div class="container-fluid">
          <nav class="col-sm-3 col-md-3 hidden-xs" id="myScrollspy" data-pg-collapsed>
              <ul class="nav nav-pills nav-stacked" data-pg-collapsed>
                  <li class="active">
                      <a href="#informationsCandidat">Informations du candidat</a>
                  </li>
                  <li>
                      <a href="#GrilleNotation">Grille de notation</a>
                  </li>
                  <li>
                      <a href="#GrilleEval">Grille d'évaluation</a>
                  </li>
              </li>
          </ul>
      </nav>
      <div id="form_container" class="col-sm-9">
          <div class="row">
              <div class="col-xs-4 col-md-8">
                <ol class="breadcrumb hidden-xs" data-pg-collapsed>
                {{#each etudiants}}
                      <li>
                          <a href="/formulaires/entretien/{{this.NumeroCandidat}}">{{this.Nom}}</a>
                      </li>
                {{/each}}
                </ol>
              </div>
              <div class="dropdown col-sm-2 pull-right">
                  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Autres candidats
                      <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu">
                      {{#each etudiants}}
                      <li>
                          <a href="/formulaires/entretien/{{this.NumeroCandidat}}">{{this.Nom}}</a>
                      </li>
                      {{/each}}
                  </ul>
              </div>
          </div>
          <div class="row">
              <div class="form-entretien-menu col-sm-10">
                  <h1>{{title}}</h1>
              </div>
          </div>
          <div class="form-entretien-content">
              <form id="entretienForm"role="form" class="form-horizontal" action="/formulaires/entretien/validate" method="post" >
                  <div class="row" id="informationsCandidat">
                      <h3>Informations du candidat :</h3>
                  </div>
                  <div>
                      <!-- Nom et Numéro de groupe -->
                      <div class="form-group margin-bottom">
                          <div class="row">
                              <label for="inputNomCandidat" class="col-sm-2 col-form-label">Nom du candidat</label>
                              <div class="col-sm-4">
                                  <div class="input-group">
                                      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                      <input type="text" class="form-control" id="inputNomCandidat" value="{{etudiantName}}">
                                  </div>
                              </div>
                              <label for="inputNumeroGroupe" class="col-sm-2 col-form-label">Numéro de groupe</label>
                              <div class="col-sm-3">
                                  <div class="input-group">
                                      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                      <input type="number" class="form-control" id="inputNumeroGroupe" value="{{etudiantGroupNumber}}">
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Numéro du candidat et Filière d'origine -->
                      <div class="form-group margin-bottom">
                          <div class="row">
                              <label for="inputNumeroCandidat" class="col-sm-2 col-form-label">Numéro du candidat</label>
                              <div class="col-sm-4">
                                  <div class="input-group">
                                      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                      <input type="number" class="form-control" id="inputNumeroCandidat" value="{{etudiantNumber}}">
                                  </div>
                              </div>
                              <label for="inputFilier" class="col-sm-2 col-form-label">Filière d'origine</label>
                              <div class="col-sm-3">
                                  <div class="input-group">
                                      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                      <input type="text" class="form-control" id="inputFilier" value="{{etudiantFiliere}}">
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Commentaire -->
                      <div class="form-group">
                          <div class="row col-sm-6">
                              <label for="comment">Commentaire :</label>
                              <textarea class="form-control" rows="5" id="comment" placeholder="Commentaire"></textarea>
                          </div>
                      </div>
                  </div>
                  <div class="row" id="GrilleNotation">
                      <div class="divider col-sm-12"></div>
                  </div>
                  <!-- Grille de notation -->
                  <div class="col-sm-12">
                      <h3>Grille de notation :</h3>
                  </div>
                  <div>
                      <!-- Gout pour la science -->
                      <div class="form-group margin-bottom">
                          <div class="col-sm-1" id="hiddeGoutScience">
                              <!-- Modale -->
                              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalGoutScience">
                                  <i class="glyphicon glyphicon-info-sign"></i>
                              </button>
                          </div>
                          <label for="inputGoutScience" class="col-sm-2 col-form-label">Goût pour les sciences, curiosité</label>
                          <div class="col-sm-2">
                              <input id="inputGoutScience" type="text" value="0" name="inputGoutScience">
                          </div>
                          <div class="col-sm-7">
                              <textarea class="form-control" rows="5" id="commentGoutScience" placeholder="Commentaire"></textarea>
                          </div>
                      </div>
                      <!-- Profil généraliste -->
                      <div class="form-group margin-bottom">
                          <div class="col-sm-1" id="hiddeProfilGeneraliste">
                              <!-- Modale -->
                              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalProfilGeneraliste">
                                  <i class="glyphicon glyphicon-info-sign"></i>
                              </button>
                          </div>
                          <label for="inputProfilGeneraliste" class="col-sm-2 col-form-label">Profil généraliste, intérêt pour l'interdisciplinarité</label>
                          <div class="col-sm-2">
                              <input id="inputProfilGeneraliste" type="text" value="0" name="inputProfilGeneraliste">
                          </div>
                          <div class="col-sm-7">
                              <textarea class="form-control" rows="5" id="commentProfilGeneraliste" placeholder="Commentaire"></textarea>
                          </div>
                      </div>
                      <!-- Goût pour l'expérimentation -->
                      <div class="form-group margin-bottom">
                          <div class="col-sm-1" id="hiddeGoutExperimentation">
                              <!-- Modale -->
                              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalGoutExperimentation">
                                  <i class="glyphicon glyphicon-info-sign"></i>
                              </button>
                          </div>
                          <label data-toggle="tooltip" title="Intérêt pour  / capacité de s’adapter à une pédagogie autre (active)" for="inputGoutExperimentation" class="col-sm-2 col-form-label">Goût pour l'expérimentation.</label>
                          <div class="col-sm-2">
                              <input id="inputGoutExperimentation" type="text" value="0" name="inputGoutExperimentation">
                          </div>
                          <div class="col-sm-7">
                              <textarea class="form-control" rows="5" id="commentGoutExperimentation" placeholder="Commentaire" value="test"></textarea>
                          </div>
                      </div>
                      <!-- Capacité à supporter la frustration -->
                      <div class="form-group margin-bottom">
                          <div class="col-sm-1" id="hiddeCapaciteFrustration">
                              <!-- Modale -->
                              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalCapaciteFrustration">
                                  <i class="glyphicon glyphicon-info-sign"></i>
                              </button>
                          </div>
                          <label data-toggle="tooltip" title="Vérifier en particulier si elle est hostile, agressive…" for="inputCapaciteFrustration" class="col-sm-2 col-form-label">Capacité à supporter la frustration et à travailler en collectif.</label>
                          <div class="col-sm-2">
                              <input id="inputCapaciteFrustration" type="text" value="0" name="inputCapaciteFrustration">
                          </div>
                          <div class="col-sm-7">
                              <textarea class="form-control" rows="5" id="commentCapaciteFrustration" placeholder="Commentaire"></textarea>
                          </div>
                      </div>
                      <!-- Connaissance du projet et mobilisation future -->
                      <div class="form-group margin-bottom">
                          <div class="col-sm-1" id="hiddeConnaissanceProjet">
                              <!-- Modale -->
                              <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalConnaissanceProjet">
                                  <i class="glyphicon glyphicon-info-sign"></i>
                              </button>
                          </div>
                          <label for="inputConnaissanceProjet" class="col-sm-2 col-form-label">Connaissance du projet et mobilisation future</label>
                          <div class="col-sm-2">
                              <input id="inputConnaissanceProjet" type="text" value="0" name="inputConnaissanceProjet">
                          </div>
                          <div class="col-sm-7">
                              <textarea class="form-control" rows="5" id="commentConnaissanceProjet" placeholder="Commentaire"></textarea>
                          </div>
                      </div>
                  </div>
                  <div class="row" id="GrilleEval">
                      <div class="divider col-sm-12"></div>
                  </div>
                  <!-- Grille d'évaluation -->
                  <div class="col-sm-12">
                      <h3>Grille d'évaluation :</h3>
                  </div>
                  <div>
                      <!-- Note Suggérée -->
                      <div class="form-group margin-bottom">
                          <label for="inputNoteSug" class="col-sm-2 col-form-label">Note suggérée</label>
                          <div class="col-sm-2">
                              <select class="form-control" id="inputNoteSug">
                                  <option>0</option>
                                  <option>1</option>
                                  <option>2</option>
                                  <option>3</option>
                                  <option>4</option>
                                  <option>5</option>
                                  <option>6</option>
                                  <option>7</option>
                                  <option>8</option>
                                  <option>9</option>
                                  <option>10</option>
                              </select>
                          </div>
                      </div>
                      <!-- Note Entretien -->
                      <div class="form-group margin-bottom">
                          <label for="inputNoteEntretien" class="col-sm-2 col-form-label">Votre note à l'issue de l'entretien</label>
                          <div class="col-sm-2">
                              <select class="form-control" id="inputNoteEntretien">
                                  <option>0</option>
                                  <option>1</option>
                                  <option>2</option>
                                  <option>3</option>
                                  <option>4</option>
                                  <option>5</option>
                                  <option>6</option>
                                  <option>7</option>
                                  <option>8</option>
                                  <option>9</option>
                                  <option>10</option>
                              </select>
                          </div>
                      </div>
                      <!-- Appreciation littérale -->
                      <div class="form-group margin-bottom">
                          <div class="col-sm-12">
                              <label for="commentAppreciationLit" class="col-sm-2 col-form-label">Votre appréciation littérale</label>
                              <div class="col-sm-10">
                                  <textarea class="form-control" rows="5" id="commentAppreciationLit" placeholder=""></textarea>
                              </div>
                          </div>
                      </div>
                  </div>
                  <!-- Submit -->
                  <div class="form-group margin-bottom">
                      <div class="col-sm-12">
                          <div class="col-sm-2">
                              <button type="submit" class="btn btn-primary" id="submitFormButton">Enregistrer</button>
                          </div>
                          <div class="col-sm-2">
                              <a href="/etudiants" class="btn btn-danger" role="button">Annuler</a>
                          </div>
                      </div>
                  </div>
              </form>
          </div>
      </div>
  </div>
</div>

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
    $( "#hiddeInfoCandidat" ).click(function() {
        var $target = $( "#informationsCandidat" );
        if ($target.is(':hidden')){
            $target.show(400);
        }else{
            $target.hide(400);
        }
    });
    $( "#hiddeGrilleNotation" ).click(function() {
        var $target = $( "#GrilleNotation" );
        if ($target.is(':hidden')){
            $target.show(400);
        }else{
            $target.hide(400);
        }
    });
    $("input[name='inputGoutScience']").TouchSpin({
        min: 0,
        max: 3,
        step: 1
    });
    $("input[name='inputProfilGeneraliste']").TouchSpin({
        min: 0,
        max: 3,
        step: 1
    });
    $("input[name='inputGoutExperimentation']").TouchSpin({
        min: 0,
        max: 3,
        step: 1
    });
    $("input[name='inputCapaciteFrustration']").TouchSpin({
        min: 0,
        max: 3,
        step: 1
    });
    $("input[name='inputConnaissanceProjet']").TouchSpin({
        min: 0,
        max: 3,
        step: 1
    });
</script>

在表达中我已经这样做了:

router.post('/entretien/validate', function(req, res, next) {
    console.log(req.body);
    res.render('formulaire_entretien', {
       title: "formulaire d'entretien" });
});

只得到:

{ inputGoutScience: '1',
  inputProfilGeneraliste: '0',
  inputGoutExperimentation: '0',
  inputCapaciteFrustration: '0',
  inputConnaissanceProjet: '0' }

感谢小伙伴们的帮助

Answer 1

<select class="form-control" id="inputNoteEntretien">

并非所有字段都有名称。表单控件的 name 决定了将使用什么来标记提交的表单数据中的值。没有名称，控件就无法成功(因此根本不会出现在表单数据中)。