Le formulaire de contact ne valide pas sur un iphone

Le formulaire de contact suivant ne valide pas lors de la soumission d'un iphone … Il peut être visualisé ici: loaistudio.com/contact

Lorsque j'ai essayé de soumettre le formulaire sans avoir décroché les champs, il a ouvert une nouvelle page vierge montrant le numéro 1 uniquement sur le côté supérieur gauche "ce qui n'est pas censé faire du tout" et a effectivement envoyé le formulaire vide … Il ne fait pas Que sur le bureau.

J'ai joué avec le code essayant de trouver le problème, mais je ne sais pas où est le problème! Aidez-vous.

<?php session_start(); if ($_SERVER['REQUEST_METHOD'] == 'POST'){ ob_start(); if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message']) && isset($_POST['token'])){ if($_SESSION['token'] != $_POST['token']){ $response = "0"; } else { $_SESSION['token'] = ""; $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $to = "EMAIL GOES HERE"; $subject = "New Message From: $name"; $message = "$message"; $headers = 'MIME-Version: 1.0' . "\r\n"; $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n"; $headers .= 'From: '.$email . "\r\n"; $mailed = ( mail($to, $subject, $message, $headers) ); if( isset($_POST['ajax']))$response = ($mailed) ? "1" : "0"; else $response = ($mailed) ? "<h2>Success!</h2>" : "<h2>Error! There was a problem with sending.</h2>"; echo $response; } } else { echo "Form data error!"; } ob_flush(); die(); } ?> <!DOCTYPE html> <html class="no-js"> <head> <title>Contact us | Website</title> </head> <body> <div class="wrapper" id="contactPage"> <div class="content"> <?php $token = md5(uniqid(rand(), TRUE)); $_SESSION['token'] = $token; ?> <!--Contact Form--> <form action="contact.php" id="contactForm" method="post" name="contactForm"> <input name="token" type="hidden" value="<?php echo $token; ?>"> <input name="ajax" type="hidden" value="1"> <div class="name"> <p>Your Name</p> <input name="name" placeholder="Enter Name" required="" type="text"> </div> <div class="email"> <p>Email Address</p> <input name="email" placeholder="Enter Email" required="" type="email"> </div> <div class="message"> <p>Message</p> <textarea name="message" required=""></textarea> </div> <button id="submit" type="submit">Send</button> </form> <script type="text/javascript"> $("#contactForm").submit(function(event) { event.preventDefault(); $submit = $(this).find('button[id="submit"]'); var posting = $.post($(this).attr('action'), $('#contactForm').serialize()); posting.done(function(data) { $('span.error').remove(); if (data == "1") { $submit.text('Sent. Thank You!'); $submit.addClass("sent"); $submit.attr('disabled', 'disabled'); } else { $submit.after('<span style="display: inline-block; padding: 15px 5px; color: #bd3d3d">Failed to send the message, please try again later.</span>'); $submit.text('Try Again'); } }); }); </script> </body> </html>

Vous ajoutez jquery à la fin du html, mais vous utilisez jquery avant cela, alors javascript se casse avec Uncaught ReferenceError: $ is not defined .
Essayez de déplacer cette ligne vers l'en-tête:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  <script type="text/javascript"> $("#contactForm").submit(function(event) { event.preventDefault(); $submit = $(this).find('button[id="submit"]'); var posting = $.post($(this).attr('action'), $('#contactForm').serialize()); posting.done(function(data) { $('span.error').remove(); if (data == "1") { $submit.text('Sent. Thank You!'); $submit.addClass("sent"); $submit.attr('disabled', 'disabled'); } else { $submit.after('<span style="display: inline-block; padding: 15px 5px; color: #bd3d3d">Failed to send the message, please try again later.</span>'); $submit.text('Try Again'); } }); }); </script>

C'est le code que vous avez ajouté, puis JUGER INCLUS, 🙂 SO USE JQUERY IN HEADER!