在表单提交后显示确认模态对话框

Question

我有一个表单，当提交按钮被点击时，我需要它完成以下两件事：

1. 我需要表单数据在我创建的acknowledge.php中处理。
2. 我需要模态对话框显示确认信息。

我的表单：

<form class="quote-form" method="post" action="acknowledge.php">

  <div class="form-row">
    <label>
      <span>Full Name</span>
      <input type="text" name="name">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Email</span>
      <input type="email" name="email">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Phone</span>
      <input type="number" name="phone">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Nature of Enquiry</span>
      <select name="enquiry">
        <option selected>General Enquiry</option>
        <option>Logo Design</option>
        <option>Web Design</option>
        <option>Branding</option>
        <option>Social Media</option>
        <option>Email/Web Hosting</option>
      </select>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Message</span>
      <textarea name="message"></textarea>
    </label>
  </div>

  <div class="form-row">
    <button type="button" name="send">Get A Quote</button>
  </div>

</form>

我对Javascript和AJAX很陌生，但是我从一些类似的帖子中复制了一些代码，并尝试将其自定义到我的网站上。

<script type="text/javascript">
$(".quote-form").submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    data: $(".quote-form").serialize(),
    url: 'url',
    success: function(data) {
      $("#myModal").modal("show");
    }
  });
  return false;
  });
});
</script>

<!--Modal container-->
<div id="myModal" class="modal">
  <!-- Modal content--> 
  <div class="modal-content">
    <span class="close">x</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

当单击提交按钮时，什么都不会发生。甚至acknowledge.php也不会执行。我做错了什么？

- K. Mak

---

你能在Jsfiddle中发布一个“可工作的”示例吗？此外，您是否检查了控制台并/或使用了诸如Fiddler之类的工具来检查发生了什么？ - Nicolas Bouvrette

我以前从未使用过 Fiddler。 - K. Mak

@K.Mak请提供您的CSS，然后查看我迄今为止的答案。 - Jonathan

Answer 1

你需要将你的代码包裹在一个document.ready()函数中：

<script type="text/javascript">
    $(function(){
        $(".quote-form").submit(function(e){
            e.preventDefault();
            $.ajax({
                type : 'POST',
                data: $(".quote-form").serialize(),
                url : 'url',
                success: function(data) {
                    $("#myModal").modal("show");
                }
            });
            return false;
        });
    });
</script>

更新

您需要将按钮类型更改为submit，如下所示：

<button type="submit" name="send">Get A Quote</button>

- Amin Jafari

---

还是没有任何反应。我应该把这段代码放在html底部还是头部呢？ - K. Mak

无论哪种方式都可以，只要它能够运行。此外，您需要更改按钮的类型并检查更新。 - Amin Jafari

Answer 2

一些阻碍你的事情：

1. 在你的javascript中，你在末尾有一个结尾的});
2. 你的button没有触发javascript中的提交事件。你应该更改按钮或使用适当的提交输入，或使用type="submit".
3. 你在成功回调中没有对data做任何处理。所以当模态框打开时，什么也不会发生。
4. 你AJAX请求中的URL未设置。你可以使用this.action来使用表单的操作URL。

我已经进行了一些更改，你可以在我的fiddle中预览。

有一些fiddle的部分你应该忽略，比如ajax的url和data选项。那些应该是这样的：

  $.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize(),
    //...
  });

我们现在显然不知道的是，您是否已将依赖脚本（如jQuery和bootstrap）包含在页面中。

例如：<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 是bootstrap的javascript。

确保jQuery在bootstrap之前，否则bootstrap将无法加载，因为它依赖于jQuery。您可能还需要使用bootstrap CSS。

最后，您需要检查表单中的action是否为正确的URL，并且发送的表单数据是否被处理并作为HTML echo回来。

您还需要去bootstrap文档中获取更好的模态窗口示例，并查看表单区域以改进此表单。

如果仍然有问题，您可以使用浏览器中的开发人员工具，在控制台中记录Javascript抛出的任何错误。（Ctrl+Shift+I）。 您不需要将任何内容包装在文档准备好的函数中。

- Jonathan

Answer 3

你做了两件错误的事情

首先，你需要用 document.ready 包装你的代码

$(function(){

});

那你需要修复你的url。

var form = $(".quote-form");
$.ajax({
    type : 'POST',
    data: form .serialize(),
    url : form.attr('action'),
    success: function(data) {
        $("#myModal").modal("show");
    },
    error: function (jqXHR, textStatus, errorThrown) { 
        alert(errorThrown);
    }

});

- Almis

---

我已经做了这些更改，但仍然没有任何反应。模态对话框没有显示。 - K. Mak

也许你的ajax请求不成功，添加错误回调并检查是否有任何错误。请检查我的修改。 - Almis