【问题标题】:Display Bootstrap modal window on submit提交时显示引导模式窗口
【发布时间】:2016-12-10 13:03:13
【问题描述】:

对不起菜鸟问题。我已阅读 Show Twitter Bootstrap modal on form submit 并从那里复制粘贴了一些代码,但没有帮助。

我正在尝试在我的页面上实现以下行为:

如果填充了“id_field1”和“id_field2”字段,则当用户按下“提交”按钮时,必须提交表单并显示以下模式窗口:

“[添加另一个]或[重定向到其他页面]?”。

必须显示其他简单警报(必须填写“id_field1”和“id_field2”字段)

但是,如果未填充字段,我的代码当前会呈现模式窗口,并且不提交任何内容。

html

<form method="POST">

    <input class="form-control" id="id_field1" name="field1" type="text" required="">
    <input class="form-control" id="id_field2" name="field2" type="text" required="">         

    <button type="button" class="btn btn-xl btn-success" data-toggle="modal" data-target="#myModal" id="formsubmit">Add item</button>
</form>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Item was successfully added</h4>
            </div>
            <div class="modal-body">
                <p>Add another?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
                <a href="some_url" class="btn btn-primary">No</a>
            </div>
        </div>
    </div>
</div>

jQuery

$(function(){
    $( "#formsubmit" ).click(function() {
        $( "form" ).submit(function(evt){

        field1 = $( '#id_field1' ).val();
        fiedl2 = $( '#id_field2' ).val();

        if((field1 === '') && (field2 === '')){
            alert("You must enter tenant's name and phone at least");
            evt.preventDefault();
        } else {
            $( '#myModal' ).modal('show');
        }
        });
    });
});

非常感谢。

【问题讨论】:

    标签: jquery html twitter-bootstrap bootstrap-modal


    【解决方案1】:

    您必须首先将字段值设置为变量。

    $(function(){
    $( '#formsubmit' ).click(function() {
        var1 = $( '#id_field1' ).val();
        var2 = $( '#id_field2' ).val();
        if((var1 === "") && (var2 === "")) {
            alert("field1 and field2 must be populated");
            return false;
        } else {
            $( '#myModal' ).modal('show');
        }
      });
    });
    

    已更新。

    【讨论】:

    • 完成。现在代码看起来更好了。您还有其他想法吗?
    • 空字段现在应该会显示警报。并且完成的字段应该导致模式显示。你会遇到这两种情况吗?
    • 试试这个:将字段值设置为变量后,放入警报以显示这两个变量。 alert(var1 + ' ' + var2);if 语句开始之前执行此操作。
    • 我已经完全删除了 if/else,只留下了 alert(var1 + ' ' + var2),但没有任何改变,完全一样的行为......
    猜你喜欢
    • 2016-04-25
    • 2015-02-16
    • 1970-01-01
    • 1970-01-01
    • 2013-09-24
    • 2014-05-15
    • 1970-01-01
    • 1970-01-01
    • 2015-07-12
    相关资源
    最近更新 更多