Question

我的表格如

<div id="contact" class="tab-pane fade"></br>
<form class="container" id="form" action="validate.php">
        <div class="col-lg-6 col-sm-6 col-md-6">
            <div class="form-group">
                <label style="color: #fff;" for="name">First Name:</label>
                <input style="color: #C0C0C0;" type="text" class="form-control" name="fname" placeholder="First Name">
            </div>
            <div class="form-group">
                <label style="color: #fff;" for="name">Last Name:</label>
                <input style="color: #C0C0C0;" type="text" class="form-control" name="lname" placeholder="Last Name">
            </div>

            <div class="form-group">
                <label style="color: #fff;" for="subject">Subject:</label>
                <input style="color: #C0C0C0;" type="text" class="form-control" name="subject" placeholder="Subject">
            </div>
        </div>

    <div class="col-lg-6 col-sm-12 col-md-6">
        <div class="form-group">
                <label style="color: #fff;" for="email">Email Address:</label>
                <input style="color: #C0C0C0;" type="email" class="form-control" name="email" placeholder="Email">
            </div>
    </div>
    <div class="col-sm-12">
    <div class="form-group">
      <label style="color: #fff;" for="comment">Your Message:</label>
      <textarea style="color: #C0C0C0;" class="form-control" rows="5" id="message" name="message" placeholder="Type in your message"></textarea>
    </div>
    </div></ br>
    <button role="button" type="submit" value="submit" id="submit" class="btn btn-danger btn-lg btn-block">Send Message</button>
</form>
</div>

在javascript文件中我有这个ajax代码

    $(document).ready(function() {
    //Validate Form Start
    var form = $('form');

    form.submit(function(evt) {
        evt.preventDefault();
        evt.stopPropagation()
        console.log(form.serialize());

    $.ajax({
        type: 'POST',
        url: form.attr("action"),
        data: form.serialize(),
        success: function(response) {
            console.log("Email Sent.");
            $('#submit').html('Message Sent! Await response.');
            $('#submit').attr('class', 'btn btn-success btn-lg btn-block');
            function submitTimeout() {
                $('#submit').html('Send Another Message?');
                $('#submit').attr('class', 'btn btn-danger btn-lg btn-block');
            }
            setTimeout(submitTimeout(), 3000);
            form.each(function(){
                this.reset();
                });
            }
        });
    });
    //Validate form end.

});

正如您在js中将form.serialize();登录到控制台时所看到的那样，它为我提供了重复的空值。

fname=afasw&lname=asd&subject=asf&%EF%BF%BDmail=fasafs%40easdfsf&message=safasff&fname=&email=&subject=&lname=&message=

我不知道为什么会这样，我到处搜寻但是找不到合适的解决办法。任何人都可以帮助我。

另一方面在javascript代码中

function submitTimeout() {
            $('#submit').html('Send Another Message?');
            $('#submit').attr('class', 'btn btn-danger btn-lg btn-block');
        }
        setTimeout(submitTimeout(), 3000);

它只改变了html但没有改变回attr也会立即改变它而忽略3000毫秒超时。我做错了什么？

jQuery.serialize输出重复的空值

0 个答案: