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.