您可以在 jquery 模态对话框中提交表单吗

Posted 2023-02-24

【中文标题】您可以在 jquery 模态对话框中提交表单吗

【英文标题】：can you submit a form within a jquery modal dialog

【发布时间】：2011-07-28 12:51:33

【问题描述】：

我在 jquery ui 模式对话框中有一个表单，当我单击提交按钮时没有任何反应。有没有办法在 jquery 模态对话框中提交表单而无需在 javascript 中编写按钮代码？

这是我的代码 sn-p;

    <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”以使对话框非模态，它将提交。

【问题讨论】：

相关***.com/questions/4743751/…

Haim，我看过这篇文章 - 情况略有不同，因为在提供的 URL 中，jquery 对话框只是确认提交操作，而我的表单是模式对话框的一部分。我也尝试过实现这一点，但没有成功（它也不会提交我的表单）。\

【参考方案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 ...... 可以更轻松地提取值。也摆脱了输入按钮，因为现在您将拥有对话框中的保存按钮。

【讨论】：

您好 Ziad，感谢您的回复。这让我更接近了。服务器返回一个我应该被重定向到的页面。关于如何从对话框中重定向到此的任何想法？

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

卡米亚你是对的，詹姆；替换“警报（数据）；”使用 Kamyar 建议的代码。

【参考方案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>

【讨论】：

我通过添加以下内容尝试了您的建议； $( "#opener" ).click(function() $( "#dialog" ).dialog( "open" ); $("#dialog").parent().appendTo($("form:first")); return false; ); 不走运 - 屏幕变灰，但对话从未出现。

尝试在表单中添加 id 属性：<form id="myform"> 并将$("#dialog").parent().appendTo($("form:first")); 移动到$("#opener").click... 之前

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