it-swarm.com.ru

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

Недавно я возился с загрузкой Twitter, используя Java/jboss, и я пытался отправить форму из модального интерфейса, форма содержит только скрытое поле, и ничего более, так что показ и т.д. не важны.

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

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

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

Обновлено 2018

Вы хотите закрыть модал после отправки? Независимо от того, находится ли форма внутри модальной или внешней, вы можете использовать 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;
         });
      */
});

Пример Bootstrap 3


Пример Bootstrap 4

26
Zim

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

14
rjacobsen0

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

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

1
Mike

Просто

<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>

1
Jonh bert

Вы также можете каким-то образом обмануть, скрыв кнопку «Отправить» в своей форме и вызвав ее, когда вы нажмете на модальную кнопку. 

0
Robin P