简单的引导表单构建答案

【问题标题】：Simple bootstrap form building简单的引导表单构建
【发布时间】：2016-05-26 17:46:19
【问题描述】：

我需要帮助构建一个简单的表单。我已经根据引导文档设置并“工作”了表单。这是我的代码：

<form class="form-horizontal">
<fieldset>
<!-- Form Name -->

<!-- Multiple Radios -->
<div class="form-group">
  <label class="col-md-4 control-label" for="surgical skils">Do you have surgical skills?</label>
  <div class="col-md-4">
  <div class="radio">
    <label for="surgical skils-0">
      <input type="radio" name="surgical skils" id="surgical skils-0" value="1" checked="checked">
      Yes
    </label>
    </div>
  <div class="radio">
    <label for="surgical skils-1">
      <input type="radio" name="surgical skils" id="surgical skils-1" value="2">
      No
    </label>
    </div>
  </div>
</div>

<!-- Multiple Radios -->
<div class="form-group">
  <label class="col-md-4 control-label" for="manipulation skills">Do you have sperm and embryo manipulation skills?</label>
  <div class="col-md-4">
  <div class="radio">
    <label for="manipulation skills-0">
      <input type="radio" name="manipulation skills" id="manipulation skills-0" value="1" checked="checked">
      Yes
    </label>
    </div>
  <div class="radio">
    <label for="manipulation skills-1">
      <input type="radio" name="manipulation skills" id="manipulation skills-1" value="2">
      No
    </label>
    </div>
  </div>
</div>

<!-- Multiple Radios -->
<div class="form-group">
  <label class="col-md-4 control-label" for="freezers">Do you have access to liquid nitrogen and liquid nitrogen freezers?</label>
  <div class="col-md-4">
  <div class="radio">
    <label for="freezers-0">
      <input type="radio" name="freezers" id="freezers-0" value="1" checked="checked">
      Yes
    </label>
    </div>
  <div class="radio">
    <label for="freezers-1">
      <input type="radio" name="freezers" id="freezers-1" value="2">
      No
    </label>
    </div>
  </div>
</div>

<!-- Multiple Radios -->
<div class="form-group">
  <label class="col-md-4 control-label" for="history">Have you had success with previous attempts to cryo preserve sperm?</label>
  <div class="col-md-4">
  <div class="radio">
    <label for="history-0">
      <input type="radio" name="history" id="history-0" value="1" checked="checked">
      Yes
    </label>
    </div>
  <div class="radio">
    <label for="history-1">
      <input type="radio" name="history" id="history-1" value="2">
      No
    </label>
    </div>
  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="singlebutton"></label>
  <div class="col-md-4">
    <button id="singlebutton" name="singlebutton" class="btn btn-default">Submit</button>
  </div>
</div>

</fieldset>
</form>

我的问题和困惑与提交按钮有关。提交后，我希望表单区域根据答案显示文本。换句话说，我希望表单查看问题和任何“否”响应 - 显示此消息。否则，如果它们都是“是”，则显示此消息。

表单数据不需要保存，也不需要发送到任何地方。

【问题讨论】：

你为什么不用javascript来做这个？
在表单提交时运行 JavaScript 函数。返回 false 表示没有响应并显示警报。
好建议！问题是我不是 javascript 程序员。那个脚本会是什么样子？
您已在标签中包含jQuery，您是否尝试过使用它来实现您的目标？或者您要问 - “请为我编写代码”？
不要求任何人“为我编写代码” - 只需要一点指导，但这里说的是我尝试过的。 <script> function validateForm() { // validation fails if the input is no if(form.surgicalskills.value == "2") { alert("You need our help"); return false; } </script> 问题仍然存在，我是否需要为所有字段执行此操作？或者，如果有任何“否”响应，我可以为整个表单创建一个空白规则，然后显示此文本 - 如果其他（全部为“是”）显示此文本？

标签： jquery html forms twitter-bootstrap

【解决方案1】：

昨晚经过一番批判性思考后，我想通了。

$("#cryo-kit .cryo-submit").on("click",function(){
        var no = 0, yes = 0, total = 0;
    $('#cryo-kit .radio-wrapper').each(function(index, node){
        total += 1;
        var checkedValue = $(this).find("input:checked").val();
        if(checkedValue == 'no'){ no += 1;}
      if(checkedValue == 'yes'){ yes += 1;}
    }).promise().done(function(){
        if(no == total){
        $("#cryo-form-result").text("I don't think you're qualified, contact us");
      } else if (yes == total) {
        $("#cryo-form-result").text("Congrats! You can buy our kit");
      } else {
        $("#cryo-form-result").text("I don't think you're qualified, contact us");
      }
    });
});

【讨论】：