使用宏弹出显示模态窗口中的表单响应
使用宏弹出显示模态窗口中的表单响应
提问于 2016-11-08 08:18:50
我正在尝试使用ajax提交一个表单，并使用Magni显弹出窗口显示模态窗口上的响应。我已经张贴了下面的代码。在关于使它工作，我必须点击“发送”按钮，然后“弹出”按钮。在过去的三个小时里，我一直在玩，但没能成功。你能看看我做错了什么吗？我想点击发送按钮，并看到模式弹出窗口上的php响应。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$(document).on('click', '.popup-modal', function (e) {
$( "#indexform" ).on( "submit", function( event ) {
event.preventDefault();
var formdata = $(this).serialize();
$.ajax({
type:"POST",
url:"result.php",
data:formdata,
success: function(msg){
$("#modal-results").html(msg)
},
error:function(){
alert("failure");
}
});
});
});
$('.popup-modal').magnificPopup({
type: 'inline'
});
});
</script>
<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<style>
div#modal-results {
color: white;
}
</style>
</head>
<body>
<form method="post" name="index" id="indexform">
<input type="text" name="name" placeholder="NAME">
<input type="text" name="email" placeholder="EMAIL">
<textarea rows="3" name="message" placeholder="MESSAGE"></textarea>
<input name="sendData" type="submit" value="SEND">
<button type="submit" class="popup-modal" href="#modal-results">Popup</button>
<div id="modal-results"></div>
</form>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-08 09:35:41
根据“内嵌式”的文档，您没有正确地设置它。您必须设置包含type和src的项参数。
我创建了一个函数createSrc，当按下按钮时调用它。它创建一个用于模态对话框的<div>元素。我还为这个窗口添加了样式。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$(document).on('click', '.popup-modal', function (e) {
$( "#indexform" ).on( "submit", function( event ) {
event.preventDefault();
var formdata = $(this).serialize();
$.ajax({
type:"POST",
url:"result.php",
data:formdata,
success: function(msg){
$("#modal-results").html(msg)
},
error:function(){
alert("failure");
}
});
});
});
$('.popup-modal').magnificPopup({
items: {
src: createSrc(),
type: 'inline'
}
});
});
function createSrc(){
return "<div class='white-popup'>" + jQuery("#name").val() + "<br>" + "</div>";
}
</script>
<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<style>
div#modal-results {
color: white;
}
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
</style>
</head>
<body>
<form method="post" name="index" id="indexform">
<input id="name" type="text" name="name" placeholder="NAME">
<input id="email" type="text" name="email" placeholder="EMAIL">
<textarea id="message" rows="3" name="message" placeholder="MESSAGE"></textarea>
<input name="sendData" type="submit" value="SEND">
<button type="submit" class="popup-modal" href="#modal-results">Popup</button>
<div id="modal-results"></div>
</form>
</body>
</html>
编辑
由于您使用的是ajax，所以不需要<form>标记。我修改了你的朋友密码。你还在重复发送请求电话。第一次点击没有做一个POST请求，所以不能显示一个错误，因为当您将弹出窗口无效时重写了它。第二次点击得到一个POST请求，第三次点击发送了2个POST请求，第四个点击发送了3个请求等等。
试试下面的代码：
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$( '.popup-modal').on('click', function(e) {
console.log( $(this).serialize() );
var formdata = $(this).serialize();
$.ajax({
type: "POST",
url: "http://demo.sbvan.com//result.php",
data: formdata,
success: function(msg) {
$("#modal-results").html(msg);
$('.popup-modal').magnificPopup({
type: 'inline'
});
},
error: function() {
$("#modal-results").html("failure");
$('.popup-modal').magnificPopup({
type: 'inline'
});
}
});
});
});
</script>
<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<style>
div#modal-results {
color: white;
}
</style>
</head>
<body>
<input type="text" name="name" placeholder="NAME">
<input type="text" name="email" placeholder="EMAIL">
<textarea rows="3" name="message" placeholder="MESSAGE"></textarea>
<!--<input name="sendData" type="submit" value="SEND">-->
<button class="popup-modal" href="#modal-results">Popup</button>
<div id="modal-results"></div>
</body>
</html>
编辑2:
您也可以创建弹出与乐趣，没有按钮。因此，在单击submit之后调用该函数。但是请记住，您没有在表单中使用任何操作标记，因此不需要输入类型"submit“。用“按钮”代替。您正在通过AJAX来传递它。
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<style>
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
#popup {
visibility: hidden;
}
</style>
</head>
<body>
<form method="post" name="index" id="indexform">
<input type="text" name="name" placeholder="NAME"><br/>
<input type="text" name="email" placeholder="EMAIL"><br/>
<textarea rows="3" name="message" placeholder="MESSAGE"></textarea><br/>
<input name="sendData" id="sendData" type="button" value="SEND">
<div id="modal-results" class="white-popup mfp-hide">
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
$( '#sendData').on('click', function(e) {
console.log( $(this).serialize() );
var formdata = $(this).serialize();
$.ajax({
type: "POST",
url: "result.php",
data: formdata,
success: function(msg) {
$("#modal-results").html(msg);
$.magnificPopup.open({
items: {
src: '#modal-results',
type: 'inline'
}
});
},
error: function() {
$("#modal-results").html("failour");
$.magnificPopup.open({
items: {
src: '#modal-results',
type: 'inline'
}
});
}
});
});
});
</script>
</body>
</html>Stack Overflow用户
发布于 2016-11-08 14:25:45
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<style>
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
#popup {
visibility: hidden;
}
</style>
</head>
<body>
<form method="post" name="index" id="indexform">
<input type="text" name="name" placeholder="NAME"><br/>
<input type="text" name="email" placeholder="EMAIL"><br/>
<textarea rows="3" name="message" placeholder="MESSAGE"></textarea><br/>
<input name="sendData" type="submit" value="SEND">
<button type="submit" id="popup" class="popup-modal" href="#modal-results">Popup</button>
<div id="modal-results" class="white-popup mfp-hide">
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
</form>
<script type="text/javascript">
$("#indexform").submit(function(event) {
event.preventDefault();
var formdata = $(this).serialize();
$.ajax({
type: "POST",
url: "result.php",
data: formdata,
success: function(msg) {
$("#modal-results").html(msg);
},
error: function() {
$("#modal-results").html("Failure");
}
}).done(function() {
$('.popup-modal').magnificPopup({
type: 'inline'
});
$('#popup').click();
});
});
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40482047
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号