提交按钮不适用于 html 代码
Posted
技术标签:
【中文标题】提交按钮不适用于 html 代码【英文标题】：submit button doesn't work with html code 【发布时间】：2017-04-09 23:43:23 【问题描述】：我有这个 html 代码：
<!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>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</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 ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam， quis nostrud 练习 ullamco laboris nisi ut aliquip ex ea commodo 结果。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。）
【问题讨论】：
你把$(document).ready(function()的括号合起来了吗？ 为什么在提交按钮点击时调用 submit() 函数？它应该被自动调用。 @Vaidas<button type="submit"，OP 的代码已经具有的功能与您的建议完全相同。
你包含 jQuery 3 次。您可以删除后两个。您还包括两次 jQueryUI，删除第一个（非“.min.js”）。还有一个不匹配的form 标签会导致问题，需要删除。
@MattCowley 是的，你是对的。我错过了结束标签，因为它的格式不明确。 OP：嵌套表单不是有效的 HTML。
【参考方案1】：
表单标签缺少说明，即... 方法=“发布” 动作=""
【讨论】：
【参考方案2】：如果您可以使用内联 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>
【讨论】：
不要使用内联 JS 代码。使用不显眼的事件处理程序。这在逻辑上也与 OP 已有的没有什么不同。【参考方案3】：对话框中的提交按钮不起作用，因为您有嵌套表单 - form2 在 form1 内，这是无效的。
将对话框（<div id="dialog" 和其中的所有内容）移到form1 之外，提交按钮将按预期导致回发。
附：尽管有问题的标题，但这个问题的根本原因与 jQuery 甚至 Javascript 无关。它只是格式错误的 HTML。
【讨论】：
非常感谢。有效。另外，如何将数据提交到form1？ 如果你按照我的建议做了，那么你在form1中没有任何数据可以提交。所有表单字段都在您的对话框中，并包含在 form2 中 是的，我做到了，而且效果很好。但是现在，我将放入表单 2（进入对话框）的数据，我需要将它们显示到表单 1 中。我可以在不使用 db 的情况下做吗？ 是的，您可以使用 javascript/jQuery 将每个表单元素的内容复制到页面其他位置的元素中。您根本不必将其保存到数据库中，除非您希望数据在页面生命周期之外持续存在。顺便说一句，如果您只想显示数据（例如您的情况下的 form1），则不需要<form> - HTML 中的表单用于数据输入，而不是显示。以上是关于提交按钮不适用于 html 代码的主要内容，如果未能解决你的问题，请参考以下文章
HTML / Javascript：如何提交输入并使用提交/添加更多按钮填充文本区域
警报不适用于 React Hooks 和 Bootstrap