Question

我需要帮助构建一个简单的表单。我有所有设置的表格，并且＆＃34;工作＆＃34;基于bootstrap文档。这是我的代码：

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

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

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

Answer 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");
      }
    });
});

简单的bootstrap形式建设

1 个答案: