jQuery Ajax表单提交与Twitter引导模态
[英]jquery ajax form submit with twitter bootstrap modal
问题描述
我正在建立聊天，我希望客户单击按钮“单击此处并开始您的聊天”，然后将打开表单，然后提交表单“开始聊天” ...
但是我无法使用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
而是以表格形式提交，请尝试“单击”操作。
$(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
实际上，当您单击“开始”按钮时会发生什么？ 将点击处理程序添加到“开始”按钮时，如下所示：
$("#form").submit(function(e){
//...
}
当您单击按钮时，您将添加表单的sumbit处理程序。 仅此而已，无需提交，无需执行ajax操作。
要获得想要的东西，有两种简单的方法：
- 在按钮的单击处理程序中，删除表单提交处理程序，然后像@Thiru所说的那样进行ajax提交；
- 删除按钮单击处理程序，使用表单提交处理程序，例如@Faytraneozter提案。
但是第二种方法不起作用。 为什么？
首先，您的页面上有4个按钮，您的页面如何知道单击哪个按钮应触发提交操作？ 您应该在按钮上添加type="submit" ，以便您的页面知道单击该按钮时，您意味着要提交表单。
其次，当您触发表单的提交动作时，它是通过HTML而不是 ajax提交的。 您应该添加e.preventDefault行以防止通过HTML提交。 这是https://stackoverflow.com/a/1357151/1165178一个很好地解释e.preventDefault的答案。
解决方案3
1 2014-01-17 17:44:48
只需删除＃开始点击
$(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>
联系表格7：“提交”按钮在Twitter Bootstrap Modal中不起作用
[英]Contact Form 7: Submit button doesn't work in Twitter Bootstrap Modal
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.