在JavaScript和HTML中使用按钮

如何解决在JavaScript和HTML中使用按钮

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

我通过从不同来源学习来创建表格。一切似乎都正常，直到我必须单击带有“另存为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"我没有结果，对不起

解决方法

您需要按钮类型'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>

,

• 如果我点击按钮内的文本“另存为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>

其中“ {另存为TXT}”是您以前在<a>的{​​{1}}中使用的代码。

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

然后，由于您摆脱了type="button"标记，因此需要将用于监听<a>标记点击的所有监听器附加到<a>。

为此，请替换：

<button>

使用

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

    // things to do on submit...

});

查看实际效果：

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

    // things to do on submit...

});