在javascript中加载php页面

Question

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?

Answer 1

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>