表單提交後停止JS重新加載頁面

我使用MVC框架CodeIgniter,FullCalendar,Bootstrap和Jquery來創建網站。表單提交後停止JS重新加載頁面

日曆具有可點擊的事件，這些事件可打開包含表單的模式對話框。
窗體似乎工作，因爲控制器方法被正確調用和數據庫更新，但我想避免網站轉到其他頁面或提交表單後重新加載。
我試過幾種方法：

e.preventDefault(); 
return false;

更多...

這裏是關於模態對話框和形式的HTML：

  <div class="modal-body"> 
       <form id="myForm" action="<?=base_url()?>index.php/activite/planning_people" method="post"> 
        <input type="hidden" id="date" name="date"/> 
        <input type="hidden" id="id" name="id"/> 
        <?php foreach ($people as $person) : ?> 
         <div class="checkbox"> 
          <label><input type="checkbox" value="<?=$person['number']?>" name="people[]"><?= $person['firstname']." ".$person['lastname'] ?></label> 
         </div> 
        <?php endforeach; ?> 
      </div> 

      <div class="modal-footer"> 
        <input class="btn btn-lg" type="submit" id="submitButton" value="Validate"> 
       </form> 
      </div> 

<div class="container"> 
    <div id="bootstrapModalFullCalendar"></div> 
</div>

這裏是針對的javascritpt eventClick event：

eventClick: function(event) { 
     var inputs = document.getElementsByTagName('input'); 

     $('#modalTitle').html(event.title+" "+moment(event.start).format('LL')); 
     $('#id').val(event.id.split(" ")[0]); 
     $('#date').val(event.id.split(" ")[1]); 
     $('#fullCalModal').modal(); 
    } 
}); 

$('#submitButton').submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: "<?=base_url("index.php/activity/planning_people")?>", 
     type: "POST", 
     data: $("myForm").serializeArray(), 
     success: function(data){ 
      alert(data); 
     }, 
    }); 
    return false; 
});

另外，t他沒有顯示成功警報。

控制器重定向到一個空白頁：

public function planning_people() { 
    $people = $this->input->post("people[]"); 
    $id = $this->input->post("id"); 
    $date = $this->input->post("date"); 
    $this->EZ_query->delete_planning($id, $date); 

    if ($people != null) { 
     foreach ($encadrants as $key => $no) { 
      $this->EZ_query->add_planning($id, $date, $no); 
     } 
    } 
}

我的問題已經解決了大量的時間，我已經查了很多同樣的問題的計算器頁面沒有成功的。請幫忙！
感謝

來源

2017-05-23 Elliott Addi

它看起來像你創建每次點擊的東西時一個新的'submit'處理程序。什麼時候觸發eventClick？ –

另外，不應該將'.submit（...）'方法應用於表單而不是按鈕？ – DavidG

@MikeC'eventClick'每當用戶點擊日曆上的一個事件時觸發（用戶點擊「會議」從下午1點到3點） –

1：您需要使用submit的形式不給submit button

$('#myForm').submit(function(e) {

，而不是

$('#submitButton').submit(function(e) {

第二：您myForm之前忘了#標誌編號

data: $(this).serializeArray(), // or data: $("#myForm").serializeArray(),

代替

data: $("myForm").serializeArray(),

來源

2017-05-23 20:54:47

感謝你的回答，我認爲它已經工作了，但它沒有：/ submit函數被調用，而沒有按照預期刷新頁面。不幸的是，現在，表單的表單現在被提交爲空。我的意思是，在調試窗口中，我們可以看到'POST'調用控制器方法，但沒有元素，'alert（data）'顯示一個空框 –

@ElliottAddi更新了答案，你的代碼 –

非常感謝@MohamedYousef！ –

表單提交後停止JS重新加載頁面

回答

相關問題