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

Question

我有一个表格，一旦单击提交按钮，我就需要做2件事：

1. 我需要在我创建的确认为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>

单击"提交"按钮时，什么也不会发生。即使是确认。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在引导程序上方，或者引导程序将无法加载，因为它取决于jQuery。您可能还需要使用Bootstrap CSS。

最后，您需要检查表格中的action是否是正确的URL，并且已发送的表单中的数据已处理，并将echo ED返回为HTML。

您还需要转到Bootstrap文档，获得模式的更好示例，然后查看表格区域以张开此表格。

，您可以在浏览器中使用开发人员工具，并注意JavaScript在控制台中遇到的任何错误，如果您仍然有问题。（ ctrl shift i ）。

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

Answer 3

您做两件事错误

首先，您需要将代码与Document.Ready.dready

包装。

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