Jquery 按钮触发表单提交答案

【问题标题】：Jquery button triggers form submitJquery 按钮触发表单提交
【发布时间】：2017-02-15 17:19:44
【问题描述】：

The following script enables users to prompt a value into the input field of a form:

    <script>
    $(document).ready(function(){
    $("button").click(function(){
        $('input[name="fine"]').val(computeEndTime($('input[name="ini"]').val()));
    });
    function computeEndTime(ini){
        var parts = ini.split(/[:,\s\.]+/).map(Number);
        var hourstart = parseInt(parts.shift());
        var minutestart  = parseInt(parts.shift());
        var totalm = (hourstart * 60) + minutestart + 100;
        var minutes = totalm%60;
        var hours = (totalm - minutes) / 60;
        return hours + ":" + minutes;
    }   
});
</script>

HTML 表单是这样的：

<form action="next.php" method="POST">
    <input type="text" name="ini" maxlength="5" />
    <input type="text" name="fine" maxlength="5" />
    <button>100</button>
    <input type="submit" name="invia" value="go on" />
</form>

如您所见，脚本将输入的时间值输入"ini"，并通过按钮提示输入另一个时间值"fine"（初始值+100分钟）。

我遇到的问题是，当按钮<button> 被按下时，表单的另一个提交按钮也被触发，并且用户立即被重定向到页面 next.php。

如何避免这种情况，并要求用户按下提交按钮？

【问题讨论】：

标签： jquery forms button click

【解决方案1】：

这应该可以解决问题

$("button").click(function(e){
   $('input[name="fine"]').val(computeEndTime($('input[name="ini"]').val()));
   e.preventDefault();
});

【讨论】：

尽量不要使用button作为选择器，这会触发文档中的任何按钮。给它一个标识符
你能告诉我如何给按钮一个标识符并在脚本中指向它吗？如果我有多个<button>？
然后您可以使用 $("button#someId") 选择它
太棒了。很有帮助。

【解决方案2】：

将按钮改为

<button type="button">100</button>

默认是type="submit"，所以它提交表单。

【讨论】：