কখনও কখনও প্রতিক্রিয়া ধীর হয়ে গেলে, কেউ একাধিকবার জমা বোতামটি ক্লিক করতে পারে।
কীভাবে এটিকে রোধ করা যায়?
কখনও কখনও প্রতিক্রিয়া ধীর হয়ে গেলে, কেউ একাধিকবার জমা বোতামটি ক্লিক করতে পারে।
কীভাবে এটিকে রোধ করা যায়?
উত্তর:
ইতিমধ্যে জমা দেওয়ার পরে ফর্মটিতে জমা দেওয়া ইভেন্টটি অক্ষম করতে আপত্তিজনক জাভাস্ক্রিপ্ট ব্যবহার করুন। এখানে jQuery ব্যবহার করে একটি উদাহরণ দেওয়া হয়েছে।
সম্পাদনা: জমা বোতামটি ক্লিক না করে একটি ফর্ম জমা দেওয়ার স্থির সমস্যা। ধন্যবাদ, ইচিবান
$("body").on("submit", "form", function() {
$(this).submit(function() {
return false;
});
return true;
});
return true
? আমি মনে করি প্রাথমিক জমাটি ছাড়া এটি কাজ করা উচিত।
return true
যদি বাদ দেওয়া হয় তবে তা অন্তর্ভুক্ত।
$(this).find("input[type='submit']").attr('disabled', 'disabled').val('submiting'); return true; });
আমি এসপি এমভিসি 3 অবিচ্ছিন্ন বৈধতা সহ ভ্যান্টির সমাধানটি চেষ্টা করেছি এবং যদি ক্লায়েন্টের বৈধতা ব্যর্থ হয় তবে কোডটি এখনও চালানো হয়, এবং ফর্ম জমা ভালের জন্য অক্ষম করা হয়। আমি ক্ষেত্রগুলি সংশোধন করে পুনরায় জমা দিতে সক্ষম নই। (ভজনের মন্তব্য দেখুন)
সুতরাং আমি ভ্যানস্টির স্ক্রিপ্টটি এভাবে পরিবর্তন করেছি:
$("form").submit(function () {
if ($(this).valid()) {
$(this).submit(function () {
return false;
});
return true;
}
else {
return false;
}
});
ক্লায়েন্ট সাইড ফর্ম জমা দেওয়ার নিয়ন্ত্রণটি অনসামিত হ্যান্ডলারটি সাবমিট বাটনটি আড়াল করে এটিকে লোডিং অ্যানিমেশন দিয়ে প্রতিস্থাপনের মাধ্যমে বেশ মার্জিতভাবে অর্জন করা যেতে পারে। এইভাবে যেখানে ব্যবহারকারী তার ক্রিয়া (ক্লিক) ঘটেছে একই স্থানে তাত্ক্ষণিক ভিজ্যুয়াল প্রতিক্রিয়া পান। একই সময়ে আপনি ফর্মটি অন্য সময় জমা দেওয়া থেকে আটকাবেন।
আপনি যদি এক্সএইচআর এর মাধ্যমে ফর্মটি জমা দেন তবে মনে রাখবেন যে আপনাকে জমা দেওয়ার ত্রুটিগুলিও পরিচালনা করতে হবে, উদাহরণস্বরূপ একটি সময়সীমা out আপনাকে আবার জমা দেওয়ার বোতামটি প্রদর্শন করতে হবে কারণ ব্যবহারকারী প্রয়োজন ফর্ম পুনরায় জমা দিন।
অন্য নোটে, লিমিলেব একটি খুব বৈধ পয়েন্ট নিয়ে আসে। সমস্ত ফর্ম বৈধতা সার্ভার পাশ হতে হবে। এর মধ্যে একাধিক জমা দেওয়ার চেক অন্তর্ভুক্ত রয়েছে। ক্লায়েন্টকে বিশ্বাস করবেন না!জাভাস্ক্রিপ্ট অক্ষম করা থাকলে এটি কেবল একটি মামলা নয়। আপনার অবশ্যই মনে রাখতে হবে যে সমস্ত ক্লায়েন্টের সাইড কোডটি সংশোধন করা যেতে পারে। এটি কল্পনা করা কিছুটা কঠিন তবে আপনার সার্ভারের সাথে এইচটিএমএল / জাভাস্ক্রিপ্টের কথা বলা আপনার পক্ষে লেখা এইচটিএমএল / জাভাস্ক্রিপ্টের অগত্যা নয়।
লিম্বলিবের পরামর্শ অনুসারে, কোনও পরিচয়কারীর সাহায্যে ফর্মটি তৈরি করুন যা সেই ফর্মের জন্য অনন্য এবং এটিকে কোনও লুকানো ইনপুট ক্ষেত্রে রেখে দিন। যে সনাক্তকারী সংরক্ষণ করুন। ফর্ম ডেটা গ্রহণ করার সময় কেবল এটি সনাক্তকারী মিলে গেলে এটি প্রক্রিয়া করে। (ব্যবহারকারীদের সেশনে শনাক্তকারীর সাথে সংযোগ স্থাপন করুন এবং অতিরিক্ত সুরক্ষার জন্য এটিও মেলে)) ডেটা প্রসেসিংয়ের পরে শনাক্তকারীটিকে মুছুন।
অবশ্যই, একবারে একবারে, আপনাকে সেই শনাক্তকারীদের পরিষ্কার করতে হবে যার জন্য কোনও ফর্ম ডেটা জমা দেওয়া হয়নি। তবে সম্ভবত আপনার ওয়েবসাইটটি ইতিমধ্যে কিছু ধরণের "আবর্জনা সংগ্রহ" প্রক্রিয়া নিযুক্ত করে।
<form onsubmit="if(submitted) return false; submitted = true; return true">
<form onsubmit="return (typeof submitted == 'undefined') ? (submitted = true) : !submitted">
বা লেখার var submitted = false;
আপনার স্ক্রিপ্টটি ডান পর্যায়ে নিম্নলিখিত ত্রুটির এড়াতে: Uncaught ReferenceError: submitted is not defined
।
এটি করার সহজ উপায়:
<form onsubmit="return checkBeforeSubmit()">
some input:<input type="text">
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
var wasSubmitted = false;
function checkBeforeSubmit(){
if(!wasSubmitted) {
wasSubmitted = true;
return wasSubmitted;
}
return false;
}
</script>
ক্লিকের পরই সাবমিট বাটনটি অক্ষম করুন। আপনি বৈধতা সঠিকভাবে পরিচালনা করেছেন তা নিশ্চিত করুন। সমস্ত প্রক্রিয়াজাতকরণ বা ডিবি ক্রিয়াকলাপের জন্য একটি মধ্যবর্তী পৃষ্ঠা রাখুন এবং তারপরে পরবর্তী পৃষ্ঠায় পুনঃনির্দেশ করুন। এটি নিশ্চিত করে যে দ্বিতীয় পৃষ্ঠাকে রিফ্রেশ করা অন্য কোনও প্রক্রিয়াজাতকরণ করে না।
form page ---submits to---> form_submission_script.php ---after saving, redirects to---> form_thankyou.html
বর্তমান সময়ে হ্যাশ করুন, ফর্মটিতে এটি একটি গোপন ইনপুট তৈরি করুন। সার্ভারের পাশে, প্রতিটি ফর্ম জমা দেওয়ার হ্যাশ পরীক্ষা করুন; আপনি যদি ইতিমধ্যে সেই হ্যাশ পেয়ে থাকেন তবে আপনার পুনরাবৃত্তি জমা হবে।
সম্পাদনা: জাভাস্ক্রিপ্টের উপর নির্ভর করা ভাল ধারণা নয়, সুতরাং আপনারা সকলেই এই ধারণাগুলি সমর্থন করে যেতে পারেন তবে কিছু ব্যবহারকারী এটি সক্ষম করতে পারবেন না। সঠিক উত্তরটি হ'ল সার্ভারের দিকে ব্যবহারকারী ইনপুটকে বিশ্বাস না করা।
JQuery ব্যবহার করে আপনি করতে পারেন:
$('input:submit').click( function() { this.disabled = true } );
&
$('input:submit').keypress( function(e) {
if (e.which == 13) {
this.disabled = true
}
}
);
আমি জানি আপনি আপনার প্রশ্নটি 'জাভাস্ক্রিপ্ট' দিয়ে ট্যাগ করেছেন তবে এখানে এমন একটি সমাধান রয়েছে যা জাভাস্ক্রিপ্টের উপর নির্ভর করে না:
এটি PRG নামে একটি ওয়েবঅ্যাপ প্যাটার্ন এবং এটির বর্ণনা করার জন্য এখানে একটি নিবন্ধ রয়েছে
আপনি একাধিক জমা কেবল এটিকে আটকাতে পারবেন:
var Workin = false;
$('form').submit(function()
{
if(Workin) return false;
Workin =true;
// codes here.
// Once you finish turn the Workin variable into false
// to enable the submit event again
Workin = false;
});
Workin =true;
। ডাবল জমা দেওয়া এখনও সম্ভব, তবে কমই সম্ভবত।
এই প্রশ্নের সর্বাধিক সহজ উত্তর হিসাবে জিজ্ঞাসা করা হয়েছে: "কখনও কখনও প্রতিক্রিয়া ধীর হয়ে গেলে কেউ একাধিকবার সাবমিট বোতামটি ক্লিক করতে পারে this কীভাবে এটি হওয়া থেকে রোধ করা যায়?"
কেবল নীচের কোডের মতো ফর্ম জমা বোতামটি অক্ষম করুন।
<form ... onsubmit="buttonName.disabled=true; return true;">
<input type="submit" name="buttonName" value="Submit">
</form>
এটি জমা দেওয়ার বোতামটি অক্ষম করবে, জমা দেওয়ার জন্য প্রথম ক্লিক করুন on এছাড়াও যদি আপনার কিছু বৈধতা নিয়ম থাকে তবে তা ঠিক কাজ করবে। আশা করি এটি সাহায্য করবে।
ক্লায়েন্ট পক্ষের , একবার ফর্মটি জাভাস্ক্রিপ্ট কোডের সাথে @ ভ্যান্টি এবং @ চাওস দ্বারা সরবরাহিত পদ্ধতির মতো জমা দেওয়ার পরে অক্ষম করা উচিত।
তবে নেটওয়ার্ক ল্যাগ বা জাভাস্ক্রিপ্ট-অক্ষম অবস্থার জন্য একটি সমস্যা রয়েছে যেখানে এটি হওয়া থেকে রোধ করার জন্য আপনার জেএসের উপর নির্ভর করা উচিত নয়।
সুতরাং, সার্ভার-সাইডে , আপনাকে একই ক্লায়েন্টদের কাছ থেকে পুনরাবৃত্তি জমা দেওয়া উচিত এবং সেই পুনরাবৃত্তিটি বাদ দেওয়া উচিত যা ব্যবহারকারীর কাছ থেকে একটি মিথ্যা প্রচেষ্টা বলে মনে হচ্ছে।
আপনি নিরাপদ jquery প্লাগইন চেষ্টা করতে পারেন ।
$('#example').safeform({
timeout: 5000, // disable form on 5 sec. after submit
submit: function(event) {
// put here validation and ajax stuff...
// no need to wait for timeout, re-enable the form ASAP
$(this).safeform('complete');
return false;
}
})
আমার জন্য সহজতম এবং মার্জিত সমাধান:
function checkForm(form) // Submit button clicked
{
form.myButton.disabled = true;
form.myButton.value = "Please wait...";
return true;
}
<form method="POST" action="..." onsubmit="return checkForm(this);">
...
<input type="submit" name="myButton" value="Submit">
</form>
এটি প্রতি 2 সেকেন্ডে জমা দেওয়ার অনুমতি দেয়। সামনের বৈধতার ক্ষেত্রে।
$(document).ready(function() {
$('form[debounce]').submit(function(e) {
const submiting = !!$(this).data('submiting');
if(!submiting) {
$(this).data('submiting', true);
setTimeout(() => {
$(this).data('submiting', false);
}, 2000);
return true;
}
e.preventDefault();
return false;
});
})
একাধিক জমা দেওয়া থেকে রক্ষা করার সর্বোত্তম উপায় হ'ল পদ্ধতিতে কেবলমাত্র বোতামের আইডি পাস।
function DisableButton() {
document.getElementById("btnPostJob").disabled = true;
}
window.onbeforeunload = DisableButton;
জাভাস্ক্রিপ্ট ব্যবহার করে এটি করা কিছুটা সহজ। নিম্নলিখিত কোডটি যা পছন্দসই কার্যকারিতা দেবে:
$('#disable').on('click', function(){
$('#disable').attr("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>
সর্বাধিক সহজ সমাধান হ'ল ক্লিকের বোতামটি অক্ষম করুন, অপারেশন সম্পূর্ণ হওয়ার পরে এটি সক্ষম করুন। Jsfiddle এ অনুরূপ সমাধান চেক করতে:
[click here][1]
এবং আপনি এই উত্তরের জন্য আরও কিছু সমাধান খুঁজে পেতে পারেন ।
এটি আমার জন্য খুব সূক্ষ্ম কাজ করে। এটি ফার্ম জমা দেয় এবং বোতামটি অক্ষম করে তোলে এবং 2 সেকেন্ড পরে বোতামটি সক্রিয় করে।
<button id="submit" type="submit" onclick="submitLimit()">Yes</button>
function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
btn.setAttribute('disabled', 'disabled');
}, 1);
setTimeout(function() {
btn.removeAttribute('disabled');
}, 2000);}
ইসিএমএ 6 সিন্টেক্সে
function submitLimit() {
submitBtn = document.getElementById('submit');
setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);
setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}
আগে যা প্রস্তাব করা হয়েছিল তার বিকল্প হ'ল:
jQuery('form').submit(function(){
$(this).find(':submit').attr( 'disabled','disabled' );
//the rest of your code
});