我的 Ajax 中包含一个外部 PHP 文件中有一个模式。问题是,当我单击加载模式时,它已经提交了表单,但它不应该提交表单(仅当我在模式本身上按“提交”时)。
我尝试过:e.preventDefault();,返回 false; $("#editForm").unbind('提交');
还注意到 jQuery 中的一个问题:当我单击获取 id 时,我得到了按钮的正确 ID(因此,如果我 edit_3、edit_5、edit_7,它会正确警报 3、5、7;但是 ajax表单仅获取我单击的第一个按钮 id。因此,如果我单击 edit_3,警报 3,我会获得 3 的详细信息;但是如果我之后单击 edit_5,我会收到警报 5,我现在会获得 3 的详细信息。)
jQuery/Ajax:
$(function() {
$( ".edit" ).click(function(e){
var type_id = $(this).attr( "name" );
type_id = type_id.replace('edit_', '');
//e.preventDefault(); ajax also only sends ID of first edit I click,
// not the current one.
$.ajax({
type: "POST",
url: "/type/edit.php",
cache: false,
data: {'type_id': type_id}
}).done(function(html) {
$('body').append(html);
$('#modalEditType').modal('show');
});
//return false;
});
});
触发的链接:
<a href="#modalEditType" class="edit" name="edit_<?php echo $row['id'];?>"><button class="btn btn-default" type="button"><i class="fa fa-edit"></i></button></a>
以及 PHP 表单/模式:
<form class="international" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="form-join">
<div class="row col-lg-12">
<div class="form-group">
<label class="control-label col-lg-3">Type Name</label>
<input type="text" id="title" name="title" placeholder="Type Name" class="form-control" value="<?php echo $type['title']; ?>" required />
</div>
<div class="col-sm-12">
<button class="btn btn-danger" type="submit" name="submitted" value="" >Edit Type</button>
<button class="btn btn-info" type="submit" name="cancel" value="Cancel Update" onclick="$('#modalEditType').modal('hide');">Cancel</button>
</div>
<input type="hidden" value="0" name="submitme"/>
</form>
最佳答案
好吧,您可以 native 阻止表单提交,就像这样,
$("form.international").submit(function(event){
event.preventDefault();
});
这将防止触发任何提交表单的内容
关于javascript - jQuery ajax 模式在加载时提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23458456/