Question

我有一个表单，单击提交按钮后我需要它做两件事：

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

我的表格：

<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>

<强>更新

您需要将按钮的类型更改为submit，如此

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

Answer 2

一些阻碍你的事情：

在您的javascript中，您在结尾处有一个尾随});。
您的button无法在javascript中触发提交事件。您应该更改按钮或使用正确的提交输入。或者使用type="submit"。
您在成功回调中没有对data做任何事情。因此，当模态打开时，没有其他事情发生。
未设置AJAX请求中的URL。您可以使用this.action在此处使用表单的操作网址。

我做了一些您可以在my 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>是引导程序javascript。

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

最后，您需要检查表单中的action是否是正确的网址，以及表单中发送的数据是否已处理并echo重新格式化为HTML。

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

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

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

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

});

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

3 个答案: