Javascript 表单提交 prevent默认在使用 AJAX 检索表单时不起作用
Javascript form submit preventDefault not working when form is retrieved with AJAX
我有一个表单,我用Javascript和preventDefault提交。一切正常。但是,当我使用 AJAX 调用以及数据库中的其他数据检索表单时,表单将不再使用 Javascript 提交,而是尝试使用正常的 action=" 和 method="post" 刷新整个页面。似乎由于 AJAX 调用,防止默认以某种方式被禁用?
AJAX 调用以从数据库获取表单和其他数据:
<a href="#" onClick="return false" onmousedown="javascript:loadnames('<?php echo $postid;?>');">Load Names</a>
<div id="form-container"></div>
<!-- is empty, but contains the form upon ajax call above-->
AJAX 检索了 HTML 表单以使用 Javascript 提交:
<div id="form-container">
<!--let user add a name to DB not contained in DB list below-->
<form method="post" action="" id="addnameform">
<input name="name" id="name" type="text" value=""/>
<input type="submit" name="add-name-submit" value="Add"/>
</form>
<!--get a list of names from DB-->
<?php
$sql = "SELECT * FROM names ORDER BY name ASC";
$query = mysqli_query($connection, $sql);
while ($row = mysqli_fetch_array($query)) {
$name = $row["name"];
echo ...
} // end while
?>
</div><!--end-container-->
Javascript 提交上面的 HTML 表单:
$("#addnameform").submit(function(event) {
event.preventDefault();
var $form = $("#addnameform");
var name = $form.find( "input[name='name']" ).val();
$.ajax({
url: "ajax.php",
type: "POST",
...
如前所述,当页面加载时表单显示在页面上时,一切都会完美运行。但是一旦我把它包装在一个容器中,它最初是"空的",但在 AJAX 调用时出现,preventDefault 就会以某种方式被禁用。
您必须将提交事件绑定到您的身体(或从一开始就存在的任何其他父 DOM)
$("body").on('submit', '#addnameform', function(event) {
//...
});
你需要有一个父 dom 对象,你异步加载你的表单,你能像下面这样尝试你的 jQuery 代码吗?
$(function(){
$("#form-container").append("<form id='"addnameform'" method='"post'"><button type='"submit'">Submit Me</button></form>");
$("#form-container").on("submit","#addnameform",function(event){
event.preventDefault();
alert("Submit fired!");
//Your business goes here...
return false;
});
});
这是一个工作示例:https://jsfiddle.net/1fta504n/2/
PS:#form 容器可以是任何类型的 dom 元素 ex document,"body"、"div"、".class"等
希望这有帮助
相关文章:
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- Ajax和MySql的插入、检查和检索
- 使用JSON数据检索AJAX外部成功函数
- 为什么jqPlot显示了一个错误的饼图,其中包含通过AJAX检索的数据
- 使用jQuery/Ajax从数据库中检索记录
- 在 ajax 成功和循环 json 数组时检索 json 数组
- 页面刷新后重新加载 ajax 检索到的数据
- 通过 AJAX 检索 Blob 时处理错误消息
- 从 ajax 函数从数据库中检索数据值
- 从复选框 ajax php javascript 中检索值
- 如何检索 AJAX 请求返回的数据
- 检索JSON数据并使用AJAX在表中显示
- 使用AJAX从JSON中检索值
- 如何检索jquery ajax对php变量的响应
- 如何通过ajax将JSON函数作为数据传递和检索到PHP
- 如何使用ajax将检索到的数据分配给不同的td
- 无法检索 AJAX 处理的内容
- 在经典的asp页面上检索ajax表单数据
- 使用json_decode检索ajax发送的javascript数组的电子邮件
- 正在从不同的Javascript函数检索AJAX值