Question

我是AJAX的新手，我必须制作一个弹出的模态联系表单。我有所有的html css验证等。只有AJAX没有，我不知道从哪里开始，请你能帮助我。我只是想阻止它，并且没有页面加载发送电子邮件。

这是Javascript（我认为只需要id我不会发布整个代码）

form id = #contact-form

HTML

    <div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 style="color:#31708f" class="modal-title" id="myModalLabel">Contact</h4>
      </div>
      <div class="modal-body">
        <div class="col-lg-6">
        <form role="form" name"contact-form" id="contact-form" method="post" action="contactengine.php">

          <div class="form-group">
            <label for="name">Name</label>
            <input class="form-control" id="name" type="text" name="name" />
          </div>

          <div class="form-group">
            <label for="e-mail">E-mail adres</label>
            <input class="form-control" id="email" type="email" name="email" />
          </div>

          <div class="form-group">
            <label for="subject">Subject</label>
            <input class="form-control" id="subject" type="text" name="subject" />
          </div>

          <div class="form-group">
            <label for="bericht">Message</label>
            <textarea class="form-control" id="message" name="message" placeholder="" cols="30" rows="5"></textarea> 
          </div>

          <div class="form-group">
            <input class="btn btn-info" id="submit" type="submit" value="Send" />
          </div>
        </form>
      </div>

Answer 1

首先，这不是JavaScript：form id = #contact-form。

基本上你想要做的就是首先让它在没有AJAX和JavaScript的情况下运行。您需要在服务器上运行PHP。

然后，您使用一些JavaScript来阻止发送表单（这是使用jQuery）：

$('#contact-form').on('submit', function(e) {
    e.preventDefault();
    //Here you send the ajax-request to the php-script.
    $.ajax('send.php', {
        data: $(this).serialize(),
        type: 'POST',
        success: function(data) {
            alert(data); //for testing
        }
    });
});

有关如何发送请求的详细信息，请参阅jQuery documentation about ajax。

使用AJAX联系表单（无页面加载）

1 个答案: