Question

我在javascript中有popup类，并在我的html页面中添加了显示该弹出窗口所需的所有脚本。我正在尝试在提交按钮单击我的表单的弹出窗口中加载PHP页面。

弹出窗口正常工作，如下面的按钮（select.php中的文字显示在弹出框中）：

<a href="select.php" class="home-banner-button popup">Activate</a>

现在我有一个表单，在提交时我必须根据条件重定向到PHP页面。结果应该显示在弹出窗口中。

我尝试使用我的弹出类加载页面，如下所示，但它没有显示弹出窗口。

标记如下：

<form method="post" action="#"  onSubmit="return check();">
   <input type="text" id="textid" placeholder="Enter Here" />
   <input type="submit" name="submit" />                
</form>

Javasript：

<script type="text/javascript">

$(function () {
    $('.popup').colorbox({
        iframe: true,
        opacity: 0.7,
        fixed: true,
        innerWidth: 500,
        innerHeight: 180,
        scrolling: false
    });
});

function check() {
    var price = $('#textid').val();
    var new_value = price.replace(/\,/g, '');
    var lower_limit_value = 375;
    var upper_limit_value = 1712;

    if (new_value >= lower_limit_value && new_value <= upper_limit_value) {
        $(".popup").load("correct.php");
        return false;
    } else {
        $(".popup").load("incorrect.php");
        return false;
    }
}
</script>

我认为我使用的是$(".popup").load("correct.php");

的错误语法

我没有得到如何使用它/如何使用加载php页面或其他方式在javascript中调用类（例如.popup）。

或在这种情况下如何使用ajax？ ajax可以帮助解决这种情况吗？

Answer 1

您在浏览器控制台中看到了什么错误？我试图运行你的代码，我能够使用你的代码在页面中显示PHP文件的内容。

确保你有一个div或其他一些带有类的元素＆＃34; popup＆＃34;附在它上面。我必须在代码中添加以下内容才能使其正常工作。

<div class="popup"></div>

修改根据下面的评论主题，我试图在点击提交时打开一个颜色框。这是一个有用的东西，打开一个弹出窗口，里面有一个页面。这并不完美，但能胜任。您必须调整height.width和其他属性才能使其正常工作。试试这是否有效。

将脚本更改为以下内容：

$(function () { //Removed the popup code from here. Made that conditional. }); function check() { var price = $('#textid').val(); var new_value = price.replace(/\,/g, ''); var lower_limit_value = 375; var upper_limit_value = 1712; if (new_value >= lower_limit_value && new_value <= upper_limit_value) { $('.popup').colorbox({ iframe: true, opacity: 0.7, fixed: true, height: 500, width: 180, scrolling: false, href: "correct.php", open: true }); return false; } else { $('.popup').colorbox({ iframe: true, opacity: 0.7, fixed: true, height: 500, width: 180, scrolling: false, href: "incorrect.php", open: true }); return false; } } </script>

Answer 2

请检查是否在jquery脚本中丢失了DOM以进行功能检查。将它写在$(function)中，我也怀疑你没有在HTML页面中嵌入包含类.popup的区域。请检查......它将被解决。

Answer 3

我通过直接使用.colorbox（）函数解决了我的问题，如下所示。它的工作正常。 :)

<script type="text/javascript">
    function check() {
        var price = $('#textid').val();
        var new_value = price.replace(/\,/g,'');
        var lower_limit_value = 375;
        var upper_limit_value = 1712;

    if (new_value>=lower_limit_value && new_value<=upper_limit_value) {

    $.colorbox({
href:"correct.php",
iframe:true, 
opacity:0.7, 
fixed:true, 
innerWidth:500, 
innerHeight:250, 
scrolling:false});
    return false;

    } else {

    $.colorbox({
href:"incorrect.php",
iframe:true, 
opacity:0.7, 
fixed:true, 
innerWidth:500, 
innerHeight:320, 
scrolling:false});  
    return false;

    }
}

</script>

在javascript中加载php页面

3 个答案: