通过Colorbox中的Ajax调用将表单数据保存到数据库

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 .

我在Colorbox中放置了一个表单,并希望将表单内容保存在数据库中。但是,当我单击“提交”按钮时,Colorbox将关闭,操作未完成。

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

-----> Ajax在editquote.php页面上调用wriiten

<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

此外,我将“提交”按钮更改为“按钮”,并将submit_editquote更改为其ID

1 个解决方案

#1

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

首先,您需要回复一些事情以检查ajax请求响应;

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

HTML:将隐藏元素用于发送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

JS:检查响应并决定是否关闭fancybox

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

#1