Question

我创建了一个表单，通过电子邮件向网站所有者发送消息，并将消息上传到数据库。它有效，但在两个过程中都提交两次，但第一个总是空的。

我不是一个大型的jquery大师，所以解决方案很简单......

以下是代码：

<h3 id="h3">Contact</h3>
<p>Please fill the form below!</p>
<p>
    <form id="contactform" name="contactform" action="pages/contact_send.php" method="post">

        <input type="text" name="c_name"   id="c_name"   class="form-input" placeholder="Name">
        <span></span>

        <input type="text" name="c_phone" id="c_phone" class="form-input" placeholder="003601234567">
        <span></span>

        <input type="text" name="c_mail" id="c_mail" class="form-input" placeholder="E-mail">
        <span></span>

        <textarea name="c_message" id="c_message" class="form-input-textarea" placeholder="Message"></textarea>
        <span></span>

        <input type="submit" name="submit" id="submit" value="Send" class="form-input">       
    </form>

</p>
<script type="text/javascript">
    $(document).ready(function() {
    // validate subscribe form
        $('#contactform').validate({
            rules: {
                c_name: {
                    required: true,
                    minlength: 4
                },
                c_phone: {
                    required: true,
                    minlength: 8,
                    number: true
                },
                c_mail: {
                    required: true,
                    email: true
                },
                c_message: {
                    required: true,
                    minlength: 4
                },                                 
            },
            messages: {
                c_name: {
                    required: "<br />Name required!",
                    minlength: "<br />Minimum 4 characters!"
                },
                c_phone: {
                    required: "<br />Phone number is neccessary!",
                    minlength: "<br />Minimum 4 characters!"
                },
                c_mail: {
                    required: "<br />Please, give your e-mail!",
                    minlength: "<br />Minimum 4 characters!"
                },
                c_message: {
                    required: "<br />Message can not be empty!",
                    minlength: "<br />Minimum 4 characters!"
                },                
            },
            errorClass: "i_error",
            errorPlacement: function(error, element) {
                   error.insertAfter(element);
            },
            submitHandler: function(form) {
              // Stop form from submitting normally
                event.preventDefault();                        

                var c_name    = $('#c_name').val();
                var c_phone   = $('#c_phone').val();
                var c_mail    = $('#c_mail').val();
                var c_message = $('#c_message').val();
                var c_page    = $('#logo').text();
                var c_menu    = $('#h3').text();



                    $.post("pages/contact_send.php",
                    {
                        name    :  c_name,
                        phone   :  c_phone,
                        mail    :  c_mail,
                        message :  c_message,
                        page    :  c_page,
                        menu    :  c_menu

                    },
                    function(data, status){
                        $('#contact_content').empty();
                        document.getElementById("contact_content").innerHTML=data;
                    });       
                }                                              
            }); 
        });                       
</script>

这是php

<?php
  session_start();

  include_once "../includes/config.php";

  include_once "../includes/functions.php";

  $getip = get_ip_address();

  $query = "INSERT INTO `contact` (`id`, `page`, `menu`, `name`, `phone`, `mail`, `message`, `time`, `ip`) 
  VALUES (NULL, '$_POST[page]', '$_POST[menu]', '$_POST[name]', '$_POST[phone]', '$_POST[mail]', '$_POST[message]', NOW(), '$getip' );";



  if($result = $mysqli->query($query)){  
      print "<p class='success'><img src='../style/images/tick.png'>Thank you!</p>";  
      sendcontactinfo($_POST['page'], $_POST['menu'], $_POST['name'], $_POST['phone'], $_POST['mail'], $_POST['message'], $getip);
  }
  else{  printf("Errormessage: %s\n", $mysqli->error);  }
?>

谢谢！

Answer 1

它提交两次的原因是因为即使您使用event，也未定义event.preventDefault()。请尝试以下方法：

$(document).ready(function() {
    // prevent default submit behavior then validate subscribe form
    $("#contactform").submit(function(event) {
        event.preventDefault();
    }).validate({
        rules: {
            c_name: {
                required: true,
                minlength: 4
            },
            c_phone: {
                required: true,
                minlength: 8,
                number: true
            },
            c_mail: {
                required: true,
                email: true
            },
            c_message: {
                required: true,
                minlength: 4
            },                                 
        },
        messages: {
            c_name: {
                required: "<br />Name required!",
                minlength: "<br />Minimum 4 characters!"
            },
            c_phone: {
                required: "<br />Phone number is neccessary!",
                minlength: "<br />Minimum 4 characters!"
            },
            c_mail: {
                required: "<br />Please, give your e-mail!",
                minlength: "<br />Minimum 4 characters!"
            },
            c_message: {
                required: "<br />Message can not be empty!",
                minlength: "<br />Minimum 4 characters!"
            },                
        },
        errorClass: "i_error",
        errorPlacement: function(error, element) {
               error.insertAfter(element);
        },
        submitHandler: function(form) {                     

            var c_name    = $('#c_name').val();
            var c_phone   = $('#c_phone').val();
            var c_mail    = $('#c_mail').val();
            var c_message = $('#c_message').val();
            var c_page    = $('#logo').text();
            var c_menu    = $('#h3').text();



            $.post("pages/contact_send.php",
            {
                name    :  c_name,
                phone   :  c_phone,
                mail    :  c_mail,
                message :  c_message,
                page    :  c_page,
                menu    :  c_menu

             },
             function(data, status){
                 $('#contact_content').empty();
                 document.getElementById("contact_content").innerHTML=data;
                });       
            }                                              
        }); 
    });

Jquery表单提交了两次

1 个答案: