在表單提交后顯示確認模式對話框

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

});