尽管单击的按钮不是提交按钮，但表单提交答案

【问题标题】：Form submits although button clicked is not a submit button尽管单击的按钮不是提交按钮，但表单提交
【发布时间】：2015-11-19 00:48:08
【问题描述】：

我使用 jQuery 来推进一个两步表单。首先输入 URL，然后输入电子邮件，然后提交表单。

提交后，表单应重置。因此，提交按钮被替换为“下一步”按钮（从第一步开始），电子邮件输入字段被 URL 输入字段替换。

一切正常，除了当您提交表单并单击“下一步”按钮时，表单尝试提交会导致错误消息。

过程： 1.输入网址 2.点击“下一步按钮” 3. URL输入框淡出，email输入框淡入 4. 输入电子邮件 5.点击提交 6.表单提交正确 7.输入框和按钮重置正确 8. 输入网址 9. 点击“下一步” 10. 错误 - 表单尝试提交

为什么您没有点击type='submit'按钮，表单却尝试提交？

jQuery(document).ready(function($){

$("#next").on( "click", function(e) {

 $( this ).replaceWith("<button class='btn btn-conf btn-green' id='submitbutton' name='submit' type='submit'>Submit</button>");

 $('input[name=link]').hide();
 $('input[name=email]').show();

 });


$('#request').submit(function(e){

    //check if email is correct
    if(!IsEmail($('input[name=email]').val())){

    $('input[name=email]').before('<label class="control-label warning" for="inputWarning2">Invalid email address</label>');

    e.preventDefault();

    } else {            

        // get input fields
        var link = $('#request input[name=link]').val();
        var email = $('#request input[name=email]').val();
        var nonce = $('#request input[name=my_nonce]').val();

            if(link != '' && email != ''){
            var $btn = $('#submitbutton').button('loading');

                $.post('/addrequest/', { link:link,email:email,nonce:nonce}, function( data ) {

                    $('#request input[name=link]').val('');
                    $('#request input[name=email]').val('');
            $btn.button('reset');                   

  $('#submitbutton').replaceWith("<button id='next' class='btn btn-conf btn-green'>NEXT</button>");

        $("input[name=email]").hide();  
        $("input[name=link]").show();
        $('#success').fadeIn();         
                });
            return false; // ?Ensure that the form does not submit twice    
            }               

} // end else
        });
});

编辑：

我包括type='button'。但是，现在“下一步”按钮不起作用，一旦您提交了一次表单，然后再试一次。

JSFiddle： https://jsfiddle.net/52VtD/12343/

【问题讨论】：

请添加相关的CSS和HTML代码。
在您发布的 url 中抛出了 name='email' 的无效表单控件不可聚焦。按照您提到的步骤进行时
正如@Zeratops 已经提到的，添加相关的 HTML 或创建一个 JS 小提琴来重现您的案例。不要向我们推荐一些我们不知道内容是什么的外部链接。
How to prevent buttons from submitting forms的可能重复
@SPi 我已经更新了我的答案，看看。

标签： javascript jquery forms

【解决方案1】：

在您不想触发提交的按钮中添加type='button'。

替换这个：

$('#submitbutton').replaceWith("<button id='next' class='btn btn-conf btn-green'>NEXT</button>");

与：

$('#submitbutton').replaceWith("<button id='next' type='button' class='btn btn-conf btn-green'>NEXT</button>");

更新

因为下一个按钮被添加回 DOM 而不是这样做：

$("#next").on("click", function (e) {

});

这样做： 对于新的“下一步按钮”

$(document).on("click", "#next", function (e) {
  // code here
});

Fiddle

但拥有一个新的id 始终是安全的，因此它一开始不会触发该功能，只有在添加回来时才会触发。

【讨论】：

谢谢！你能帮我理解为什么我的方法不正确吗？
@SPi $(document).on 适用于静态和动态内容，而 $("element").on 仅适用于静态内容。

【解决方案2】：

由于form 标记中的任何button（除了submit 之外没有特定类型）始终被视为提交按钮，并触发提交事件，您需要指定按钮的类型为button 以防止这种行为。

$('#submitbutton').replaceWith("<button type='button' id='next' class='btn btn-conf btn-green'>NEXT</button>");

【讨论】：