Bootstrap模态提交不传递变量

时间:2015-12-27 23:41:08

标签: javascript jquery twitter-bootstrap

我有一个简单的模态登录表单。当表单关闭时,我想在单独的div中显示电子邮件。 问题是div中的文本没有改变。我调试了代码,看起来当我单步执行文本更改时,但当它退出提交函数时,它会被更改回来。我究竟做错了什么? TNX! 这是代码:

 <div class="container">
    <button class="btn btn-success" data-toggle="modal" data-target="#myModal" id="testButton">Open modal</button>
    <div id="emailTarget">Email ends up here</div>

    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">x</button>
                    <h4 class="modal-title">Please type some text</h4>
                </div>

                <div class="modal-body">
                    <form class="form-signin" id="signIn">
                        <h2 class="form-signin-heading">Please sign in</h2>
                        <label for="inputEmail" class="sr-only">Email address</label>
                        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
                        <label for="inputPassword" class="sr-only">Password</label>
                        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                        <div class="checkbox">
                          <label>
                            <input type="checkbox" value="remember-me"> Remember me
                          </label>
                        </div>
                        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
<script>
    $("#signIn").submit(function(event) {
       $("#emailTarget").html($("#inputEmail").val());
    });
</script>

1 个答案:

答案 0 :(得分:0)

如果您不想发布POST,只需返回false:

   $('#myModal').modal('hide');
   return false;

Check example