表单内的隐藏文本字段值未在单击单选按钮时出现答案

【问题标题】：Hidden text field value that is inside the form not appearing upon a radio button being clicked表单内的隐藏文本字段值未在单击单选按钮时出现
【发布时间】：2017-03-03 20:54:02
【问题描述】：

我必须根据单选点击选项和隐藏的文本字段 appMajor 值隐藏或显示站点 div 下拉列表。当单选按钮为“Y”且主要为“EN”时，站点 div 下拉菜单可见，否则应隐藏。我在访问 appMajor 隐藏值时遇到问题。这就是我达到的程度。

<script>
$(document).ready(function(){
  var  selectedDecision =" ";
  $(".submitDecision ").on("click", "input:radio[name=decision]",function(){

var formId = $(this).closest("form").attr("Id"); //
var strMajor = formId.find("#appMajor").val(); //TypeError: formId.find is not a function

if ($(this).attr("value")== "Y" && strMajor =="EN"){
  selectedDecision =  "Y" ;    
  $("#selectSiteCodeDiv").show();
}
else if ($(this).attr("value")=="N" && strMajor !="EN")  {
  selectedDecision =  "N" ; 
  $("#selectSiteCodeDiv").hide();
}
else if ($(this).attr("value")=="C" && strMajor !="EN") {
  selectedDecision =  "C" ;
  $("#selectSiteCodeDiv").hide();
}
  });
});
</script>

<!DOCTYPE html>
<title>submit demo</title>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<body>

<h1> This is a Demo </h1>

<table id="exampleTable" border="1" cellpadding="10" align="center">

<tr>
  <td>
  <input type="button" value="Input Button">
</td>

<td>
  <input type="checkbox">
</td>

<td>
  <input type="file">
</td>

<td>
  <form class="submitDecision" id="submitDecisionform' ||sNum||'">
    <div class="decisionMessage"></div>
    <input type="radio" id="decisionAccept"  name="decision" class="decisionRadio"  checked="" value="Y">Accept

    <input type="radio" id="decisionDeny"  name="decision" class="decisionRadio"   value="N">Deny
    <input type="radio" id="decisionClear"  name="decision" class="decisionRadio"   value="C">
    Clear Decision
    <input type="hidden" id="sNum" value="">   
    <input type="hidden" id="appNum" value="">   
    <input type="hidden" id="appMajor" value="">  
    <div style="font-weight:bold;margin :10px 0px 10px 0px;"> Deny reasons</div>
    <select id="denyReason" style="margin-bottom:1em;">
      <option value="0">*** If denied, please make a selection ****</option>
      <option value="1">Reason1</option>
      <option value="2">Reason2</option>
      <option value="3">Reason3</option>
      <option value="4">Reason4</option>
    </select> <br>
    <b>Site</b> <span id="site_span"></span><br>
    <div id="selectSiteCodeDiv" class="selectSite" style="font-weight:bold;margin :10px 0px 10px 0px;">
      <select id="selectedSiteCode">
        <option value="0">*** Please make a site selection ****</option>;

        <option value="A">SiteA</option>
        <option value="B">SiteB</option>
      </select>
    </div>
    <p> </p><br>
    <input value="Submit" type="submit">
  </form>
</td>

  <tr>
<td>
  <input type="button" value="Input Button">
</td>

<td>
  <input type="checkbox">
</td>

<td>
  <input type="file">
</td>

<td>
  <form class="submitDecision" id="submitDecisionform' ||sNum||'">
    <div class="decisionMessage"></div>
    <input type="radio" id="decisionAccept"  name="decision" class="decisionRadio"  checked="" value="Y">Accept

    <input type="radio" id="decisionDeny"  name="decision" class="decisionRadio"   value="N">Deny
    <input type="radio" id="decisionClear"  name="decision" class="decisionRadio"   value="C">
    Clear Decision
    <input type="hidden" id="sNum" value="">   
    <input type="hidden" id="appNum" value="">   
    <input type="hidden" id="appMajor" value="">  
    <div style="font-weight:bold;margin :10px 0px 10px 0px;"> Deny reasons</div>
    <select id="denyReason" style="margin-bottom:1em;">
      <option value="0">*** If denied, please make a selection ****</option>
      <option value="1">Reason1</option>
      <option value="2">Reason2</option>
      <option value="3">Reason3</option>
      <option value="4">Reason4</option>
    </select>
    <br>
    <b>Site</b> <span id="site_span"></span><br>
    <div id="selectSiteCodeDiv" class="selectSite" style="font-weight:bold;margin :10px 0px 10px 0px;">
      <select id="selectedSiteCode">
        <option value="0">*** Please make a site selection ****</option>;

        <option value="A">SiteA</option>
        <option value="B">SiteB</option>
      </select>
    </div>
    <p> </p><br>
    <input value="Submit" type="submit">
  </form>
</td>
  </tr>    
</form>
</table>

</body>
</html>

【问题讨论】：

缺少很多结束标签...例如</input>。检查您的table 和form 结构。在尝试在其上应用一些 jQuery 之前，您应该对您的 HMTL 代码做出努力。 ;) 粘贴您的 HTML here 以查看需要改进的地方。那将是我的第一步。 ;)
不得不说，当我编辑您的帖子时，我添加了}); 以关闭您的就绪功能...希望您的sn-p 能正常工作。但是无论如何你都有额外的错误。粘贴 jsfiddle 或 CodePen 以查找错误。
@Louys Patrice Bessette，想想你的建议。我会尝试检查我的错误并返回。

标签： jquery html

【解决方案1】：

formId.find("#appMajor").val()

不工作。试试

$("#appMajor").val();

相反。（您不应该使用“查找”，因为在同一页面上多次使用相同的 ID 是非常糟糕的做法......）

那么输入字段#appMajor 永远不会有任何价值，因为

<input type="hidden" id="appMajor" value="">

隐藏的输入字段如何获得值“EN”？或者该值是否通过 PHP 自动添加（或不添加）？如果是这样，那么上面的更改应该可以解决问题。另外，也许删除

checked=""

来自您的单选按钮，因此用户需要实际选择一个选项。

这是fiddle。

【讨论】：

感谢您的快速回复。 appMajor 未填充正确的值。在执行过程中具有价值。这是一个代码大纲。
感谢您的快速回复。 appMajor 将在执行期间从数据库中获得一个值。 appMajor 对不同的行有不同的值，如 EN、AG、ON 等。但是，如果 EN 在第一行，第二行有 AG。 $("#appMajor").val();将永远给我 EN 而不是 AG。
所以...问题是数据库给了你错误的值，而不是 jQuery 代码？因为如果我手动将“EN”添加到隐藏的输入字段，它会按预期工作：jsfiddle.net/Niffler/674kcnrc/2
还是有多个ID为appMajor的输入字段？那将是非常糟糕的做法......一个ID应该只出现在一个页面上。如果这是问题所在，您可以将其更改为 <input type="hidden" class="appMajor" value="" /> 并将代码更改为 var strMajor = $(this).next('.appMajor').val(); 或类似的东西。 jsfiddle.net/Niffler/674kcnrc/3
只有一个appMajor隐藏字段。 $this.('#appMajor') 没有提供正确的值。如果我有两行，即使我点击了第二行，我也会从第一行获得 strMajor 值。