Question

以下联系表单在从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>

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

Answer 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，:)所以在HEADER中使用JQUERY！

联系表格不在iphone上验证

2 个答案: