Py学习  »  Jquery

jquery用户界面警报对话框与表单元素一起使用时将消失

Sriram S • 4 年前 • 115 次点击  

jquery ui对话框与表单元素一起使用时,它会立即消失。当我删除整个表单标记内容时,我看到只有当用户单击关闭按钮时才会关闭它。问题是在对话框中创建DIV,哪个表单元素使其消失? 尝试使用CSS自定义样式和jquery .attr() .html() 通过覆盖本机警报来实现这一点。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="httpsz:/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>

function displayalert()
{
    $("<div>This is sample</div>").dialog();
}
</script>
</head>
<body>
 
 <form>
<p>Select Items</p><br>
<input type="radio" name="checking">Item 1<br>
<input type="radio" name="checking">Item 2<br>
<input type="radio" name="checking">Item 3<br>
<input type="radio" name="checking">Item 4<br>
<input type="submit" onclick="displayalert()">
</form>
</body>
</html>

我已经包含了要在按钮单击时显示的警报。如前所述,当它单独使用时,我看到它只有在用户单击关闭时才会关闭。但当与形式一起使用时,它会立即消失。

只有当用户点击关闭按钮时,我才需要关闭警报。因为表单很大,所以不包括表单内容。它有一组单选按钮和复选框以及提交按钮。

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/38115
 
115 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Nipun Tharuksha
Reply   •   1 楼
Nipun Tharuksha    4 年前

问题在于,当您单击按钮时,表单将被提交。因为您正在为按钮使用类型为“提交”的输入,而该输入是包装在原处的 <form> 元素。

这个 HTML 认为要将表单数据发送到服务器进行处理,因此它将刷新 . 通过告知表格未提交,那么您的 jquery 工作并返回消息。只需添加 onsubmit="return false;" 用于表单标记。

'onsubmit=“return false;”做什么?

这基本上是通过javascript处理表单提交的,什么都不做,返回控制流

通过以下途径了解更多信息 www.codexpedia.com

这也会有帮助 prevent refresh of page when button inside form clicked

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="httpsz:/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>

function displayalert()
{
    $("<div>This is sample</div>").dialog();
}
</script>
</head>
<body>
 
 <form onsubmit="return false;">
<p>Select Items</p><br>
<input type="radio" name="checking">Item 1<br>
<input type="radio" name="checking">Item 2<br>
<input type="radio" name="checking">Item 3<br>
<input type="radio" name="checking">Item 4<br>
<input type="submit" onclick="displayalert()">
</form>
</body>
</html>