首页 文章

Twitter Bootstrap模式表单提交

提问于
浏览
14

我最近一直在使用twitter引导程序摆弄,使用java / jboss,我一直试图从Modal界面提交表单,表单只包含一个隐藏字段,没有别的因此显示等等并不重要 .

表单是模态本身的外部,我无法弄清楚这是如何实现的

我尝试将模态本身添加到表单中,尝试使用HTML5 form =“form_list”,甚至将表单添加到模态体并使用一些jquery强制提交,但似乎没有任何工作

下面是我试图增加到我需要的示例模态,OK按钮之前编辑试图调用jquery函数 .

<div class='modal small hide fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
        <div class='modal-header'>
            <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
            <h3 id='myModalLabel'>Delete Confirmation</h3>
        </div>
        <div class='modal-body'>
            <p class='error-text'>Are you sure you want to delete the user?</p>
        </div>");
        <div class='modal-footer'>
        <button class='btn btn-danger' data-dismiss='modal' aria-hidden='true'>Cancel</button>
        <button class='btn btn-success' data-dismiss='modal'>Ok</button>
        </div>
    </div>

5 回答

  • 1

    简单

    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" onclick="event.preventDefault();document.getElementById('your-form').submit();">Save changes</button>
    
  • 26

    Updated 2018

    你想在提交后关闭模态吗?无论是在模态内部还是外部模式,您都应该能够使用jQuery ajax来提交表单 .

    以下是 form inside the modal 的示例:

    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
    
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Modal header</h3>
        </div>
        <div class="modal-body">
            <form id="myForm" method="post">
              <input type="hidden" value="hello" id="myField">
                <button id="myFormSubmit" type="submit">Submit</button>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary">Save changes</button>
        </div>
    </div>
    

    jQuery ajax 获取表单字段并提交它..

    $('#myFormSubmit').click(function(e){
          e.preventDefault();
          alert($('#myField').val());
          /*
          $.post('http://path/to/post', 
             $('#myForm').serialize(), 
             function(data, status, xhr){
               // do something here with response;
             });
          */
    });
    

    Bootstrap 3 example


    Bootstrap 4 example

  • 12

    这个答案很晚,但我还是发帖,希望能帮助别人 . 像你一样,我也很难提交一个超出我的bootstrap模式的表单,我不想使用ajax,因为我想要加载一个全新的页面,而不仅仅是当前页面的一部分 . 经过多次试验和错误后,这个jQuery对我有用:

    $(function () {
        $('body').on('click', '.odom-submit', function (e) {
            $(this.form).submit();
            $('#myModal').modal('hide');
        });
    });
    

    为了完成这项工作,我在模态页脚中完成了这项工作

    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary odom-submit">Save changes</button>
    </div>
    

    注意odom-submit类的添加 . 当然,您可以根据自己的具体情况命名 .

  • 0

    旧的,但也许对读者有用,有一个如何使用模态的完整例子 .

    我喜欢以下(working example jsfiddle):

    $('button.btn.btn-success').click(function(event)
    {
    
    event.preventDefault();
    
    $.post('getpostcodescript.php', $('form').serialize(), function(data, status, xhr)
        {
            // do something here with response;
            console.info(data);
            console.info(status);
            console.info(xhr);
        })
        .done(function() {
            // do something here if done ;
            alert( "saved" );
        })
        .fail(function() {
            // do something here if there is an error ;
            alert( "error" );
        })
        .always(function() {
            // maybe the good state to close the modal
            alert( "finished" );
            // Set a timeout to hide the element again
            setTimeout(function(){
              $("#myModal").hide();
            }, 3000);
        });
    });
    

    为了更容易处理模态,我建议使用eModal,它允许在基本使用bootstrap 3模态时更快 .

  • 0

    您还可以通过隐藏表单上的提交按钮并在单击模式按钮时触发它来以某种方式作弊 .

相关问题