我正在尝试通过jQuery和AJAX提交我的表单,但似乎self(index.php)的操作最终被采用,而不是jQuery提交处理程序。有什么想法吗?
<form id="artist_signup" action="index.php" method="get" oninput="AoutName.value=ANAME.value">
<input type="hidden" name="ajax" value="true" />
<div class="inlineInput">
<input type="text" name="ANAME" placeholder="Name">
</div>
<div class="inlineInput">
<input type="text" name="LOCATION" placeholder="City, State">
</div>
<div class="inlineInput">
<input type="email" name="EMAIL" placeholder="Email">
</div>
<div class="inlineInput">
<input type="url" name="AWEBSITE" placeholder="www.myawesomeband.com">
</div>
<div class="submitContainer">
<input type="submit" value="Sen" class="donateButton formSubmit">
</div>
<div id="artist_message"></div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#artist_signup').submit(function() {
$("#artist_message").html("<span class='error'>Adding your email address...</span>");
$.ajax({
url: 'inc/store-address.php',
data: $('#artist_signup').serialize(),
success: function(msg) {
$('#artist_message').html(msg);
}
});
return false;
});
});
</script>
答案 0 :(得分:2)
您需要阻止默认操作,即表单提交。
这可以通过e.preventDefault()
来完成。您可以阅读更多相关信息here
$(document).ready(function() {
$('#artist_signup').submit(function(e) {
e.preventDefault();
$("#artist_message").html("<span class='error'>Adding your email address...</span>");
$.ajax({
url: 'inc/store-address.php',
data: $('#artist_signup').serialize(),
success: function(msg) {
$('#artist_message').html(msg);
}
});
});
});
答案 1 :(得分:0)
使用提交功能时,它的自然动作是回发到表单操作的任何内容。您可以做的是在e
函数中添加一个参数。这将表示具有与事件本身相关的属性和方法的事件对象。有了这个,您可以执行e.preventDefault();
,这将阻止表单操作发生。
<script type="text/javascript">
$(document).ready(function() {
$('#artist_signup').submit(function(e) {
e.preventDefault();
$("#artist_message").html("<span class='error'>Adding your email address... </span>");
$.ajax({
url: 'inc/store-address.php',
data: $('#artist_signup').serialize(),
success: function(msg) {
$('#artist_message').html(msg);
}
});
});
});
</script>