使用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

尝试这个：

<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>

结果：