你可以提交一個jQuery的模式對話框內的表格

Question

我有一個表單裏面的jQuery UI模式對話框，當我點擊提交按鈕沒有任何反應。有沒有辦法在jQuery模式對話框中提交表單，而不必在JavaScript中編碼按鈕？

這是我的代碼片段;

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

如果我刪除「模態：真」，使對話框非模態，它將提交。

Answer 1

，你可以使用$。員額（）或$。阿賈克斯（）你的對話框如中：

$("#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來......使得它更容易拉值。也擺脫了輸入按鈕，因爲現在你將有對話框中的保存按鈕。

Answer 2

您必須將對話框移回到您的表單中。創建對話框後執行此操作。像：

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

UPDATE： 爲什麼被包含在你的表格對話框？你有兩種形式？嘗試將表單移動到容器中。下面是完整的代碼，我認爲應該工作：

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