Search code examples
javascriptphpjqueryformsfancybox

Keep form window open when form is submitted


Consider this image which is an iframe window when user clicks on a link.

enter image description here

My Problem

When user clicks deposit the form gets submitted and the window closes, thus the user does not know if deposit was successful or not.

What I want to do

I am looking for a way to keep the iframe window open after the form has been submitted, to display appropriate message

Form HTML

   <form name="depForm" action="" id="register_form" method="post">
            User Name<br /><input type="text" name="uname" value="" /><br />
            Credit Card Nr<br /><input type="text" name="cc" value="" /><br />
            CSV Nr<br /><input type="text" name="csv" value="" /><br />
            Amount<br /> <input type="text" name="amount" value="" /><br />
            <input type="submit" value="deposit" name="deposit" class="buttono" />
            </form>

PHP Code

if(isset($_POST['deposit'])){
            if(isset($_SESSION['FBID'])){
                $uid=$_SESSION['FBID'];
                $amount = $_POST['amount'];
                $cc = $_POST['cc'];
                $csv = $_POST['csv'];
                //new bal
                $bal = getBal($uid);
                $newBal = $bal+$amount;
                $sql="UPDATE members SET balance='$newBal' WHERE member_nr='$uid'";
                $result = mysql_query($sql) or die("error please try again");   
                    if($result){

                    }
            }

if anyone can advise me how to keep iframe open after form has been submitted it will be greatly appreciated.


Solution

  • You would need to change the form submission to use AJAX. In the response you can include a state flag to indicate to the UI whether the request was successful or not and act appropriately. Something like this:

    $('#register_form').submit(function(e) {
        e.preventDefault(); // stop the standard form submission
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(data) {
                if (data.success) {
                    // show success message in UI and/or hide modal
                } else {
                    // it didn't work
                }
            },
            error: function(xhr, status, error) {
                // something went wrong with the server. diagnose with the above properties
            }
        });
    });
    
    $success = false;
    if (isset($_POST['deposit'])) {
        if (isset($_SESSION['FBID'])) {
            $uid = $_SESSION['FBID'];
            $amount = $_POST['amount'];
            $cc = $_POST['cc'];
            $csv = $_POST['csv'];
    
            $bal = getBal($uid);
            $newBal = $bal + $amount;
            $sql = "UPDATE members SET balance='$newBal' WHERE member_nr='$uid'";
            $result = mysql_query($sql) or die("error please try again");   
            if ($result) {
                $success = true;
            }
        }
    }
    
    echo json_encode(array('success' => $success));