javascript - 使用依赖于两个选项之一的 javascript 设置隐藏值

Question

我正在尝试根据单击两个按钮中的哪一个来设置隐藏字段的值。

如果单击 attendYes，它应该将 attend 设置为 1，而如果单击 attendNo，它应该将 attend 设置为 0。它当前将值保存为空白，这表明它没有被设置。

(忽略多余的 CSS...Adobe Muse 在导出时很麻烦)

带按钮的表单

<form id="form1" name="form1" method="post" action="playerparent-profile.php?pid=<?=$pid?>">
   <div class="clearfix colelem" id="pu11327-5"><!-- group -->
    <div class="clearfix grpelem" id="u11327-5"><!-- content -->
     <p>&nbsp; <span id="u11327-2"><button type="submit" id="attendYes" class="global-button">Yes</button></span></p>
    </div>
    <div class="clearfix grpelem" id="u11329-5"><!-- content -->
     <p>&nbsp; <span id="u11329-2"><button type="submit" id="attendNo" class="global-button">No</button></span></p>
    </div>
   </div>
  </div>
 </div>         <input name="attend" id="attend" value="">
 </form>

Javascript

<script type="text/javascript">
if ($('#attendYes')) {
    $('#attendYes').click(function(e) {
        document.getElementById('attendYes').value = "1";
        $('#form1').submit();
        return false;
    });
}
</script>

<script type="text/javascript">
if ($('#attendNo')) {
    $('#attendNo').click(function(e) {
        document.getElementById('attendNo').value = "0";
        $('#form1').submit();
        return false;
    });
}

</script>

我毫不怀疑实际的 javascript 是问题所在，但我不确定是什么，因为它看起来对我来说很有意义。任何帮助将不胜感激。

干杯。

Answer 1

您使用了错误的选择器，请参阅下面的评论，也只需使用 jQuery 来设置值，因为您已经在使用它了

此外，在您将值设置为字段之前提交您的表单，这是因为您使用的元素 <button> , 默认为提交按钮。您需要使用常规按钮，即 <input type="button">见Can I make a <button> not submit a form?

  $(function() {
		if ($('#attendYes')) {
			$('#attendYes').click(function(e) {
				$('#attend').attr( "value", "1" ); //use jQuery here and use `attend` not `attendYes`
				$('#form1').submit();
				return false;
			});
		}
		if ($('#attendNo')) {
			$('#attendNo').click(function(e) {
				$('#attend').attr( "value", "0" ); //use jQuery here and use `attend` not `attendYes`
				$('#form1').submit();
				return false;
			});
		}
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post" action="playerparent-profile.php?pid=<?=$pid?>">
   <div class="clearfix colelem" id="pu11327-5"><!-- group -->
    <div class="clearfix grpelem" id="u11327-5"><!-- content -->
     <p>&nbsp; <span id="u11327-2"><input type="button" id="attendYes" class="global-button">Yes</input></span></p>
    </div>
    <div class="clearfix grpelem" id="u11329-5"><!-- content -->
     <p>&nbsp; <span id="u11329-2"><input type="button" id="attendNo" class="global-button">No</input></span></p>
    </div>
   </div>
  </div>
 </div>         <input name="attend" id="attend" value="">
 </form>