在javascript中加载php页面

I have popup class in javascript and added all scripts in my html page that are required to display that popup. I am trying to load PHP page in that popup on submit button click of my form.

Popup is working fine for button like below (text from select.php is showing on popup box):

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

Now I have a form and on submit I have to redirect to PHP page depending on condition. And result should be display in popup.

I tried to load page with my popup class as below but its not showing the popup.

markup like below:

<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>

I think I am using wrong syntax of this $(".popup").load("correct.php");

I am not getting how to use that/how do I call a class(e.g .popup) in javascript with loading php page or other way of doing this.

or How to use ajax in this case? Can ajax will help in such situation?

I solved my problem by using .colorbox() function directly as below. Its working fine now. :)

<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>

Please check if DOM is being lost in jquery script for the function check. write it in $(function) and also I have a doubt that you do not have embed a area containing class .popup in your HTML page. Please check...it will be solved.

What error do you see in the browser console? I tried to run your code, I am able to show the content of a PHP file in the page using your code.

Make sure you have a div or some other element with a class "popup" attached to it. I had to add the following to your code to make it work.

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

EDIT: I tried to open a colorbox on clicking submit, as per the comment thread below. Here is something that works and opens a popup, with a page inside. This is not perfect, but does the job. You have to tweak the height.width and other properties to make it work properly. Try if this works.

Change your script to the following:

$(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>