Save Form Data to Database through Ajax Call in Colorbox

Question

I have placed a form in the Colorbox and want to Save the form contents in the Database. But when i Click on Submit button the Colorbox closes and the action is not completed .

Need some guideline on this.Thanks

$("img").colorbox({opacity:0.3,top:100,width:"800px",height:"500px", href:"editquote.php?id="+eid+""});

-------------editquote.php -->

<form method="POST" id="editform" action=""><table>
<tr><td><textarea name="quote" style="width:390px;" value="<?php echo $edit_quoteid;?>"><?php echo $quote;?></textarea></td></tr>
<input type="submit" value="Save" name="Save">
</table>     </form>
<?php
$edit_quoteid=$_GET['id'];
if(isset($_POST['Save'])){       
$qcontent=$_POST['quote'];
$up_query="UPDATE daily_quotes SET quote='".$qcontent."',WHERE id=".$edit_quoteid;
$edit_quote=mysql_query($up_query) or die();
?>    

----->Ajax call wriiten on editquote.php page

<script>
    $(document).ready(function(){
        $("#submit_editquote").off("click").on("click",function(){
            var data = $("form#editform").find("input").serialize();
                $.ajax({
                    url:'./index.php',
                    data:data,
                });
        });
    });
</script>

Also i changed the "submit" button to "button" and submit_editquote is its id given

Answer 1

First, you need to respond some thing in order to check ajax request response;

PHP:

<?php
    $edit_quoteid = $_GET['id'];
    if(isset($_POST['Save'])){  
        $edit_quoteid = $_POST['id'];
        $qcontent = $_POST['quote'];
        $up_query = "UPDATE daily_quotes SET quote='" . $qcontent . "',WHERE id=" . $edit_quoteid;
        $edit_quote=mysql_query($up_query);
        echo $edit_quote; // This will be false on qquery failure else true
    }
?>

HTML: Put hidden element for sending id

<form method="POST" id="editform" action="">
    <table>
        <tr>
            <td><textarea name="quote" style="width:390px;" value="<?php echo $edit_quoteid;?>"><?php echo $quote;?></textarea></td>
        </tr>
        <input type="hidden" value="<?php echo $_GET['id']" name="edit_quoteid">
        <input type="button" value="Save" name="Save" id="submit_editquote">
    </table>
</form>

JS: Check response and decide if you close fancybox or not

<script>
    $(document).ready(function(){
        $("#submit_editquote").on("click",function(){
            var data = $("form#editform").serialize();
                $.ajax({
                    url:'./index.php',
                    data:data,
                    success: function(response) {
                        if (response) {
                            alert("Success");
                            //Close fancybox here
                        } else {
                            alert("Update operation failed");
                        }
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
        });
    });
</script>