Fancybox表單提交ajax

我有fancybox，我想提交表單。此外，我想要通過在同一頁面內的PHP代碼來處理該表單。以下是我的代碼。Fancybox表單提交ajax

function lunchModal(itemID){ 
     jQuery('.share').on('click', function(){ 
      $data = '<div class="shareModal" ><div class="modal-header"><h3>Share Form Submission</h3></div> \ 
         <form action="" class="shareForm" method="post">\ 
          <div class="modal-body">\ 
           <div class="control-group">\ 
            <label for="inputEmail" class="control-label">Enter Share Email</label>\ 
            <div class="controls">\ 
             <input type="email" id="inputEmail" placeholder="Share Email" name="email">\ 
             <input type="hidden" value="'+itemID+'" id ="documentID">\ 
            </div>\ 
           </div>\ 
          </div>\ 
          <div class="modal-footer">\ 
           <div class="controls">\ 
            <button type="submit" class="btn btn-primary" id="submit">\ 
             <i class="icon icon-envelope"></i>Share</button>\ 
           </div>\ 
          </div>\ 
         </form>\ 
        </div>'; 
      jQuery.fancybox({ 
       height : '55%', 
       autoDimensions: false, 
       width: '70%', 
       scrolling: 'auto', 
       padding: '20px', 
       title: false, 
       content: $data, 
       transitionIn: 'elastic', 
       transitionOut: 'elastic', 
       easingIn : 'easeOutBack', 
       easingOut : 'easeInBack', 
       centerOnScroll: 'true', 
       onComplete: submitForm() 
      }); 
      item_id = false; 
     }); 
    }; 
    function submitForm() { 
     jQuery('#submit').on('submit', function(e) { 
      e.preventDefault(); 
      //var dataString = { 
      // 'action' : 'shareDocument' 
      //}; 
      var email = jQuery('#inputEmail').val(); 
      var id = jQuery('#documentID').val() 
      var dataString = 'email='+email+'&documentID='+id; 
      //jQuery.extend(true, dataString, form_data); 
      console.log(dataString); 

      jQuery.fancybox.showActivity(); 

      jQuery.ajax({ 
       url: window.location.pathname, 
       type: 'POST', 
       data: dataString, 
       beforeSend: function() { 
        console.log(dataString); 
       }, 
       success: function(data) { 
        alert('Document shared successfully'); 
       } 
      }); 
      return true; 
     }); 
    }

現在我的問題是當我提交表單時，頁面正在重新加載，儘管我已經使用了Ajax表單提交。任何人都可以在這方面幫助我嗎？

來源

2013-10-08 John Hack

我認爲提交時應該在表單上，當你將它綁定到一個按鈕時，嘗試使用'on（'click''）或者將選擇器更改爲表單 – Pete

按鈕類型=「提交」

這將刷新頁面烏爾烏爾BCZ提交值聲明的頁面。

所以你必須改變像下面

輸入類型= 「按鈕」我們的代碼的onclick = 「submitForm（）」

這不會重新加載頁面烏爾。

來源

2013-10-08 08:45:44 Tamilarasan

Fancybox表單提交ajax

回答

相關問題