Question

我收到了这个HTML表单代码：

        <form id="main-contact-form" name="contact-form">
            <div class="row  wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="300ms">
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="text" id="name" name="name" class="form-control" placeholder="Name" required>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input type="email" id="email" name="email" class="form-control" placeholder="Email Address" required>
                </div>
              </div>
            </div>
            <div class="form-group">
              <input type="text" id="subject" name="subject" class="form-control" placeholder="Subject" required>
            </div>
            <div class="form-group">
              <textarea name="message" id="message" class="form-control" rows="4" placeholder="Enter your message" required></textarea>
            </div>                        
            <div class="form-group">
              <button type="submit" class="btn-submit">Send Now</button>
            </div>
          </form>

以及我认为它发送信息的相应jQuery代码：

// Contact form
var form = $('#main-contact-form');     
form.submit(function(event){
    event.preventDefault();

    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $(this).attr('action'),
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Thank you for contact us. As early as possible  we will contact you</p>').delay(3000).fadeOut();
    });
});

当我提交表单时，我的网络邮件中没有任何内容。谁能发现问题？

由于

Answer 1

你应该告诉我你想要使用ajax。所以你应该这样做：

在jour jQuery中：

// Contact form
var form = $('#main-contact-form');     
form.submit(function(event){
    event.preventDefault();

    var name = $('#name').val();
    var subject = $('#subject').val();
    var email = $('#email').val();
    var message = $('#message').val();          

    var form_status = $('<div class="form_status"></div>');
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: {name: name, subject:subject, email:email, message:message }, 
        beforeSend: function(){
            form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );
        }
    }).done(function(data){
        form_status.html('<p class="text-success">Thank you for contact us. As early as possible  we will contact you</p>').delay(3000).fadeOut();
    });
});

并在您的HTML中保持原样。

告诉我它是否有帮助。

自定义ajax发送邮件表单

1 个答案: