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

Posted 2023-05-09

【中文标题】如何根据两个是/否单选选项将值传递给隐藏字段

【英文标题】：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/

【问题讨论】：

下面的答案解决了你的问题吗？

它帮助我想出了解决方案。感谢发帖。

【参考方案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");
      

    );