Submitting a PHP form with onClick

Question

So I currently have a download link and an input field for an email address on my website.

In order to download the file you first need to put in your email.

I use a form to do this, with the email field being an input field and the download button being a submit button.

I like HTML5's form validation (the required fields, field types etc, it all looks very nice).

The problem is that if I use onClick in my submit button then none of the nice form validation works.

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

This might not be the cleanest way to do it, so please if you think you know a better way tell me :)

Answer 1

Try this:

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

Result:

Answer 2

try this code

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 3

Below is the working code snippet (without using HTML5 validation). You can run and test it. I have used the jquery with jquery.validate plugin. You can uncomment the commented code to redirect user to the target url. Let us know if this what you are looking for or not. Feel free to comment if there is anything that you feel confusing.

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