আপনার মনে রাখা উচিত কয়েকটি বিষয়।
1. একটি ফর্ম জমা দেওয়ার বিভিন্ন উপায় রয়েছে
- জমা বোতামটি ব্যবহার করে
- এন্টার টিপে
- জাভাস্ক্রিপ্টে জমা দেওয়ার ইভেন্টটি ট্রিগার করে
- সম্ভবত ডিভাইস বা ভবিষ্যতের ডিভাইসের উপর নির্ভর করে আরও বেশি।
আমাদের ফর্ম জমা দেওয়ার ইভেন্টটি আবদ্ধ করা উচিত , বোতাম ক্লিক ইভেন্ট নয়। এটি আমাদের কোডটি এখনই এবং ভবিষ্যতে সমস্ত ডিভাইস এবং সহায়ক প্রযুক্তিতে কাজ করে তা নিশ্চিত করবে।
2. হাইজ্যাক্স
ব্যবহারকারীর জাভাস্ক্রিপ্ট সক্ষম নাও থাকতে পারে। একজন hijax প্যাটার্ন এখানে ভাল, যেখানে আমরা আলতো করে ফর্ম জাভাস্ক্রিপ্ট ব্যবহার নিয়ন্ত্রণ নিতে, কিন্তু এটা submittable যদি জাভাস্ক্রিপ্ট ব্যর্থ ছেড়ে।
আমাদের ফর্মটি থেকে URL এবং পদ্ধতিটি টানতে হবে, তাই এইচটিএমএল পরিবর্তন হলে আমাদের জাভাস্ক্রিপ্ট আপডেট করার দরকার নেই।
৩. নিরবচ্ছিন্ন জাভাস্ক্রিপ্ট
ব্যবহার event.preventDefault () এর পরিবর্তে রিটার্ন মিথ্যা যেমন বুদ্বুদ পর্যন্ত ঘটনা পারবেন ভাল অনুশীলন। এটি অন্যান্য স্ক্রিপ্টগুলিকে ইভেন্টে বাঁধা দেয়, উদাহরণস্বরূপ বিশ্লেষণী স্ক্রিপ্টগুলি যা ব্যবহারকারীর মিথস্ক্রিয়া পর্যবেক্ষণ করে।
দ্রুততা
আমাদের স্ক্রিপ্টটি ইনলাইন ratherোকানোর পরিবর্তে আমাদের আদর্শভাবে একটি বাহ্যিক স্ক্রিপ্ট ব্যবহার করা উচিত। আমরা স্ক্রিপ্ট ট্যাগ ব্যবহার করে পৃষ্ঠার শীর্ষ অংশে এটি লিঙ্ক করতে পারি, বা গতির জন্য পৃষ্ঠার নীচে এটিতে লিঙ্ক করতে পারি। স্ক্রিপ্টটি চুপচাপ ব্যবহারকারীর অভিজ্ঞতা বাড়িয়ে তুলবে, এমনভাবে নয়।
কোড
ধরে নিই যে আপনি উপরোক্ত সকলের সাথে একমত হয়েছেন এবং আপনি জমা দেওয়ার ইভেন্টটি ধরতে চান এবং এটি এজেএক্স (হাইজ্যাক্স প্যাটার্ন) এর মাধ্যমে পরিচালনা করতে চান, আপনি এরকম কিছু করতে পারেন:
$(function() {
$('form.my_form').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
});
আপনি যখনই জাভাস্ক্রিপ্টের মাধ্যমে এমন কিছু ব্যবহার করে ফর্ম জমা দেওয়ার জন্য ম্যানুয়ালি ট্রিগার করতে পারেন:
$(function() {
$('form.my_form').trigger('submit');
});
সম্পাদনা:
আমি সম্প্রতি এটি করতে হয়েছিল এবং একটি প্লাগইন লিখে শেষ করেছি।
(function($) {
$.fn.autosubmit = function() {
this.submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
return this;
}
})(jQuery)
আপনার ফর্ম ট্যাগটিতে একটি ডেটা-অটোসোবিট বৈশিষ্ট্য যুক্ত করুন এবং আপনি এটি করতে পারেন:
এইচটিএমএল
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
জাতীয়
$(function() {
$('form[data-autosubmit]').autosubmit();
});