如何在 jQuery 中不提交表单答案

【问题标题】：How to not to submit form in jQuery如何在 jQuery 中不提交表单
【发布时间】：2017-02-07 18:11:46
【问题描述】：

我有一个关于我在我的网站上尝试的代码的问题。我想最小化文字的大小，所以我尝试通过简单的点击来隐藏对象。但这确实总是提交我的表单。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("table").hide();
    });
    $("#show").click(function(){
        $("table").show();
    });
});
</script>
</head>
<body>


<table style="border:solid #FFFFFF 2px;
background-color:#0000ff;height:1px;width:300px;
text-align:left;" "empty-cells:hide;" border="1" cellpadding="1" cellspacing="1">
    <tr>
        <th>Test</th>
        <th>Extras</th>
        <th>Extras</th>
    </tr>
</table>
<br>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

[submit class:button id:form-submit "Send"]

【问题讨论】：

您的 HTML 中没有可以提交的 <form> 元素...？
您的代码运行良好。单击隐藏/显示按钮是否提交了您的表单？
嗨！是的，单击隐藏显示按钮确实提交了我的表单。现在还使用了一个接受框来添加一个条件，这样它就不会立即发送它
大家好，感谢您的帮助，并为迟到的回复感到抱歉。我找到了另一种更简单的方法。
这里无论您想用 + 按钮隐藏什么

标签： javascript jquery html forms contact-form-7

【解决方案1】：

您需要对事件使用 .preventDefault() 函数。当您单击按钮时，这会阻止发送。请注意，您需要在参数 (e) 中发送事件。

一个例子：

$("#hide").click(function(e){
    e.preventDefault();
    $("table").hide();
});

【讨论】：

如果任何建议对您有用，请将它们标记为已回答：)
Salut Francois，感谢您的帮助，并为迟到的回复感到抱歉。我找到了另一种更简单的方法。
这里无论你想用 + 按钮隐藏什么

【解决方案2】：

这是一个带有缩短脚本的解决方案

$(document).ready(function(){
    $("#switch").click(function(){
        $("table").toggle();
        $("#switch").text(($("#switch").text() == "Hide") ? "Show" : "Hide");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="border:solid #FFFFFF 2px;
background-color:#0000ff;height:1px;width:300px;
text-align:left;" "empty-cells:hide;" border="1" cellpadding="1" cellspacing="1">
    <tr>
        <th>Test</th>
        <th>Extras</th>
        <th>Extras</th>
    </tr>
</table>
<br>

<button id="switch">Hide</button>

【讨论】：

您好，banzay，感谢您的帮助，并为迟到的回复感到抱歉。我找到了另一种更简单的方法。
这里无论你想用 + 按钮隐藏什么
您找到了一个很好的解决方案。无论如何，我的回答严格针对您的问题主题。您要求使用 jquery 最小化写作大小的解决方案，并且您得到了您所要求的。我的第二个注意事项是我的解决方案保持了更好的代码可读性和理解力。尽管如此，您的解决方案不需要 jquery 链接，这也很好。

【解决方案3】：

在按钮中添加type="button"

<button type="button" id="hide">Hide</button>
<button type="button" id="show">Show</button>

【讨论】：

您好 Parves，感谢您的帮助，并为迟到的回复感到抱歉。我找到了另一种更简单的方法。
这里无论你想用 + 按钮隐藏什么

【解决方案4】：

好吧，这里没有元素，现在显示和隐藏可以正常工作。但是可能当您以某种形式使用它时，就会出现问题。要解决该问题，请使用以下各项：

$(document).ready(function(event){
    $("#hide").click(function(){
        $("table").hide();
        return false;
    });
    $("#show").click(function(){
        $("table").show();
        return false;
    });
});

--或--

$(document).ready(function(event){
    event.preventDefault();
    $("#hide").click(function(){
        $("table").hide();
    });
    $("#show").click(function(){
        event.preventDefault();
        $("table").show();
    });
});

【讨论】：

嗨 Manish ji，感谢您的帮助，并为迟到的回复感到抱歉。我找到了另一种更简单的方法。
这里无论您想用 + 按钮隐藏什么
没问题 :-) 如果您觉得我的回答有帮助，请点赞。

【解决方案5】：

没有任何进一步的问题，这更容易工作

> <button title="Click to show/hide content" type="button"
> onclick="if(document.getElementById('Funktionen')
> .style.display=='none') {document.getElementById('Funktionen')
> .style.display=''}else{document.getElementById('Funktionen')
> .style.display='none'}">+</button> <div id="Funktionen"
> style="display:none;">   HERE COMES IN WHATEVER YOU WANT TO HIDE WITH
> the + Button </div>

【讨论】：