使用带有 JavaScript 和 HTML 的按钮 [重复]

Question

我知道，标题似乎导致了一个重复/无用的问题，但我在其他问题中找不到解决方案。在结束我的问题之前，让我更好地解释并阅读以下内容。

我通过从不同来源学习创建了一个表单。一切似乎都很好，直到我必须点击提交按钮，上面写着“另存为 TXT”。发生了一件很奇怪的事情：

• 如果我点击按钮内的文本“另存为 TXT”，它会正确提交我的数据；
• 如果我单击按钮的“另存为 TXT”文本周围的彩色部分，它会刷新页面。

我想我找到了发生这种情况的原因，但我无法解决它。这似乎与我的 HTML 代码和我的 JavaScript 代码有关。这是它的一部分：

Javascript

$(function(){
    $("#submitLink").click(function(event){

       // things to do on submit...

});
});

HTML

<form method="post" name="myForm" action="" id="formToSave">

    <!-- some fields to compile... -->

    <div class="input-group mb-3">
        <button class="btn btn-primary btn-lg" id="align" type="submit"><a href="javascript://Save as TXT" id="submitLink">Save as TXT</a></button>
    </div>
</form>

如何更改这部分代码以通过单击按钮上的任意位置成功提交（并执行我在 JS 函数中编写的操作）？

提前致谢，

祝大家编码愉快！

ps。我阅读了您在结束我的问题后添加的this“著名”问题，但这对我没有帮助。通过写type="button" 而不是type="submit" 我没有得到任何结果，对不起

Answer 1

• 如果我点击按钮内的文本“另存为 TXT”，它会正确提交我的数据；

当您点击文本本身时，您点击的是<a> 元素，因此触发了它的事件监听器。

• 如果我单击按钮的“另存为 TXT”文本周围的彩色部分，它会刷新页面。

当你点击按钮的任何部分时，都会触发<button>的事件监听器。

因此，我建议

因此，解决方案似乎是采用 <a> 元素的事件侦听器并将其附加到 <button>。

一种方法是替换

<button class="btn btn-primary btn-lg" id="align" type="submit"><a href="javascript://Save as TXT" id="submitLink">Save as TXT</a></button>

与

<button class="btn btn-primary btn-lg" id="align" onclick="{Save as TXT}" type="button">Save as TXT</button>

其中“{Save as TXT}”是您之前在<a> 的href 中的代码。

您需要添加type="button" 的原因是您可以禁用按钮提交表单的默认行为（并因此刷新页面）。

然后，由于您删除了<a> 标签，您需要将用于侦听<a> 标签点击的所有侦听器附加到<button>。

为此，请替换：

$("#submitLink").click(function(event){

    // things to do on submit...

});

与

$("#align").click(function(event){

    // things to do on submit...

});

查看实际效果：

<form method="post" name="myForm" action="" id="formToSave">

    <!-- some fields to compile... -->

    <div class="input-group mb-3">
        <button class="btn btn-primary btn-lg" id="align" onclick="console.log('Submitted')" type="button">Save as TXT</button>
    </div>
</form>

Answer 2

您需要 BUTTON 类型 'button'，但您已“提交”。所以它想提交重新加载后的表单，使用按钮需要您完成操作。

不需要A标签，所以我删除了它。相反，如果点击角落发生任何事情，现在这个功能

<button type="button" id='btn'>Save as TXT</button>

只是测试一下。

$(function(){
    $("#btn").click(function(event){
        console.log('Submit');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" name="myForm" action="" id="formToSave">
    <div class="input-group mb-3">
        <button class="btn btn-primary btn-lg" id="btn" type="button">Save as TXT</button>
    </div>
</form>