Tạo form submit không cần load lại trình duyệt

jquery

Bài viết sau sẽ hướng dẫn các bạn làm một trang có form submit không cần load lại trang cũng không cần phải gửi dữ liệu qua ajax.

submit without refresh page

Code HTML

Trước tiên là thiết kế một trang html để làm form gửi dữ liệu cái đã. Đây là một form đơn giản gồm 3 thẻ input, 1 trường textarea. Chú ý form này sẽ có action là tập tin submit.php

Code Javascript

Sau đó chúng ta add thư viện jQuery vào nhé

Hàm $(‘#form’).ajaxForm() có id là id của thẻ FORM, hàm này thực hiện post dữ liệu tới file submit.php mà không cần refresh trình duyệt, nếu thành công thì cho phép hiển thị #preview.

Ngoài ra chúng ta cũng cần làm một vài đoạn mã jQuery để thực hiện validate dữ liệu xem chính xác chưa

Tạo Database để lưu dữ liệu

Xong về mặt giao diện, tiến tới thiết kế database để nó nhận dữ liệu vào chứ nhỉ. Nào làm một cái database đơn giản.

Và thủ tục kết nối tới database trong file db.php

File Submit.php

Giờ là việc tạo ra một file mang tên submit.php để thực hiện nhận dữ liệu, và insert chúng vào database. Như đã nói ở trên, sau khi submit dữ liệu ở file index.html, dữ liệu sẽ được qua file submit.php để xử lý trước khi lưu vào cơ sở dữ liệu.

Nếu thành công sẽ trả về đoạn thông báo đã submit dữ liệu.
Done! Chúc bạn thành công

Download code tạo form submit không reload trình duyệt

Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com