我正在尝试提交表单而不刷新页面,但event.preventDefault();
无效。这是我到目前为止所拥有的
$('#contactform').on('submit', function() {
event.preventDefault();
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
succss: function(response) {
console.log(response);
}
});
});
但是一旦按下提交按钮,页面仍会重新加载。有什么建议吗?
更新:主表单页面的代码如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/ajax/main.js"></script>
<form action="<?php echo get_template_directory_uri(); ?>/ajax/contact.php" method="post" id="contactform">
<input type="text" name="fname" placeholder="Name" />
<input type="email" name="email" placeholder="Email" />
<textarea name="message" id="" cols="30" rows="10" placeholder="Your Message"></textarea>
<input type="submit" name="Submit" />
</form>
答案 0 :(得分:12)
您需要将事件作为第一个参数传递给函数。
$('#contactform').on('submit', function(event) {
event.preventDefault();
...
如果这不起作用,您可能还有其他问题。在将侦听器包装在.ready()
中之前,您需要确保DOM已准备就绪,然后才能将任何内容绑定到表单上。
$(document).ready(function() {
$('#contactform').on('submit', function(event) {
event.preventDefault();
...
答案 1 :(得分:4)
您需要将event
放入函数调用中:
$('#contactform').on('submit', function(event) { ...
答案 2 :(得分:2)
试试这个
$('#contactform').submit(function(event) {
event.preventDefault();
});