提交數據AJAX與jQuery確認對話框和清除表單值

Question

我有一個表單，用戶可以向對方發送一定數量的禮物，並且我希望他們在發送時獲知這樣的數額。我設法打開一個對話框，但是當用戶點擊「是」時無法處理Ajax提交。它不傳遞給服務器。但是，當我提交沒有對話框，它工作正常。請幫忙。提前致謝！這裏是腳本：

<div id="gift_sent" style="float: left; width: 370px; margin: 5px 0 5px 0; display: none;"><?php echo ucfirst(__('Gift Sent', true)) ?></div> 

<div style="float: left; width: 370px; margin: 50px 0 10px 0;"> 

<?php // echo $this->Form->create('Gift', array('action' => 'sent/' . $user_obj['User']['id'] . '/' . $gift['GiftPhoto']['id'], 'div' => false, 'id' => "submit_".$gift['GiftPhoto']['id'])); ?> 
<?php echo $this->Form->create('Gift', array('div' => false, 'id' => "submit_".$gift['GiftPhoto']['id'])); ?> 

<?php echo $this->Form->input('user_id', array('type' => 'hidden', 'value' => $user_obj['User']['id'])); ?> 
<?php echo $this->Form->input('sender_id', array('type' => 'hidden', 'value' => $user_object['id'])); ?> 
<?php echo $this->Form->input('gift_id', array('type' => 'hidden', 'value' => $gift['GiftPhoto']['id'])); ?> 

<?php echo $this->Form->input('description', array('label' => 'Greetings, 240 characters max', 'rows' => '5', 'style' => 'width: 350px;', 'div' => false)); ?> 

<div class="clr"></div> 

<?php echo $this->Form->end('Send'); ?> 

</div> 


<script type="text/javascript"> 
jQuery(document).ready(function() { 

var link = "<?php echo $html->url("/gifts/sent/" . $user_obj['User']['id'] . '/' . $gift['GiftPhoto']['id']) ?>"; 

$("#submit_<?php echo ($gift['GiftPhoto']['id']); ?>").submit(function(event) { 

event.preventDefault(); 

$("#dialog-confirm").dialog('open'); 
return false; 
}); 

$("#dialog-confirm").dialog({ 
    resizable: false, 
    height:190, 
    autoOpen: false, 
    width: 330, 
    modal: true, 
    buttons: { 
      "Yes": function() { 
$.ajax({ 
cache: false, 
type: "POST", 
data: $(this).serialize(), 
url: link, 
// url: "<?php echo $html->url("/gifts/sent/" . $user_obj['User']['id'] . '/' . $gift['GiftPhoto']['id']) ?>", 
success: function() { 
    $('#gift_sent').show(); 
    $(':input', '#submit_<?php echo ($gift['GiftPhoto']['id']); ?>') 
    .not(':button, :submit, :reset, :hidden') 
    .val(''); 
    } 
     }); 
      $(this).dialog("close"); 
      }, 

      "No": function() { 
      $(this).dialog("close"); 
      } 
    } 
}); 

}); 
</script> 



<div id="dialog-confirm" title="Send a Gift"> 
<p>This Gift Cost <?php echo ($gift_cost); ?> Points to send. You sure you want to continue?</p> 
</div> 

這是一個沒有對話框的工作副本：

<script type="text/javascript"> 
jQuery(document).ready(function() { 

$('#submit_<?php echo ($gift['GiftPhoto']['id']); ?>').bind('submit', function(event) { 
$.ajax({ 
    cache: false, 
    type: "POST", 
    url: "<?php echo $html->url("/gifts/sent/" . $user_obj['User']['id'] . '/' . $gift['GiftPhoto']['id']) ?>", 
    data: $(this).serialize(), 

    success: function() { 
    $('#gift_sent').show(); 
    $(':input', '#submit_<?php echo ($gift['GiftPhoto']['id']); ?>') 
    .not(':button, :submit, :reset, :hidden') 
    .val(''); 
    } 
}); 
return false; 
}); 

}); 
</script> 

Answer 1

HI，你已經得到了你的代碼的一些錯誤：

1. 按鈕是被引用和不是沒有

2. 您在提交手錶上創建的表單上有兩個綁定：

   //every form in your code 
   $('form').submit(function() { 
       if (!submit) { 
        $("#dialog-confirm").dialog('open'); 
        return false; 
       } 
   }); 
   
   //concrete one 
   $('#submit_<?php echo ($gift['GiftPhoto ']['id ']); ?>').bind('submit',...);` 
   

修復此問題並在您的瀏覽器中運行控制檯並觀察是否有問題。 它不建議混合使用PHP和JS我看起來非常糟糕，請嘗試在您的html元素上使用data-xxx屬性，並通過jQuery $（）。attr。