表单因JS文件而未提交?

时间:2014-03-31 13:53:25

标签: javascript php html

我已经发现我的表单的JS文件有问题,这使我的表单停止提交,我使用与我的联系表单相同的JS代码作为我的联系表单,因为它的工作原理很多更好的错误检查和东西。虽然使用它,我的表格根本没有提交?没有它,表格有效吗?我自己试过检查它,但我不知道JS代码,所以我不知道问题是什么?如果有人能帮助我,我会很开心!干杯......表格应该发送到“register.php”

表格代码:

<div class="alert alert-success hidden" id="contactSuccess">
                                <strong>Success!</strong> Your message has been sent to us.
                            </div>

                            <div class="alert alert-danger hidden" id="contactError">
                                <strong>Error!</strong> There was an error sending your message.
                            </div>

                            <form name="register" action="register.php" id="contactForm" method="POST">
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-6">
                                            <label>First name *</label>
                                            <input type="text" value="" data-msg-required="Please enter your first name." maxlength="100" class="form-control" name="first_name" id="name">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Last name *</label>
                                            <input type="text" value="" data-msg-required="Please enter your last name." maxlength="100" class="form-control" name="last_name" id="name">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label>Your email address *</label>
                                            <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email_address" id="email">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-6">
                                            <label>Username *</label>
                                            <input type="text" value="" data-msg-required="Please enter a valid username." maxlength="100" class="form-control" name="username" id="name">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Contact Number *</label>
                                            <input type="number" value="" data-msg-required="Please enter your mobile number." maxlength="100" class="form-control" name="mobile" id="name">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-6">
                                            <label>Date of birth *</label><br>
                                            <fieldset class="date">
  <select id="date1"
          name="date1" />
    <option>1</option>      
    <option>2</option>      
    <option>3</option>      
    <option>4</option>      
    <option>5</option>      
    <option>6</option>      
    <option>7</option>      
    <option>8</option>      
    <option>9</option>      
    <option>10</option>      
    <option>11</option>      
    <option>12</option>      
    <option>13</option>      
    <option>14</option>      
    <option>15</option>      
    <option>16</option>      
    <option>17</option>      
    <option>18</option>      
    <option>19</option>      
    <option>20</option>      
    <option>21</option>      
    <option>22</option>      
    <option>23</option>      
    <option>24</option>      
    <option>25</option>      
    <option>26</option>      
    <option>27</option>      
    <option>28</option>      
    <option>29</option>      
    <option>30</option>      
    <option>31</option>      
  </select> 
  <select id="date2"
          name="date2" />
    <option>Jan</option>      
    <option>Feb</option>      
    <option>Mar</option>      
    <option>Apr</option>      
    <option>May</option>      
    <option>Jun</option>      
    <option>Jul</option>      
    <option>Aug</option>      
    <option>Sep</option>      
    <option>Oct</option>      
    <option>Nov</option>      
    <option>Dec</option>      
  </select> 
  <select id="date3"
         name="date3" />
    <option>1905</option> 
    <option>1906</option> 
    <option>1907</option> 
    <option>1908</option> 
    <option>1909</option> 
    <option>1910</option> 
    <option>1911</option> 
    <option>1912</option>  
    <option>1913</option> 
    <option>1914</option> 
    <option>1915</option> 
    <option>1916</option> 
    <option>1917</option> 
    <option>1918</option> 
    <option>1919</option>  
    <option>1920</option> 
    <option>1921</option> 
    <option>1922</option>  
    <option>1923</option> 
    <option>1924</option> 
    <option>1925</option> 
    <option>1926</option>  
    <option>1927</option> 
    <option>1928</option> 
    <option>1929</option> 
    <option>1930</option> 
    <option>1931</option> 
    <option>1932</option> 
    <option>1933</option> 
    <option>1934</option>  
    <option>1935</option> 
    <option>1936</option> 
    <option>1937</option> 
    <option>1938</option> 
    <option>1939</option> 
    <option>1940</option> 
    <option>1941</option>  
    <option>1942</option> 
    <option>1943</option> 
    <option>1944</option>  
    <option>1945</option> 
    <option>1946</option> 
    <option>1947</option> 
    <option>1948</option> 
    <option>1949</option> 
    <option>1950</option> 
    <option>1951</option> 
    <option>1952</option> 
    <option>1953</option> 
    <option>1954</option> 
    <option>1955</option> 
    <option>1956</option>  
    <option>1957</option> 
    <option>1958</option> 
    <option>1959</option> 
    <option>1960</option> 
    <option>1961</option> 
    <option>1962</option> 
    <option>1963</option>  
    <option>1964</option> 
    <option>1965</option> 
    <option>1966</option>  
    <option>1967</option> 
    <option>1968</option> 
    <option>1969</option> 
    <option>1970</option>
    <option>1971</option> 
    <option>1972</option> 
    <option>1973</option> 
    <option>1974</option> 
    <option>1975</option> 
    <option>1976</option> 
    <option>1977</option> 
    <option>1978</option>  
    <option>1979</option> 
    <option>1980</option> 
    <option>1981</option> 
    <option>1982</option> 
    <option>1983</option> 
    <option>1984</option> 
    <option>1985</option>  
    <option>1986</option> 
    <option>1987</option> 
    <option>1988</option>  
    <option>1989</option> 
    <option>1990</option> 
    <option>1991</option> 
    <option>1992</option> 
    <option>1993</option> 
    <option>1994</option> 
    <option>1995</option> 
    <option>1996</option> 
    <option>1997</option> 
    <option>1998</option> 
    <option>1999</option>   
    <option>2000</option>  
    <option>2001</option>  
    <option>2002</option>      
    <option>2003</option>  
    <option>2004</option>  
    <option>2005</option>  
    <option>2006</option>      
    <option>2007</option>      
    <option>2008</option> 
    <option>2009</option>      
    <option>2010</option>      
    <option>2011</option>      
    <option>2012</option>      
    <option>2013</option>      
    <option>2014</option>        
  </select>
</fieldset> 
                                        </div>
                                        <div class="col-md-6">
                                            <label>Contact Number *</label>
                                            <input type="radio" name="gender" value="Male" > Male
  <input type="radio" name="gender" value="Female" > Female
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="submit" name="Submit" value="Register" class="btn btn-lg btn-primary">
                                    </div>
                                </div>
                            </form>

JS Code(js / views / view.contact.js):

/*
Name:           View - Contact
Written by:     Okler Themes - (http://www.okler.net)
Version:        2.0
*/

(function() {

    "use strict";

    var Contact = {

        initialized: false,

        initialize: function() {

            if (this.initialized) return;
            this.initialized = true;

            this.build();
            this.events();

        },

        build: function() {

            this.validations();

        },

        events: function() {



        },

        validations: function() {

            $("#contactForm").validate({
                submitHandler: function(form) {

                    // Loading State
                    var submitButton = $(this.submitButton);
                    submitButton.button("loading");

                    // Ajax Submit
                    $.ajax({
                        type: "POST",
                        url: "php/contact-form.php",
                        data: {
                            "name": $("#contactForm #name").val(),
                            "email": $("#contactForm #email").val(),
                            "subject": $("#contactForm #subject").val(),
                            "message": $("#contactForm #message").val()
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data.response == "success") {

                                $("#contactSuccess").removeClass("hidden");
                                $("#contactError").addClass("hidden");

                                // Reset Form
                                $("#contactForm .form-control")
                                    .val("")
                                    .blur()
                                    .parent()
                                    .removeClass("has-success")
                                    .removeClass("has-error")
                                    .find("label.error")
                                    .remove();

                                if(($("#contactSuccess").position().top - 80) < $(window).scrollTop()){
                                    $("html, body").animate({
                                         scrollTop: $("#contactSuccess").offset().top - 80
                                    }, 300);
                                }

                            } else {

                                $("#contactError").removeClass("hidden");
                                $("#contactSuccess").addClass("hidden");

                                if(($("#contactError").position().top - 80) < $(window).scrollTop()){
                                    $("html, body").animate({
                                         scrollTop: $("#contactError").offset().top - 80
                                    }, 300);
                                }

                            }
                        },
                        complete: function () {
                            submitButton.button("reset");
                        }
                    });
                },
                rules: {
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    subject: {
                        required: true
                    },
                    message: {
                        required: true
                    }
                },
                highlight: function (element) {
                    $(element)
                        .parent()
                        .removeClass("has-success")
                        .addClass("has-error");
                },
                success: function (element) {
                    $(element)
                        .parent()
                        .removeClass("has-error")
                        .addClass("has-success")
                        .find("label.error")
                        .remove();
                }
            });

        }

    };

    Contact.initialize();

})();

0 个答案:

没有答案