提交按鈕不能在HTML代碼工作

-1

<!DOCTYPE html> 
<html> 
<head> 
    <title>Modal</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="modalUI.css"> 

    <script src="jquery-3.1.1.js"></script> 
    <script src="jquery-3.1.1.min.js"></script> 

    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css"> 
    <script src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script> 
    <script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#create-user').click(function(){ 
       $('#dialog').dialog("open"); 
      }); 

      $('#dialog').dialog({ 
       draggable: true, 
       resizable: false, 
       closeOnEscape: true, 
       modal: true, 
       autoOpen: false 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1"> 
     <table class="table table-bordered"> 
      <thead> 
       <tr> 
        <th>Firstname</th> 
        <th>Lastname</th> 
        <th>Email</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>John</td> 
        <td>Doe</td> 
        <td>[email protected]</td> 
       </tr> 
       <tr> 
        <td>Mary</td> 
        <td>Moe</td> 
        <td>[email protected]</td> 
       </tr> 
      </tbody> 
     </table><br> 

     <input type="button" value="Show Dialog" id="create-user"/> 
     <div id="dialog" title="Create new User"> 
      <form id="form2" action=""> 
       <label for="name">FirstName</label><br> 
       <input type="text" name="fname" ><br> 

       <label for="lastname">LastName</label><br> 
       <input type="text" name="lname" ><br> 

       <label for="email">Email</label><br> 
       <input type="email" name="email" ><br><br> 

       <button type="submit" value="Submit" id="submitDemo">Submit</button> 
       <button type="reset" value="Reset">Reset</button> 
      </form> 
     </div> 
    </form> 
</body> 
</html>

我的提交按鈕不起作用時，對話框彈出。我應該在我的jQuery上寫什麼？ p.s在div對話框外提交作品。但如何讓它進入對話框？

不介意這個lorem ipsum的東西。（Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，SED做eiusmod tempor incididunt UT labore等dolore麥格納aliqua。UT enim廣告微量veniam， QUIS nostrud實習ullamco laboris暫準UT aliquip前EA commodo consequat。DUIS奧特irure悲在voluptate velit埃塞reprehenderit cillum dolore歐盟fugiat法無pariatur。Excepteur燒結靶occaecat cupidatat非 proident，必須遵守的過失魁正式開通了deserunt mollit阿尼姆ID EST laborum。）

來源

2016-11-25 Wavelet

您是否關閉了$（document）.ready（function（）{{ – m1crdy

}的括號您爲什麼要在提交按鈕單擊時調用submit（）函數？應該自動調用它 – Vaidas

它不自動工作 – Wavelet

在對話框中的提交按鈕不工作，因爲你有嵌套的表格 - form2裏面form1，這是無效的。

將對話框（<div id="dialog"及其中的所有內容）移動到form1之外，並且提交按鈕將按預期方式導致回發。

P.S.儘管問題的標題，這個問題的根本原因是與jQuery甚至Javascript無關。這只是格式不正確的HTML。

來源

2016-11-25 14:52:39 ADyson

非常感謝。有效。另外，如何將數據提交到form1？ – Wavelet

如果你已經完成了我的建議，那麼你在form1中沒有任何數據要提交。所有的表單域都在你的對話框中，並且包含在form2中 – ADyson

是的，我做到了，並且工作完美。但是現在，我將把數據放入表單2（進入對話框），我需要將它們顯示在表單1中。我可以在不使用db的情況下做到嗎？ – Wavelet

-1

如果你可以使用內嵌的JavaScript，你可以嘗試使用一個onclick屬性。

這將是這樣的：

<input type="button" value="Show Dialog" id="create-user" onclick='$("#dialog").dialog("open");' />

如果你可以使用內嵌的JavaScript，請嘗試使用事件監聽器開溝的jQuery。

<input type="button" value="Show Dialog" id="create-user"/> 
<script> 
document.addEventListener("DOMContentLoaded", function() { 
    document.getElementById("create-user").addEventListener("click", function() { 
     $('#dialog').dialog("open"); 
    }); 
}); 
</script>

編輯：正如別人所說，你也可以改變輸入元素爲一個按鈕。這看起來會更好，因爲按鈕不在表單中。

<button type="button" id="create-user">Show Dialogue</button>

來源

2016-11-25 14:46:26 arbybruce

請勿使用內聯JS代碼。使用不顯眼的事件處理程序。這在邏輯上與OP已經有的沒有什麼不同。 –

提交按鈕不能在HTML代碼工作

回答

相關問題