Вы можете отправить форму в модальном диалоговом окне jquery

Question

У меня есть форма в модальном диалоговом окне jquery ui, когда я нажимаю кнопку отправки, ничего не происходит.Есть ли способ отправить форму в модальном диалоговом окне jquery без необходимости кодировать кнопки в javascript?

Вот мой фрагмент кода;

    <script>
    // increase the default animation speed to exaggerate the effect

    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,
            draggable: false,
            resizable: false,
                    modal: true,

        });

        $( "#opener" ).click(function() {
            $( "#dialog" ).dialog( "open" );
            return false;
        });
    });

    function SetValues()
    {
        var s = 'X=' + window.event.clientX +  ' Y=' + window.event.clientY ;
        document.getElementById('divCoord').innerText = s;

    } 
    </script>

<div id="dialog" title="new task">
        <form method="post" action="/projects/{{ project.slug }}/">
            <div class="form-row">
                <label class="required" for="title">task type</label>
                <select name="type">
                {% for TaskType in project.tasktype_set.all %}
                    <option value="{{ TaskType.name }}">{{ TaskType.name }}</option>
                {% endfor %}
                </select>
            </div>
            <div id="buttons">
                <input type="submit" value="create"/>
            </div>
        </form>
</div>

<button id="opener">new task</button>

if I remove "modal: true", чтобы сделать диалоговое окно немодальным, оно будет отправлено.

Answer 1

вы можете использовать $ .post () или $ .ajax () из своего диалогового окна, например:

$( "#dialog" ).dialog({
    autoOpen: false,
    draggable: false,
    resizable: false,
    modal: true,
    buttons: {
        "Save": function() {
            var type = $("#type option:selected").val();
            $.post("/projects/{{project.slug}}/", {type:type}, function(data) {
                alert(data);// ---> data is what you return from the server
            }, 'html');
         },
         "Close": function(){
            $(this).dialog('close');   
         }

    }
});

, просто назначьте свой тег select идентификатору ......, что упрощаеттянуть значение.также избавьтесь от кнопки ввода, так как теперь у вас будет кнопка сохранения из диалогового окна.

Answer 2

Вы должны переместить диалог обратно в форму.Сделайте это после создания диалога.как:

$("#dialog").parent().appendTo($("form:first"));  

ОБНОВЛЕНИЕ: Почему ваша форма включена в ваш диалог?У вас есть две формы?Попробуйте переместить форму в контейнер.Ниже приведен полный код, который, я думаю, должен работать:

    <script>
// increase the default animation speed to exaggerate the effect

$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        draggable: false,
        resizable: false,
                modal: true,

    });

    $("#dialog").parent().appendTo($("form:first"));

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
        return false;
    });
});

function SetValues()
{
    var s = 'X=' + window.event.clientX +  ' Y=' + window.event.clientY ;
    document.getElementById('divCoord').innerText = s;

} 
</script>

<form id="form1" method="post" action="/projects/{{ project.slug }}/">
    <div id="dialog" title="new task">
        <div class="form-row">
            <label class="required" for="title">task type</label>
            <select name="type">
            {% for TaskType in project.tasktype_set.all %}
                <option value="{{ TaskType.name }}">{{ TaskType.name }}</option>
            {% endfor %}
            </select>
        </div>
        <div id="buttons">
            <input type="submit" value="create"/>
        </div>
    </div>
</form>

<button id="opener">new task</button>