আমার একটি বাটন আছে ( <input type="submit">)। এটি ক্লিক করা হলে পৃষ্ঠাটি পুনরায় লোড হয়। যেহেতু আমার কিছু jQuery hide()ফাংশন রয়েছে যা পৃষ্ঠা লোডে ডাকা হয়, এর ফলে এই উপাদানগুলি আবার গোপন করা হয়। আমি কীভাবে বোতামটি কিছুই না করব, তাই আমি বোতামটি ক্লিক করা হলেও পৃষ্ঠাটি পুনরায় লোড না করে কিছু ক্রিয়া যুক্ত করতে পারি।
উত্তর:
জেএস বা জ্যাকুরির দরকার নেই। পৃষ্ঠা পুনরায় লোডিং বন্ধ করতে কেবলমাত্র 'বোতাম' হিসাবে বোতামের ধরণটি নির্দিষ্ট করুন। আপনি যদি বোতামের ধরণটি নির্দিষ্ট না করেন তবে ব্রাউজারটি পৃষ্ঠা পুনরায় লোডের জন্য 'রিসেট' বা ডাইনিজ কারণকে 'পুনরায় সেট' করতে সেট করবে।
<button type='button'>submit</button> পারেন ব্যবহার করুন <button>উপাদান অথবা একটি ব্যবহার <input type="button"/>।
<button>একটি ফর্ম বাহিরে স্থাপন করা হয় রিফ্রেশ ঘটবে না!
type="button"থাকা <button>উপাদানগুলিতে যুক্ত করুন এবং তা রিফ্রেশ হয় না
এইচটিএমএলে:
<form onsubmit="return false">
</form>সমস্ত "বোতাম" এ রিফ্রেশ এড়ানোর জন্য, এমনকি অনক্লিক বরাদ্দ করা হয়েছে।
আপনি jQuery দিয়ে বোতামে একটি ক্লিক হ্যান্ডলার যুক্ত করতে পারেন এবং মিথ্যা ফিরে আসতে পারেন।
$("input[type='submit']").click(function() { return false; });অথবা
$("form").submit(function() { return false; });এইচটিএমএলে:
<input type="submit" onclick="return false">JQuery সহ, ইতিমধ্যে উল্লিখিত কিছু অনুরূপ বৈকল্পিক।
আপনি এমন একটি ফর্ম ব্যবহার করতে পারেন যাতে জমা দেওয়া বোতামটি অন্তর্ভুক্ত থাকে। তারপরে কোনও ফর্মের ডিফল্ট আচরণ রোধ করতে jQuery ব্যবহার করুন:
$(document).ready(function($) {
$(document).on('submit', '#submit-form', function(event) {
event.preventDefault();
alert('page did not reload');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
<button type='submit'>submit</button>
</form>উপরের মতামতের একটিতে (কবর দেওয়া) বলা হয়েছে, ফর্ম ট্যাগের ভিতরে বোতাম ট্যাগ না রেখে এটি স্থির করা যেতে পারে। বোতামটি ফর্মের বাইরে থাকলে পৃষ্ঠাটি নিজেকে রিফ্রেশ করে না।
আমি এখনও মন্তব্য করতে পারি না, তাই আমি এটি উত্তর হিসাবে পোস্ট করছি। ব্যবহার করছে: এড়ানোর পুনরায় লোড করার শ্রেষ্ঠ উপায় কিভাবে @ user2868288 বলেছেন onsubmitউপর formট্যাগ।
এখানে উল্লিখিত অন্যান্য সমস্ত সম্ভাবনা থেকে, এটিই একমাত্র উপায় যা নতুন এইচটিএমএল 5 ব্রাউজারের ডেটা ইনপুট বৈধতাটিকে ট্রিগার করার অনুমতি দেয় (এটি <button>করবে না এবং জিক্যুরি / জেএস হ্যান্ডলারগুলি করবে না) এবং আপনার jQuery / AJAX ডায়নামিক তথ্যকে যুক্ত করতে দেয় পাতা। উদাহরণ স্বরূপ:
<form id="frmData" onsubmit="return false">
<input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
<input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
<input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').click(function() {
var tel = $("#txtTel").val();
var email = $("#txtEmail").val();
$.post("scripts/contact.php", {
tel1: tel,
email1: email
})
.done(function(data) {
$('#lblEstatus').append(data); // Appends status
if (data == "Received") {
$("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
}
})
.fail(function(xhr, textStatus, errorThrown) {
$('#lblEstatus').append("Error. Try later.");
});
});
});
</script>
<input type='button' />।