表單提交，驗證並在新標籤中打開鏈接

Question

您好我有一個表格可以說http://www.domain1.com它使用jquery驗證，並在成功驗證我希望它提交表單到我使用upsales.com（一個crm系統）（但我有超過上upsales.com代碼沒有對照組），也打開新的標籤頁的鏈接 - 讓說：http://www.domain1.com/file.pdf，藏漢作爲提交表單，這是我曾嘗試：

jQuery('.propertyDetailForm').validate({ 
    rules: { 
     'Client.name': { 
      required: true, 
     }, 
     'Contact.email': { 
      required: true, 
      email: true 
     }, 
     'Contact.phone': { 
      minlength: 9, 
      required: true 
     } 
    }, 
    submitHandler: function(form) { 
     jQuery('#submitForm').click(); 
     jQuery('.propertyDetailForm').submit(); 
    } 
});  

這是我需要點擊成功驗證的鏈接：jQuery（'＃submitForm'）。click（）;

但目前它只提交表單而不是模擬點擊。

我也曾嘗試submitHandler的：

jQuery('.propertyDetailForm').validate({ 
    rules: { 
     'Client.name': { 
      required: true, 
     }, 
     'Contact.email': { 
      required: true, 
      email: true 
     }, 
     'Contact.phone': { 
      minlength: 9, 
      required: true 
     } 
    } 
});  

if (jQuery(".propertyDetailForm").validate().form()) { 
    jQuery('#submitForm').click(); 
    jQuery('.propertyDetailForm').submit(); 
} 

我的HTML是：

<form id="upsales_form" class="main-prop form inline upsale-form propertyDetailForm" method="POST" action="https://power.upsales.com/api/external/formSubmit" novalidate="novalidate"> 
    <div class="control-group"> 
     <label for="Client.name" class="control-label">Name*:</label> 
     <div class="controls"> 
      <input type="text" required="" placeholder="Name*:" id="ClientName" name="Contact.name" class="form-control required"> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label for="Contact.email" class="control-label">Email*:</label> 
     <div class="controls"> 
      <input type="text" required="" placeholder="Email*:" name="Contact.email" class="form-control required email"> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label for="Contact.phone" class="control-label">Phone*:</label> 
     <div class="controls"> 
      <input type="text" required="" placeholder="eg. 952123456" id="Contact.phone" name="Contact.phone" class="form-control required input-small"> 
     </div> 
    </div> 

    <div id="check-group" class="control-group chkbox-container"> 
     <label class="checkbox"> 
      <input type="checkbox" value="on" id="Client.custom_47" name="Client.custom_47" class="form-control"> 
      Please tick if you require a mortgage 
      <img width="30" src="assets/media/images/logo_dnb_100.jpg"> 
     </label> 
     <div class="clearfix"></div> 
    </div> 

    <div class="control-group"> 
     <div class="controls"> 
      <div id="buttonWrapper"> 
       <a target="_blank" id="submitForm" href="http://www.domain.com/file.pdf" style="display: none;"></a> 
       <button class="btn btn-success" id="upsalesSubmit" type="submit">Download Property PDF NOW</button> 
      </div> 
     </div> 
    </div> 
</form> 

Answer 1

你的代碼是怎麼回事時，有效的形式提交給運行...

submitHandler: function(form) { 
    jQuery('#submitForm').click(); 
    jQuery('.propertyDetailForm').submit(); 
} 

您的.submit()將提交表單並重定向瀏覽器以加載表單的中的URL屬性...

action="https://power.upsales.com/api/external/formSubmit" 

如果選項卡是新的頁面上，那麼你就不能你到達那裏之前打開它。客戶端JavaScript只能控制當前加載的頁面，而不能在加載之前控制其他頁面。

你還沒有顯示你的代碼爲標籤，但通常，jQuery選項卡插件允許您加載頁面與已打開的標籤通過使用錨點。像這樣...

action="https://power.upsales.com/api/external/formSubmit/#Tab3"