jQuery Ajax表单提交与Twitter引导模态
[英]jquery ajax form submit with twitter bootstrap modal
问题描述
i'm developing a chat and i want that the clients click on the button "Click here and start ur chat" and will open the form and after submit form "Start Chat" ... 
我正在建立聊天，我希望客户单击按钮“单击此处并开始您的聊天”，然后将打开表单，然后提交表单“开始聊天” ...
But i can't submit using ajax, i checked the console log, nothing appears strange! 但是我无法使用Ajax提交，我检查了控制台日志，似乎没有什么奇怪的！
<!DOCTYPE html>
<html>
<head>
<title>Start Chat</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/bootstrap.css" />
</head>
<body>
<center>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Click here and start ur chat
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Write ur info below</h4>
</div>
<div class="modal-body">
<form action="" method="POST" id="form">
<table width="100%">
<tr>
<td>Name: </td> <td><input type="text" name="name" placeholder="Name"></td>
</tr>
<th> </th>
<tr>
<td>Mail: </td> <td><input type="text" name="mail" placeholder="Mail"></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="start">Start Chat</button>
</div>
</div>
</div>
</div>
<!-- javascript:chatWith('3','Ronaldo') -->
</center>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#form").submit(function(e){
$.ajax({
url: "dateRecd.php",
type: "POST",
data: $(this).serialize(),
success: function(data){
alert(data);
// chatWith('9','name');
}
});
});
});
});
</script>
</body>
</html>
3 个解决方案
解决方案1
2 2014-07-08 05:42:24
Instead submit in the form, kindly try with the "click" action. 而是以表格形式提交，请尝试“单击”操作。
$(document).ready(function(){
$("#form").click(function(e){
$.ajax({
url: "dateRecd.php",
type: "POST",
data: $(this).serialize(),
success: function(data){
alert(data);
// chatWith('9','name');
}
});
});
//});
});
解决方案2
2 2015-02-05 17:25:40
In fact, what happens when you click the button "start" ? 实际上，当您单击“开始”按钮时会发生什么？ As you add a click handler to the "start" button, as following : 将点击处理程序添加到“开始”按钮时，如下所示：
$("#form").submit(function(e){
//...
}
you add a sumbit handler of the form when you click the button. 当您单击按钮时，您将添加表单的sumbit处理程序。 nothing more, no submit, no ajax action. 仅此而已，无需提交，无需执行ajax操作。
To get what you want, there are 2 simple ways: 要获得想要的东西，有两种简单的方法：
- in the click handler of the button, delete the form submit handler, and do the ajax submit, like what @Thiru says; 在按钮的单击处理程序中，删除表单提交处理程序，然后像@Thiru所说的那样进行ajax提交；
- delete the button click handler, use form submit handler, like @Faytraneozter propoese. 删除按钮单击处理程序，使用表单提交处理程序，例如@Faytraneozter提案。
But the second way doesn't work. 但是第二种方法不起作用。 why? 为什么？
Firstly, you have 4 buttons in your page, how does your page know which button clicked should fire the submit action? 首先，您的页面上有4个按钮，您的页面如何知道单击哪个按钮应触发提交操作？ You should add type="submit" to the button, so that your page knows that when you click this button, you mean to submit the form. 您应该在按钮上添加type="submit" ，以便您的页面知道单击该按钮时，您意味着要提交表单。
Secondly, when you fire the submit action of the form, it is submitted by HTML, NOT ajax. 其次，当您触发表单的提交动作时，它是通过HTML而不是 ajax提交的。 You should add the line e.preventDefault to prevent the submit by HTML. 您应该添加e.preventDefault行以防止通过HTML提交。 Here is https://stackoverflow.com/a/1357151/1165178 a answer which explains well e.preventDefault . 这是https://stackoverflow.com/a/1357151/1165178一个很好地解释e.preventDefault的答案。
解决方案3
1 2014-01-17 17:44:48
just remove the #start click 只需删除＃开始点击
$(document).ready(function(){
//$("#start").click(function(){ // that will done a double verification
$("#form").submit(function(e){
$.ajax({
url: "dateRecd.php",
type: "POST",
data: $(this).serialize(),
success: function(data){
alert(data);
// chatWith('9','name');
}
});
});
//});
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.