You can submit the form in the jquery modal dialog

Question

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

Here is my piece of code,

<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 modeless, it will be sent.

Answer 1

you can use $ .post () or $ .ajax () from your dialog, for example:

 $( "#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 point your select id tag to ...... to make it easier to pull the value. also get rid of the enter button, since now you will have a save button from the dialog box.

Answer 2

You need to move the dialog back to the form. Do this after creating a dialog. eg:

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

UPDATE: Why is your form included in the dialog? Do you have two forms? Try moving the form into a container. Below is the complete code, which 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>