提交按钮不能在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代码工作

回答

相关问题