Отправка формы PHP с помощью onClick

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> 

Результат:

Answer 2

попробуйте этот код

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

Ниже рабочий фрагмент кода (без использования проверки HTML5). Вы можете запустить и протестировать его. Я использовал jquery с плагином jquery.validate. Вы можете раскомментировать комментированный код, чтобы перенаправить пользователя на целевой URL. Сообщите нам, если это то, что вы ищете или нет. Не стесняйтесь комментировать, если есть что-то, что вы считаете смущенным.

$(document).ready(function(){ 
 
    $(".btn-download").on("click", function(e) { 
 
    \t \t e.preventDefault(); 
 
     e.stopImmediatePropagation(); 
 
     \t 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>