当用标签形式覆盖时，为什么函数隐藏/显示元素不起作用

Why function hide/show element not work , when cover with tag form?

本文关键字：隐藏 函数 显示 不起作用 元素 为什么 标签 覆盖      更新时间：2023-09-26

当用标记形式覆盖时，为什么函数隐藏/显示元素不起作用？

当我测试检查隐藏/显示元素的单选按钮时，它不起作用。

但当我删除tag form并测试它是否正常时，

如何使用tag form 隐藏/显示元素

Fiddle here

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<form name="form1" id="buy_out_form-id" method="post" action="" enctype="multipart/form-data" onsubmit="return checkform(this);" style=" margin: 0px; ">
<script>
// script for hide.show element base on radio button //
$(document).ready(function(){
   $(".color").click(function(){
       if($(this).attr("value")=="red"){
           $("#red").show();
           $("#blue").hide();  
       }
       if($(this).attr("value")=="blue"){
           $("#blue").show();
           $("#red").hide();  
       }
   });
});
</script>
<input onchange="this.form.submit();" class="color" type="radio" name="rdSpace" value="red" checked="">RED
<br>
<input onchange="this.form.submit();" class="color" type="radio" name="rdSpace" value="blue">BLUE
<br>
<span id="red">RED RED RED RED RED</span>
<span id="blue" style="display: none;">BLUE BLUE BLUE BLUE BLUE</span>
</form>

将HTML输入标签更改为

<input onchange="javascript:e.preventDefault();
this.form.submit();" class="color" type="radio" name="rdSpace" value="red" checked="">RED
<br>
<input onchange="javascript:e.preventDefault();this.form.submit();" class="color" type="radio" name="rdSpace" value="blue">Blue

这将避免您提交表格。

编辑：如果您希望表单提交，并且只希望hide/show正常工作，则需要将红色/蓝色span从中移出，并使用ajax提交表单，以便表单提交，但带有红色/蓝色的span保留在页面上。

尝试作为

 $(document).ready(function () {
     $(".color").click(function (e) {
         if ($(this).attr("value") == "red") {
             $("#red").show();
             $("#blue").hide();
         }
         if ($(this).attr("value") == "blue") {
             $("#blue").show();
             $("#red").hide();
         }
         e.preventDefault();
     });
 });

演示

好吧。。。因此，让我们分解来了解正在发生的事情：

这里有两条输入线：

<input onchange="this.form.submit();" class="color" type="radio" name="rdSpace" value="red" checked="">RED
<input onchange="this.form.submit();" class="color" type="radio" name="rdSpace" value="blue">BLUE

您已将onchange事件设置为this.form.submit();。

因此，当radio的值发生变化时，这将尝试以this.form.submit(); 中提到的形式submit

单击任何单选按钮时，jQuery检测到事件并冒泡所需的操作（show();/hide();），但完成后，控件返回到onchange并尝试submit，form被包裹在-中，因此出现错误

我建议您添加一个submit按钮，而不是触发事件，因为它会导致问题，或者您可以使用另一个答案中提到的javascript:e.preventDefault()！

相关文章：