Php Ajax表單在顏色框中提交

Question

我有一個表單用一些php來驗證並在數據庫中插入提交和窗體在colorbox中打開。

到目前爲止這麼好。我想要做的是關閉colorbox並刷新成功的div。

我想我需要從PHP傳遞一個響應給ajax，如果一切正常，請關閉與setTimeout（$ .fn.colorbox.close，1000）類似的顏色盒;並刷新分區，但我卡住，因爲我是新的阿賈克斯。

我會很感激這裏的任何幫助。

這裏是我的ajax：

jQuery(function(){ 
jQuery('.cbox-form').colorbox({maxWidth: '75%', onComplete: function(){ 
    cbox_submit(); 

    }}); 
}); 


function cbox_submit() 
{ 
    jQuery("#pre-process").submit(function(){ 
    jQuery.post(
     jQuery(this).attr('action'), 
     jQuery(this).serialize(), 
     function(data){ 
     jQuery().colorbox({html: data, onComplete: function(){ 
      cbox_submit(); 

     }}); 
     } 
    ); 
    return false; 
    }); 
} 

形式的PHP代碼：

<?php 
error_reporting(-1); 
include "conf/config.php"; 

if(isset($_REQUEST['rid'])){$rid=safe($_REQUEST['rid']);} 
if(isset($_REQUEST['pid'])){$pid=safe($_REQUEST['pid']);} 
$msg = ''; 
if (!$_SESSION['rest_id']) $_SESSION['rest_id']=$rid; //change to redirect 

$session_id=session_id(); 


if(isset($_REQUEST['submit'])){ 

if(isset($_POST['opta'])){ 
$opta=safe($_POST['opta']); 
$extraso = implode(',',array_values(array_filter($_POST['opta']))); 
        } 

if (array_search("", $_POST['opt']) !== false) 
{ 
$msg = "Please select all accessories!"; 
}else{ 

$extrasm = implode(',',array_values(array_filter($_POST['opt']))); 

if ($_POST['opt'] && isset($_POST['opta'])) {$extras= $extrasm .",". $extraso;} 
if ($_POST['opt'] && !isset($_POST['opta'])) {$extras= $extrasm;} 
if (!$_POST['opt'] && isset($_POST['opta'])) {$extras= $extraso;} 

$sql['session_id'] = $session_id; 
    $sql['rest_id'] = $_POST['rid']; 
    $sql['prod_id'] = $_POST['pid']; 
    $sql['extras'] = $extras; 
    $sql['added_date'] = Date("Y-m-d H:i:s"); 
    $newId=insert_sql("cart",$sql); 

    } 
} 
?> 

<form id="pre-process" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> 
<div style="background-color:#FFF; padding:20px;"> 
<?=$msg;?> 
    <?php 
    $name = getSqlField("SELECT name FROM products WHERE resid=".$_SESSION['rest_id']." and id=".$pid."","name"); 
    echo "<div style='color:#fff; background-color:#F00;padding:10px;' align='center'><h2>".$name."</h2></div><div style='background-color:#FFF; padding: 20px 70px 30px 70px; '>Please select accessories.<br><br>"; 
$getRss = mysql_query("SELECT * FROM optional_groups_product where prodid=".$pid." order by id asc"); 
    while ($rsrw = @mysql_fetch_array($getRss)) { 

    $goptionals = getSqlField("SELECT goptionals FROM optionals_groups WHERE resid=".$_SESSION['rest_id']." and id=".$rsrw['goptid']."","goptionals"); 

     $goptionals=explode(', ',($goptionals)); 

echo "<select name='opt[]' id='opt[]' style='width:220px;'>"; 
echo "<option value='' >Select Options</option>"; 
    foreach($goptionals as $v) 
    { 
     $vname = mysql_query("SELECT * FROM optionals where id=".$v." LIMIT 0,1"); 
     while ($rsgb = @mysql_fetch_array($vname)) { 
      $aa=$rsgb['optional']; 
     } 
      echo "<option value=".$v." >".$aa."</option>"; 


    } 
     echo "</select>(required)<br>";  
    //} 
     } 
     $getRss = mysql_query("SELECT * FROM optional_product where prodid=".$pid.""); 
     ?> 
     <br><br> 
     <table border="0" cellpadding="0" cellspacing="0" > 
     <tr> 
    <td bgcolor="#EAFFEC"> 
<div style="width:440px; "> 
<?php 

while ($rssp = @mysql_fetch_array($getRss)) { 
$optional=getSqlField("SELECT optional FROM optionals WHERE id=".$rssp['optid']."","optional"); 
$price=getSqlField("SELECT price FROM optionals WHERE id=".$rssp['optid']."","price"); 
?> 
<div style="width:180px;background-color:#EAFFEC; float:left;padding:10px;""><input type="checkbox" name="opta[]" id="opta[]" value="<?=$rssp['optid']?>" /> <i><?=$optional?> [<?=CURRENCY?><?=$price?> ]</i> </div> 
<?php } ?> 
</div> 

</td> 
</tr></table> 
<input type="hidden" name="rid" value="<?=$rid?>" /> 
<input type="hidden" name="pid" value="<?=$pid?>"/> 
    </div><input type="hidden" name="submit" /><input id='submit' class="CSSButton" style="width:120px; float:right;" name='submit' type='submit' value=' Continue ' /><br /> 

<br /><br /> 
</div> 
</form> 

Answer 1

我不知道colobox，但如果我非常理解你正在嘗試做的，
我會說你的javascript應該看起來像這樣

function cbox_submit() 
{ 
    jQuery("#pre-process").submit(function(e) { 
    e.preventDefault(); // prevents the form to reload the page 
    jQuery.post(
     jQuery(this).attr('action') 
    , jQuery(this).serialize() 
    , function(data) { 
     if (data['ok']) { // ok variable received in json 
      jQuery('#my_colorbox').colorbox.close(); // close the box 
     } 
     } 
    ); 
    return false; 
    }); 
} 

jQuery(function() { 
    jQuery('#my_colorbox').colorbox({ 
    maxWidth: '75%' 
    , onComplete: cbox_submit // Bind the submit event when colorbox is loaded 
    }); 
}); 

you shoul至少分開您的PHP腳本，做後部分。

而這個PHP（調用jQuery(this).attr('action')）應該返回一個json ok變量如果成功。例如：

<?php 
# ... post part ... 
# if success 
ob_clean(); 
header('Content-type: application/json'); 
echo json_encode(array('ok' => true)); 
?>