Javascript 表单提交，尽管单击的按钮不是提交按钮

我使用jQuery通过两步表单前进。首先输入URL，然后输入电子邮件，然后提交表单

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

所有工作正常，除非您提交表单并单击“下一步”按钮，否则表单将尝试提交，这将导致错误消息

过程： 1.输入地址 2.单击“下一步按钮” 3.URL输入字段淡出，电子邮件输入字段淡入 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
        });
});

jQuery（文档）.ready（函数（$）{
$（“#下一步”）。在（“单击”）上，函数（e）{
$（此）。替换为（“提交”）；
$（'input[name=link]'）。hide（）；
$（'input[name=email]'）。show（）；
});
$（“#请求”）。提交（函数（e）{
//检查电子邮件是否正确
如果（！IsEmail（$（'input[name=email]'）.val（））{
$（'input[name=email]'）。在（'Invalid email address'）之前；
e、 预防默认值（）；
}否则{
//获取输入字段
var link=$（'#请求输入[name=link]'）。val（）；
var email=$（'#请求输入[name=email]'）。val（）；
var nonce=$（'#请求输入[name=my_nonce]'）。val（）；
如果（链接！=''&&电子邮件！=''）{
变量$btn=$（'submitbutton'）。按钮（'loading'）；
$.post（'/addrequest/'，{link:link，email:email，nonce:nonce}，函数（数据）{
$（“#请求输入[name=link]”）。val（“”）；
$（“#请求输入[name=email]”）。val（“”）；
$btn.按钮（“重置”）；
$（“#提交按钮”）。替换为（“下一步”）；
$（“输入[名称=电子邮件]”）.hide（）；
$（“输入[名称=链接]”）.show（）；
$（'success'）.fadeIn（）；
});
返回false；//？确保表单不会提交两次
}               
}//结束其他
});
});

编辑：

我包括了

type='button'

。但是，一旦您提交表单一次并重试，“下一步”按钮就不起作用了

---

jsiddle:

在您不想触发提交的按钮中添加

type='button'

替换此项：

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

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

---

但是有一个新的

id

总是安全的，所以它不会在一开始触发函数，只会在它被添加回来时触发。

在您不想触发提交的按钮中添加

type='button'

替换此项：

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

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

---

但是拥有一个新的

id

总是安全的，因此它不会首先触发函数，只会在它被添加回来时触发。

因为

表单中的任何
按钮
（除了
提交
之外没有特定类型）总是被视为提交按钮，并触发提交事件，您需要将按钮的类型指定为
按钮
，以防止此行为

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

$（'submitbutton'）。替换为（“下一步”）；
由于
表单
标记中的任何
按钮
（没有除
提交
以外的特定类型）始终被视为提交按钮，并触发提交事件，因此需要将按钮的类型指定为
按钮
，以防止此行为

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

$（'submitbutton'）。替换为（“下一步”）；
请添加相关的CSS和HTML代码。在您发布的url中，使用name='email'的无效表单控件不可聚焦。当遵循您已经提到的步骤时，添加相关的HTML或创建一个JS提琴来复制您的案例。不要让我们参考一些外部链接，我们不知道内容是什么。可能是@SPi的重复我已经更新了我的答案，看一看。请添加相关的CSS和HTML代码。在你发布的url中，它抛出了一个无效的表单控件，名为='email'，不可聚焦。当遵循您已经提到的步骤时，添加相关的HTML或创建一个JS提琴来复制您的案例。不要让我们参考一些外部链接，我们不知道内容是什么。可能重复@SPi我已经更新了我的答案，看一看。谢谢！您能帮助我理解为什么我的方法不正确吗？@SPi
$（文档）。on
适用于静态和动态内容，而
$（“元素”）。on
仅适用于静态内容。谢谢！您能帮助我理解为什么我的方法不正确吗？@SPi
$（文档）。on
适用于静态和动态内容，而
$（“元素”）。on
仅适用于静态内容。
$('#submitbutton').replaceWith("<button type='button' id='next' class='btn btn-conf btn-green'>NEXT</button>");