Обязательный атрибут и кнопка отправки формы

Question

Это мой код:

index.php

<form action=""> 
<input placeholder="Name" class="form" id="nome" type="text" required/> 
<input placeholder="Mail" class="form" id="mail" type="email" required /> 
<input placeholder="Object" class="form" id="oggetto" type="text" required /> 
<textarea placeholder="Message" id="text" class="form"></textarea> 
<input class="formBtn" type="submit" id="submit"/> 
<input class="formBtn" type="reset" /> 

скрипт index.php

<script> 
    $('#submit').click(function() { 
     var nameform = $('#name').val(); 
     var mailform = $('#mail').val(); 
     var objectform = $('#object').val(); 
     var textform = $('#text').val(); 
     var mailcomplete = 'Name='+nameform+'&Mail='+mailform+'&Object='+objectform+ 
'&Message='+textform; 

     $.ajax({ 
      type: "POST", 
      url: 'php/mail.php', 
      data: mailcomplete, 
      success: function() { 
      alert("Well Done!"); 
      } 

     }); 
}); 

м ail.php

<?php 

$name = $_POST['Name']; 
$mail = $_POST['Mail']; 
$object = $_POST['Object']; 
$message = $_POST['Message']; 

mail("mail@mail.it", $object, $message, 
    "From: $mail\r\n" . 
    "Reply-To: $mail\r\n" . 
    "X-Mailer: PHP/" . phpversion()); 

?> 

С помощью этого кода я могу отправить почту, если все поля тоже нулевые. Я бы добавил элемент управления для отправки почты, когда все поля рассматривают обязательные атрибуты. Tnk вы так много! Bye

Answer 1

Это произойдет, потому что, когда нажата кнопка отправки, выполняется вызов ajax, чтобы предотвратить такое - используйте событие отправки в форме jquery, вы можете сделать это по вашему желанию с помощью следующего кода.

Сначала добавьте идентификатор в форму, как показано ниже:

<form action="" id="formId"> 
    <input placeholder="Name" name="Name" class="form" id="name" type="text" required/> 
    <input placeholder="Mail" name="Mail" class="form" id="mail" type="email" required /> 
    <input placeholder="Object" name="Object" class="form" id="oggetto" type="text" required /> 
    <textarea placeholder="Message" name="Message" id="text" class="form"></textarea> 
    <input class="formBtn" name="submit" type="submit" id="submit"/> 
    <input class="formBtn" name="reset" type="reset" /> 
</form> 

Теперь Jquery код

$(document).on('submit','#formId',function(e){ 
    // this will prevent form to submit 
    e.preventDefault(); 
    // data need to send can be get with javascript serialize() 
    var data = $("#formId").serialize(); 
    // now go for ajax call 
    $.ajax({ 
     type: "POST", 
     url: 'php/mail.php', 
     data: data, 
     success: function() { 
     alert("Mail inviata correttamente!"); 
     } 

    }); 
})