如何防止在引导弹出窗口中提交表单？ [英] How to prevent form from submitting when within bootstrap popover?

问题描述

我遇到了一个问题，我希望任何人都可以澄清。我使用引导弹窗来触发登录表单。我想使用ajax验证用户和密码，但是我无法使用preventDefault（）和stopPropagation（）来阻止表单事件中的默认提交事件。

<找到下面的代码只是为了看看你能给我一只手，并知道发生了什么。
$ b 注释：
$ b $ 1）弹出式触发器是id =signin_popover_trigger
2）弹出窗口内容是class =signin_popover_content中的html代码。

HTML代码：

 < a href =javascript：void（0）id =signin_popover_triggerclass =popover_triggerdata-name =signin data-toggle =popover>登入< / a> 
< div class =signin_popover_content> 
< div class =signin_wrapper> 
< form class =user_access_formmethod =post> 
< h4 class =blue weight-bold>登入< / h4> 
< label class =grey weight-normal>电子邮件地址：< / label> 
< input type =textname =user_emailclass =form-control margin-bottom> 
< label class =grey weight-normal>密码：< / label> 
< input type =passwordname =passwordclass =form-control margin-bottom> 
< input type =submitclass =btn btn-info margin-top user_access_submitname =sign_in_submitvalue =Sign in> 
< / form> 
< / div> 
< / div> 
  

Javascript代码：
$ b $ （）函数（事件）{
event.stopPropagation（）;
event.preventDefault（）;
//验证码在这里
}）;

$ b $（'＃signin_popover_trigger'）。popover（{
html：true，
content：function（）{
return $（'。 signin_popover_content'）。html（）;
}，
placement：'bottom'，

}）;

CSS代码

  .signin_popover_content {
 display：none; 
 
 $ / code> 

事实上，如果表单未放入弹出窗口。



谢谢!!!

解决方案

回答。 Bootstrap弹出窗口不允许向侦听器添加任何事件。解决方法如下：



  $（document）.on（'submit'，'.popover .user_access_form'，function （event）{
 event.preventDefault（）; 
 // Code here 
}）; 
  

感谢MrCode提供的答案。
干杯。

I'm experiencing an issue I hope anybody can clarify. I'm using bootstrap popover to trigger a login form. I would like to validate the user and password using ajax, but I'm not able to prevent the default submit event from the form event using preventDefault() and stopPropagation().

Find the code below just to see you can give me a hand and know what is going on. Thanks in advance.

Notes:

1) The popover trigger is the element with the id="signin_popover_trigger" 2) The popover content is the html code within the class="signin_popover_content"

HTML code:

<a href="javascript:void(0)" id="signin_popover_trigger" class="popover_trigger" data-name="signin" data-toggle="popover">Sign in</a>
<div class="signin_popover_content">
    <div class="signin_wrapper">
        <form class="user_access_form" method="post">
        <h4 class="blue weight-bold">Sign in</h4>
        <label class="grey weight-normal">Email:</label>
        <input type="text" name="user_email" class="form-control margin-bottom">
        <label class="grey weight-normal">Password:</label>
        <input type="password" name="password" class="form-control margin-bottom">
        <input type="submit" class="btn btn-info margin-top user_access_submit" name="sign_in_submit" value="Sign in">
        </form>
    </div>
</div>

Javascript code:

$('.user_access_form').submit(function(event){
    event.stopPropagation();
    event.preventDefault();
    //Validation code here
});


$('#signin_popover_trigger').popover({
    html: true,
    content: function(){
        return $('.signin_popover_content').html();
    },
    placement: 'bottom',

});

CSS code

.signin_popover_content {
    display: none;
}

The fact is that the form is stopped correctly if it's not put into the popover.

Thank you!!!

解决方案

I just discovered the answer. Bootstrap popover doesn't allow to add any event to the listener. The workaround would be the following:

$(document).on('submit', '.popover .user_access_form', function(event) {
     event.preventDefault();
     //Code here
});

Thanks MrCode for providing the answer. Cheers.

这篇关于如何防止在引导弹出窗口中提交表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！