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

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也不会执行。 我究竟做错了什么？

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>

UPDATE

您需要更改按钮的类型才能像这样submit

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

Answer 2

一些阻碍你的事情：

1. 在你的javascript中，你有一个尾随}); 就在最后。

2. 您的button无效触发javascript中的提交事件。 您应该更改按钮或使用正确的提交输入。 或者使用type="submit" 。

3. 您在成功回调中没有对data做任何事情。 所以当模态打开时，没有其他事情发生。

4. 您的AJAX请求中的URL未设置。 您可以使用this.action在此处使用表单的操作URL。

我做了一些改变，你可以在我的小提琴中预览。

您应忽略小提琴的某些部分，例如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的形式是正确的网址，并且被发送处理，并在你的表单中的数据echo编回为HTML。

您还需要访问bootstrap文档，获取模型的更好示例，并查看表单区域以修改此表单。

您可以在浏览器中使用开发人员工具，如果仍有问题，请记录控制台中javascript引发的任何错误。 （ Ctrl + Shift + I ）。

您不需要在文档中包装任何内容。

Answer 3

你做错了两件事

首先，您需要使用document.ready包装代码

$(function(){

});

然后你需要修复你的网址

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);
    }

});