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.

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>

Bài viết: Hiển thị thông báo sau khi submit form được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog