社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

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

Sriram S • 4 年前 • 119 次点击  

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
 
119 次点击  
文章 [ 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>