Submitting a PHP form using onClick

Question

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

To upload a file, you first need to put it in your email address.

I use the form for this: the email field is the input field, and the download button is the submit button.

I like HTML5 form validation (required fields, field types, etc., everything looks very good).

The problem is that if I use onClick in my submit button, then no good validation check 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 may not be the cleanest way to do this, so please if you think you know the best way to tell me :)

Answer 1

Try the following:

 <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 a snippet of working code (without using HTML5 validation). You can run and test it. I used jquery plugin with jquery.validate . You can uncomment the commented code to redirect the user to the destination URL. Let us know if this is what you are looking for or not. Feel free to comment if there is something that you find obscure.

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