使用onClick提交PHP表單

Question

所以我目前在我的網站上有一個下載鏈接和一個電子郵件地址的輸入字段。

要下載文件，首先需要輸入您的電子郵件。

我使用表單來執行此操作，電子郵件字段是輸入字段，下載按鈕是提交按鈕。

我喜歡HTML5的表單驗證（必填字段，字段類型等，它看起來都非常好）。

問題是如果我在提交按鈕中使用onClick，那么沒有一個好的表單驗證工作。

<form>
     <input type="email" id="email" placeholder="Please enter email" required>

     <input type="submit" class="btn" onclick="downloadWin()" value="Windows">
     <input type="submit" class="btn" onclick="downloadOsx()" value="Osx">  
</form>


<script>
    function downloadWin(){
        event.preventDefault();
        var email = $("#email").val();
        if(email != ''){
            if(validateEmail(email)){
                location.href='http://s/index.php?page=downloadWin&email='+email;
            }
        }
    }

    function downloadOsx(){
        event.preventDefault();
        var email = $("#email").val();
        if(email != ''){
            if(validateEmail(email)){
                location.href='http://s/index.php?page=downloadOsx&email='+email;
            }
        }
    }

</script>

這可能不是最干凈的方法，所以如果你認為你知道更好的方式請告訴我:)

Answer 1

試試這段代碼

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
function downloadWin() {
    var email = $("#email").val();
    if (email != '') {
        if (validateEmail(email)) {
            location.href = 'http://s/index.php?page=downloadWin&email=' + email;
        }
    }
    return false;
}

function downloadOsx() {
    var email = $("#email").val();
    if (email != '') {
        if (validateEmail(email)) {
            location.href = 'http://s/index.php?page=downloadOsx&email=' + email;
        }
    }
    return false;
}

Answer 2

試試這個：

<form onsubmit="download(this.email.value,this.system.value)" id="form">
    <input type="email" id="email" name="email" placeholder="Please enter email" required>
    <input type="radio" name="system" value="Win" required >Windows
    <input type="radio" name="system" value="Osx" >Osx
    <input type="submit" class="btn"  value="Download"> 
</form>

<script type="text/javascript">
document.getElementById("form").addEventListener("submit", function(event){
    event.preventDefault();
});

function download(email_value,sys_value){
    location.href='http://s/index.php?page=download'+sys_value+'&email='+email_value;
}
</script>

結果：

Answer 3

以下是工作代碼段（不使用HTML5驗證）。 您可以運行並測試它。 我已經將jquery與jquery.validate插件一起使用了。 您可以取消注釋注釋代碼以將用戶重定向到目標網址。 如果您正在尋找或不尋找，請告訴我們。 如果有任何您感到困惑的話，請隨意發表評論。

 $(document).ready(function(){ $(".btn-download").on("click", function(e) { e.preventDefault(); e.stopImmediatePropagation(); if ($("#validateForm").valid()) { var name = $(this).val(); var email = $("#email").val(); if (name === "Windows") { //location.href = 'http://s/index.php?page=downloadWin&email=' + email; console.log('http://s/index.php?page=downloadWin&email=' + email); } if (name === "Osx") { console.log('http://s/index.php?page=downloadOsx&email=' + email); //location.href = 'http://s/index.php?page=downloadOsx&email=' + email; } } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script> <form method="post" action="" id="validateForm" novalidate> <input type="email" id="email" placeholder="Please enter email" required> <input type="submit" name="btnSubmit" class="btn btn-download" value="Windows"> <input type="submit" name="btnSubmit" class="btn btn-download" value="Osx"> </form>