你能在jQuery模态框中提交表单吗？

Question

我有一个表单在jquery ui模态对话框中，当我点击提交按钮时，没有任何反应。有没有一种方法可以在不必在javascript中编写按钮的情况下提交jquery模态对话框内的表单？

这是我的代码片段：

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

如果我去掉"modal: true"，使对话框非模态，它将会提交。

- Jamie

---

相关内容：https://dev59.com/j1PTa4cB1Zd3GeqPkY0X - Haim Evgi

海姆，我看到了这篇文章 - 稍微不同的情况是因为在提供的URL中，jquery对话框只是确认提交操作，而我的表单是模态对话框的一部分。我也尝试过实现这个，但没有成功（它也不会提交我的表单）。 - Jamie

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');   
         }

    }
});

只需给您的选择标签添加一个ID，这样更容易获取其值。同时，删除输入按钮，因为现在您将从对话框中获得保存按钮。

- z.eljayyo

---

嗨，Ziad，感谢您的回复。这让我更接近目标了。服务器返回一个页面，我应该被重定向到该页面。您有什么想法可以让我在对话框内重定向到该页面吗？ - Jamie

@Jamie：在成功函数中使用window.location=<YOUR_NEW_LOCATION>。 - Kamyar

Kamyar，你是正确的，Jaime; 请用Kamyar提供的建议代码替换"alert(data);"。 - z.eljayyo

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>

- Kamyar

---

我尝试了您的建议，添加了以下内容; $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); $("#dialog").parent().appendTo($("form:first")); return false; });但是没有成功 - 屏幕变灰，但对话框从未出现。 - Jamie

尝试为您的表单添加一个id属性：<form id="myform">，并将 $("#dialog").parent().appendTo($("form:first")); 移动到 $("#opener").click... 之前。 - Kamyar

嗨Kamyar，我尝试了你的代码建议。对话框加载了，但是当我单击“创建”按钮时仍然没有任何反应。 - Jamie