我有一个简单的表单供用户在“墙上”发布。正如您所看到的,它有一个文本输入字段和一个由多个跨度组成的提交按钮,这些按钮通过CSS设置。
<form action="http://example.com/2/chat_share" method="post" id="chat_form">
<input type="text" name="chat_msg" value="" />
</form>
<span class="share_js fc-button fc-button-prev fc-state-default fc-corner-left fc-corner-right">
<span class="fc-button-inner">
<span class="fc-button-content save_button">Share</span>
<span class="fc-button-effect">
<span></span>
</span>
</span>
</span>
当用户点击“共享”按钮时,这很有效,该按钮运行下面的AJAX:
$(document).ready(function() {
$('.share_js').click(function(event){
event.preventDefault();
var link = $('#chat_form').attr('action');
$.ajax({
url: link,
type: "POST",
data: $('#chat_form').serialize(),
dataType: "html",
beforeSend: function(){
$('#loading').show();
},
success: function() {
$('#chat_thread').load(2 + '/chat_ajax');
$('#loading').hide();
$('#chat_form input').val('');
}
});
});
});
我的问题是当我在键盘上点击'return'或'enter'时,表单是通过非AJAX方法提交的。
我想使用
捕获此击键$('#selector').keydown(function (e){
if(e.keyCode == 13){
//code
}
})
但是无法将其包裹在我的AJAX函数中。
理想情况下,点击“分享”并点按“返回”都应该提交表单。
任何人都有建议如何做到这一点?
感谢您的帮助!
答案 0 :(得分:7)
为什么不使用表单帖子?
<form action="http://example.com/2/chat_share" method="post" id="chat_form">
<input type="text" name="chat_msg" value="" />
<span class="share_js fc-button fc-button-prev fc-state-default fc-corner-left fc-corner-right">
<span class="fc-button-inner">
<span class="fc-button-content save_button">Share</span>
<span class="fc-button-effect">
<span></span>
</span>
</span>
</span>
</form>
然后连接表格POST
$('#chat_form').bind('submit', function(event) {
var link = $(this).attr('action');
$.ajax({
url: link,
type: "POST",
data: $(this).serialize(),
dataType: "html",
beforeSend: function(){
$('#loading').show();
},
success: function() {
$('#chat_thread').load(2 + '/chat_ajax');
$('#loading').hide();
$('#chat_form input').val('');
}
});
return false; // dont post it automatically
});
来自评论
$('.save_button').bind('click', function(event) {
getStuff();
return false; // dont move to top
});
$('#chat_form').bind('submit', function(event) {
getStuff();
return false; // dont post it automatically
});
function getStuff() {
var link = $('#chat_form').attr('action');
$.ajax({
url: link,
type: "POST",
data: $('#chat_form').serialize(),
dataType: "html",
beforeSend: function(){
$('#loading').show();
},
success: function() {
$('#chat_thread').load(2 + '/chat_ajax');
$('#loading').hide();
$('#chat_form input').val('');
}
});
}
答案 1 :(得分:2)
您可以捕获表单提交事件:
$('#chat_form').submit(function(){
//do stuff
return false;//prevent default submission.
});
答案 2 :(得分:1)
将您的click
事件更改为表单submit
事件:
$(document).ready(function() {
$('#chat_form').submit(function(event){
event.preventDefault();
var link = $('#chat_form').attr('action');
$.ajax({
url: link,
type: "POST",
data: $('#chat_form').serialize(),
dataType: "html",
beforeSend: function(){
$('#loading').show();
},
success: function() {
$('#chat_thread').load(2 + '/chat_ajax');
$('#loading').hide();
$('#chat_form input').val('');
}
});
});
});
对于keydown
,你可以这样做:
$('#selector').keydown(function (e){
if(e.keyCode == 13){
e.preventDefault();
$('#chat_form').trigger('submit');
//code
}
})
答案 3 :(得分:0)
解决方法是针对每种情况使用2种不同的方法:一种用于点击Share
,另一种用于点击输入/返回键。
此代码适用于我,但如果您认为这代表不必要的臃肿或线条,请告诉我 - 否则我会在此后将此标记为最终答案。
感谢所有人的帮助。
$(document).ready(function() {
//this will run AJAX when clicking on 'Share'
$('.share_js').click(function(event){
event.preventDefault();
var link = $('#chat_form').attr('action');
$.ajax({
url: link,
type: "POST",
data: $('#chat_form').serialize(),
dataType: "html",
beforeSend: function(){
$('#loading').show();
},
success: function() {
$('#chat_thread').load(<?php echo $id; ?> + '/chat_ajax');
$('#loading').hide();
$('#chat_form input').val('');
}
});
});
//this will run AJAX when hitting return / enter
$('#chat_form input').keydown(function (e){
if(e.keyCode == 13){
e.preventDefault();
var link = $('#chat_form').attr('action');
$.ajax({
url: link,
type: "POST",
data: $('#chat_form').serialize(),
dataType: "html",
beforeSend: function(){
$('#loading').show();
},
success: function() {
$('#chat_thread').load(<?php echo $id; ?> + '/chat_ajax');
$('#loading').hide();
$('#chat_form input').val('');
}
});
}
});
});