can you submit a form within a jquery modal dialog

Question

I have a form inside a jquery ui modal dialog, when I click the submit button nothing happens. Is there a way to submit a form within a jquery modal dialog without having to code buttons within the javascript?

Here is my code snippet;

    <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," to make the dialog non-modal, it will submit.

Answer 1

you could use the $.post() or $.ajax() from within your dialog e.g.:

$( "#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');   
         }

    }
});

just give your select tag an id to ...... makes it easier to pull the value. also get rid of the input button, since now you will have save button from the dialog.

Answer 2

You have to move the dialog back into your form. Do this after creating the dialog. like:

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

UPDATE: Why is your form included in you dialog? Do you have two forms? Try to move the form to be the container. Below is the full code that I think should work:

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