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>