联系表格在 iphone 上无效答案

【问题标题】：Contact form does not validate on an iphone联系表格在 iphone 上无效
【发布时间】：2014-02-04 12:51:51
【问题描述】：

从 iphone 提交时，以下联系表单无法验证... 可以在这里预览：loaistudio.com/contact

当我尝试在不丢失字段的情况下提交表单时，它打开了一个新的空白页面，仅在左上角显示数字 1“这根本不应该这样做”，实际上将表单发送为空......它不会在桌面上这样做。

我使用代码尝试找出问题，但不知道问题出在哪里！请帮忙。

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

【问题讨论】：

我刚刚提交了一个非空表单并得到了一个'1'

标签： javascript php jquery html iphone

【解决方案1】：

您在 html 的末尾添加 jquery，但在此之前您使用的是 jquery，因此 javascript 与 Uncaught ReferenceError: $ is not defined 中断。
尝试将此行移动到标题：

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

【讨论】：

之所以我把它放在底部是因为这个：stackoverflow.com/questions/21540258/…
然后要么将你的 javacript 放在 jquery 定义之下，要么像这样在 body onload 上运行它 <body onload='runOnLoad()'> function runOnLoad() {$("#contactForm").submit(....
javascript 是一种结构化脚本语言。这意味着您放置代码的顺序很重要。这就是为什么他们建议您将该代码放在最后。这样，即使无法立即加载 jquery 脚本，也可以加载整个 html/css，因此用户可以看到结果，即无需等待脚本加载。但这并不意味着您可以将纯 jquery 代码分散在您的 html 文件中。
所以我也要把联系人JS放在最后？
是的。在<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 行之后

【解决方案2】：

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

这是您添加的代码，然后包含 JQUERY，:) 所以在标题中使用 JQUERY！

【讨论】：

不明白？我需要将整个内容移至标题吗？甚至是 JS 库的链接？
执行 2 个步骤=> 1) 包含 jquery1.10.js => step 2=>现在把那个长的代码放在Form后面