表单提交，虽然点击按钮不是提交按钮

我使用jQuery通过2步骤的形式前进。首先你输入一个URL，然后输入你的电子邮件，然后你提交表单。表单提交，虽然点击按钮不是提交按钮

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

所有的工作都很好，除非您提交表单并单击下一步按钮，表单会尝试提交错误消息中的结果。

流程：1. 输入网址 2.单击“下一步按钮” 3.网址输入栏淡出，电子邮件输入字段 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/

来源

2015-08-25 SPi

请添加相关的CSS和HTML代码。 –

在你已经发布的网址中发现它的名称='email'的无效表单控件不可聚焦。当你跟随步骤提到 – Akki619

作为@Zeratops已经提到，添加相关的HTML或创建一个JS小提琴重现你的情况。不要将我们引用到一些外部链接，我们不知道内容是什么。 –

添加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所以不会触发功能当它被添加回来时触发。

来源

2015-08-25 10:59:43

谢谢！你能帮我理解为什么我的方法不正确吗？ – SPi

@spi'$（document）.on'适用于静态和动态内容，而'$（“element”）。on'只适用于静态内容。 – rybo111

由于任何button（不超过submit其他特定类型）在form标签总是被视为一个提交按钮，并触发提交事件，你需要指定按钮的类型button防止这种行为。

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

来源

2015-08-25 11:24:07

表单提交，虽然点击按钮不是提交按钮

回答

相关问题