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>
Trước tiên mình xin cảm ơn tất cả khách hàng đã luôn tin tưởng và ủng hộ mình trong suốt thời gian qua (2016 tới hiện tại).
Nhằm nâng cao chất lượng phục vụ Quý khách hàng và hoàn thiện chất lượng như hỗ trợ, template. Hôm nay ngày 04/2/2021 mình là Hòa Trần admin trang Giaodien.blog sẽ tiến hành mở một trang Feedback để khách hàng đã mua, sử dụng dịch vụ bên mình toàn quyền nhận xét đánh giá công khai ở trang này.
Từ những Feedback này những gì mình làm được và chưa làm được, từ đó mình sẽ rút ra được những kinh nghiệm, và hoàn thiện tốt dịch vụ bên mình.
Quý khách hàng có thể để lại nhận xét reviews tại trang Feedback
Tags:
Blog
Nhận xét
Đăng nhận xét