Hiển thị thông báo sau khi submit form

Hiển thị thông báo sau khi submit form áp dụng cho form đặt hàng hoặc liên hệ, sau khi chúng ta hoàn thành điền form và nhấn submit form sẽ hiển thị thông báo.

Hiển thị thông báo sau khi submit form



Thư viện cần dùng, đa số blog nào cũng có, nếu blog của bạn chưa có thì thêm thư viện này vô


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

1. CSS
Tạo một class hidden để ẩn.


<style>
  .hidden {
    display: none
  }
</style>


2. HTML

Mình có một đoạn html của form như dưới


<p class = "message hidden">Gửi thành công!</p>
<form action="/" id = "form" target="hidden_iframe">
  <input type="text" placeholder="Name">
  <input type="text" placeholder="Phone">
  <input type="submit" value="Submit">
</form> 
<iframe class = "myifram hidden" name="hidden_iframe"></iframe>

3. Các hiểu hiển thị sau khi nhấn Submit

- Ẩn form và hiển thị thông báo Gửi thành công!


<script>
  $(document).ready(function() {
    $("form").submit(function() {
      $("#form").addClass('hidden'), $(".message").removeClass('hidden');
    })
  })
</script>

Hoặc


<script>
  $(document).ready(function() {
    $("form").submit(function() {
      $("#form").toggle(), $(".message").show();
    })
  })
</script>

- Hiển thị thông báo, form giữ nguyên và thời gian 4 giây thì form được reset về mặc định


<script>
  $(document).ready(function() {
    $("form").submit(function() {
      $(".message").removeClass('hidden');
      setTimeout(function() {
        $(".message").addClass('hidden');
        document.getElementById("contact").reset();
      }, 4000);
    });
  });
</script>
Tags:

Nhận xét

Đăng nhận xét

Mẫu tiếp thị liên kết

Xem thêm

×