下載的表單提交和驗證w/AJAX和jQuery

Question

我已經創建了一個電子郵件地址的輸入表單，工作正常，並通過AJAX和jQuery驗證。我需要的僅僅是「提交」按鈕，以便在表單經過驗證後也可以開始下載特定文件。這個文件不會改變，只要電子郵件有效，每個用戶都是一樣的。

我需要添加到我的jQuery驗證文件，以得到這個工作？謝謝！

這裏是我的表單代碼：

<form name="contact" method="post"> 

    <div id="multitudes-download-form"> 

     <div style="float:left;"> 
      <label for="email">Your Email:</label> 
      <input type="text" name="email" id="email" value=""/> 
     </div> 

     <div> 
     <input type="submit" name="submit" class="button" id="submit_btn" value="Download Now" /> 

     <span class="error" id="email_val_error">Please provide a valid email address.</span><div id="loadingdiv" style="float:right;"><img src="../ajax-loader.gif"/></div> 
     </div> 
    </div> 

</form> 

這裏是我的驗證：

$(function() { 
    $('.error').hide(); 
    $('input.text-input').css({backgroundColor:"#FFFFFF"}); 
    $('input.text-input').focus(function(){ 
    $(this).css({backgroundColor:"#FFDDAA"}); 
    }); 
    $('input.text-input').blur(function(){ 
    $(this).css({backgroundColor:"#FFFFFF"}); 
    }); 

    $(".button").click(function() { 
     // validate and process form 
     // first hide any error messages 
    $('.error').hide(); 

     var email = $("input#email").val(); 
     var atpos=email.indexOf("@"); 
     var dotpos=email.lastIndexOf("."); 
     if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length || email== "") { 
     $("span#email_val_error").fadeIn(); 
     $("input#email").focus(); 
     return false; 
    } 

     var dataString = 'email=' + email; 
     //alert (dataString);return false; 

     $.ajax({ 
     type: "POST", 
     url: "process.php", 
     data: dataString, 
     success: function() { 
     $('#multitudes-download-form').html("<h6>Thank you!</h6>") 
     .hide() 
     .fadeIn(500, function() { 
     }); 
     } 
    }); 
    return false; 
    }); 
}); 

$(function() { 
    $('#loadingdiv') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).fadeIn(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    }); 
}); 

Answer 1

可以使用Ajax的成功事件點擊功能來下載文件觸發錨標記。 給錨點標記下載鏈接，並將其作爲顯示：無作爲內聯樣式