Twitter Bootstrap Модальная форма Отправить

Я недавно занимался twitter bootstrap, используя java/jboss, и я пытался отправить форму из модального интерфейса, форма содержит только скрытое поле, и ничто другое, отображающее и т.д., не имеет значения.

Форма внешняя по отношению к самому модальному, и я просто не могу понять, как это будет возможно

Я попытался добавить сам модал в форму, пытаясь использовать форму HTML5 = "form_list" и даже добавить форму в модальное тело и использовать некоторый jquery, чтобы заставить submit, но ничего не работает

Ниже приведен образец модальности, который я пытался увеличить до нужного мне, кнопка 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>

Ответы

Ответ 1

Вы хотите закрыть мода после отправки? Является ли форма внутри модальной или внешней по отношению к ней, вы должны использовать jQuery ajax для отправки формы.

Вот пример с формой внутри модального:

<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;
         });
      */
});

Работа над Bootply: http://bootply.com/59864

Ответ 2

Этот ответ задерживается, но я все равно надеюсь, что это поможет кому-то. Как и вы, я также затрудняюсь с отправкой формы, которая была вне моего модального метода загрузки, и я не хотел использовать 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. Вы можете, конечно, называть его тем, что подходит для вашей конкретной ситуации.

Ответ 3

Старый, но, возможно, полезен для читателей, чтобы иметь полный пример использования модального.

Мне нравится следующее (рабочий пример 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.

Ответ 4

Вы также можете обмануть, нажав кнопку отправки в своей форме и вызывая ее при нажатии на вашу модальную кнопку.