如何根据两个是/否单选选项将值传递给隐藏字段答案

【问题标题】：How to pass value to hidden field based on two Yes/No radio selections如何根据两个是/否单选选项将值传递给隐藏字段
【发布时间】：2020-04-26 07:38:46
【问题描述】：

我们有一个包含两个是/否问题的表格：

问题 1：是/否

问题 2：是/否

我们想在表单提交时根据以下四种场景给隐藏字段“leadSource”传递一个值：

Q1=是； Q2=是隐藏的；字段名称“leadSource”值 =“A”
Q1=是； Q2=无隐藏；字段名称“leadSource”值 =“B”
Q1=否； Q2=是隐藏的；字段名称“leadSource”值 =“C”
Q1=否； Q2=无隐藏；字段名称“leadSource”值 =“D”

如何在 jQuery 中对四种不同的场景进行编码，以便将值传递给隐藏字段？

    <form id="addLeadSource">
    <input type="hidden" name="leadSource" value="" id="leadSource" class="leadSource">

    <div class="form-group">
     <label class="labeltext">Would you say yes or no to this first question?</label><br>
     <div class="form-check-inline">

      <label class="Q1YesLabel">
      <span class="radiotextsty">Yes</span>
      <input type="radio" class="Q1Yes" name="Q1" value="Yes" id="Q1Yes" required>
      <span class="checkmark"></span>
      </label>        
      <label class="Q1NoLabel"><span class="radiotextsty">No</span>
      <input type="radio" name="Q1" value="No" id="Q1No" required>
      <span class="checkmark"></span>
      </label>
      </div>
     </div>

     <div class="form-group" id="Q2">
     <label class="labeltext">How about this one?</label><br>
     <div class="form-check-inline">

     <label class="Q2YesLabel"><span class="radiotextsty">Yes</span>
     <input type="radio" class="directly_sourced" name="directly_sourced" value="Yes" required>
     <span class="checkmark"></span>
     </label>        
     <label class="Q2NoLabel"><span class="radiotextsty">No</span>
     <input type="radio" name="directly_sourced" value="No" required>
     <span class="checkmark"></span>
     </label>
     </div>
     </div>

     <button type="submit" class="btn btn-primary">Submit</button>

     </form>

    $(document).ready(function() {
$('input[type="radio"]').click(function() {
       if($(this).attr('id') == 'Q1No') {
            $('#Q2').show();           
       }
   });
        });

      $(document).ready(function() {
             $('input.ZoomInfo_sourced[type=radio]').change(function() { //change event by class
              if (this.value == 'Yes - ZoomInfo Sourced') {
                  $(this.ClassName[type=hidden]).val("Zoominfo - Seller");
                  alert("Zoominfo - Seller");
              }
              else if (this.value == '1') {
                 $(this.source[type=hidden]).val("Yes");
              }
          });
        });

$(document).ready(function() {
    $("#addLeadSource").submit(function(event){
  var source = document.getElementById("leadSource").innerText;
    alert(source);
    });
});

我从这里开始：https://jsfiddle.net/Codewalker/mqzdvyha/

【问题讨论】：

下面的答案解决了你的问题吗？
它帮助我想出了解决方案。感谢发帖。

标签： jquery forms radio-button

【解决方案1】：

可能有更好的方法来写这个，但我认为这样的逻辑很容易遵循。

  function testme() {
     if ($('[name="Q1"]:checked').val() == 'Yes') {
        console.log('q1 is yes');
        if ($('[name="directly_sourced"]:checked').val() == 'Yes') {
           console.log('q2 is yes');
           return 'A';
        } else {
           console.log('q2 is no');
           return 'B';
        }
     } else {
        console.log('q1 is no');
        if ($('[name="directly_sourced"]:checked').val() == 'Yes') {
           console.log('q2 is yes');
           return 'C';
        } else {
           console.log('q2 is no');
           return 'D';
        }       
     }
  }

基本上只是分支 if else 语句很好地遵循了您的问题的布局。如果这很重要，它确实假设不回答是否...使用此功能，您可以在提交表单时拥有$('#leadSource').val(testme());

【讨论】：

【解决方案2】：

这是我想出的适合我的解决方案：

    $("#theForm").submit(function(event) {

      if ($('#Q1Yes').is(':checked') && $('#Q2Yes').is(':checked')) {
        $("#source").val("Scenario 1 and 2");

      } else if ($('#Q1Yes').is(':checked') && $('#Q2No').is(':checked')) {
        $("#source").val("Scenario 1 and 2");

      } else if ($('#Q1No').is(':checked') && $('#Q2Yes').is(':checked')) {
        $("#source").val("Scenario 3");

      } else {
        $("#source").val("Scenario 4");
      }

    });

【讨论】：