我试图完成的任务似乎很简单,但我对执行PHP没有很强的理解。我有一个简单的表单,有yes或no单选按钮。我想在提交表单时启动一个模式窗口,并显示所有回答为"是"的问题。我可以使用iframe很好地启动模态窗口,因为我计划在模态中除了表单提交之外还有其他内容,但我使用的非常简单的php脚本没有显示在模态中。当我删除fancybox脚本并保持表单操作php文件不变时,效果很好。
我假设jquery和php脚本在不同的时间启动之间存在冲突,但不知道从哪里开始解决这个问题。下面是我正在使用的代码。任何帮助都将是伟大的,请记住,我不知道如何编码php。
您可以在上看到一个工作示例http://staging.drugrehabtest.com
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="scripts/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
if(!jQuery.browser.mobile){
jQuery(document).ready(function() {
$(".fancybox").fancybox({
'width' : 920,
'minHeight' : 230,
'type' : 'iframe',
'padding': 20,
'href': 'success.php',
});
});
}
</script>
<form action="success.php" method="post" name="contact" id="contact">
<input type="radio" class="checkbox" name="one" value="yes" title="Do you find yourself using drugs even when you don't want to?: Yes" />
<label class="question">Do you find yourself using drugs even when you don't want to?</label>
<input type="submit" name="Submit" id="submit" class="fancybox fancybox.iframe" />
</form>
Success.php页面(减去其他标准html元素)
<?php
if ($_POST['one']=="yes") { echo "Do you find yourself using drugs even when you don't want to?"; }
?>
您可以使用
$(document).ready(function(){
$("#"+secc+"form").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: '../form/',
type: 'POST',
data: formData,
async: false,
success: function (data) {
//history,go(-1);
},
cache: false,
contentType: false,
processData: false
});
return false;
});
});
问题是"var formdata"的jquery版本仅适用于1.10,而fancybox不适用于此版本的
按照您的方式,数据不会去任何地方!你必须通过ajax发布你的数据,你需要一点调整。
jQuery(document).ready(function() {
$(".fancybox").fancybox({
'width' : 920,
'minHeight' : 230,
'type' : 'iframe',
'padding': 20,
'href': 'success.php',
'data': $("#contact").serializeArray(),//send all form fields
});
通过这种方式,您可以在其他页面中拥有您的数据。。。
也许这篇文章能帮你更多!
jQuery(document).ready(function() {
$(".fancybox").fancybox({
'width' : 920,
'minHeight' : 230,
'type' : 'iframe',
'padding': 20,
'href': 'success.php',
'data': $("#contact").serializeArray(),//send all form fields
});
好的,这里有另一种方法,iframe方法似乎有点旧,您可以在这里使用ajax。像这样的东西:
首先在html中添加一个链接(例如,最后一个元素):
<form action="success.php" method="post" name="contact" id="contact">
<input type="radio" class="checkbox" name="one" value="yes" title="Do you find yourself using drugs even when you don't want to?: Yes" />
<label class="question">Do you find yourself using drugs even when you don't want to?</label>
<input type="submit" name="Submit" id="submit" class="fancybox fancybox.iframe" /><!-- this is useless here -->
<a id="check" data-fancybox-type="ajax" href="success.php" id="check">Result</a>
</form>
根据这篇文章,之后我们点击链接通过ajax发送数据,并在脚本中再次得到答案:
<script type="text/javascript">
jQuery(document).ready(function() {
$('#check').on("click", function (e) {
e.preventDefault(); // avoids calling success.php from the link
$.ajax({
type: "POST",
cache: false,
url: this.href, // success.php
data: $("#contact").serializeArray(), // all form fields
success: function (data) {
// on success, post returned data in fancybox
$.fancybox(data, {
// fancybox API options
fitToView: false,
openEffect: 'none',
closeEffect: 'none'
}); // fancybox
} // success
}); // ajax
}); // on
}); //ready
</script>
另一件事是从jquery中删除了.browser,而不是使用Modernizr参考