ফর্মের অভ্যন্তরে বোতামটি ক্লিক করা হলে পৃষ্ঠার রিফ্রেশ প্রতিরোধ করুন

Question

ফর্মের ভিতরে বোতামগুলি ব্যবহার করার সময় আমার একটি সমস্যা আছে। আমি চাই যে ফাংশন কল করতে বোতাম। এটি করে তবে অযাচিত ফলাফলের সাথে এটি পৃষ্ঠাটি রিফ্রেশ করে।

আমার সাধারণ কোডটি এরকম হয়

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

বোতামটি ক্লিক করার পরে, ফাংশনটি পৃষ্ঠাটি রিফ্রেশের সাথে কল হয়ে যায়, যা আমার পূর্ববর্তী সমস্ত অনুরোধ পুনরায় সেট করে যা বর্তমান পৃষ্ঠাকে প্রভাবিত করে যা পূর্ববর্তী অনুরোধের ফলাফল ছিল।

পৃষ্ঠাটি রিফ্রেশ প্রতিরোধ করতে আমার কী করা উচিত?

Comments

আপনার যদি প্যারামিটারগুলি নির্দিষ্ট করতে হয়, আপনি যদি উইন্ডো.লোকেশন = উইন্ডো.লোকেশন.href ব্যবহার করেন; এটি পুরো পৃষ্ঠাটি রিফ্রেশ করবে এবং এটি আপনার সমস্ত পূর্ববর্তী অনুরোধগুলি পুনরায় সেট করবে। দয়া করে এটি পরীক্ষা করুন: স্ট্যাকওভারফ্লো.com

— প্রশ্নগুলি

আমি কীভাবে এইচটিএমএল বোতামটি পৃষ্ঠাটি পুনরায় লোড না করব তা তৈরি করার

— অ্যালেক্স অ্যাঙ্গাস

@ বাঙ্কদাথ: চুষির উত্তর গ্রহণ করা উচিত।

— জাদ চাহাইন

@ জাদচাহাইন দুঃখিত, আমি বুঝতে পারি নি যে আমি উত্তরটি গ্রহণ করি নি, এটি উল্লেখ করার জন্য ধন্যবাদ। আমি একটি শিক্ষানবিস ছিলাম এবং আমি জানি না যে আমি তখন কি করেছি বা কীভাবে ফিরে আসিনি। তবে আপনি যে উত্তরটি উল্লেখ করেছেন আমি তা গ্রহণ করব না, বরং সেই সময়টি আমাকে যে আমাকে সাহায্য করেছিল তা আমি গ্রহণ করব :)

— বঙ্কডাথ

Answer 1

getData()মিথ্যা প্রত্যাবর্তন করা যাক । এটি এটি ঠিক করবে।

<form method="POST">
    <button name="data" onclick="return getData()">Click</button>
</form>

Comments

প্রকৃতপক্ষে. onclickফাংশন মিথ্যা ফিরে, না আছে getData।

— কোয়ান্টিন

আমি এটাই বলছি, তবে ঠিক আছে, উত্তরটি পরিবর্তন করেছে যাতে এটি আরও পরিষ্কার।

— জেএনডিপিএনটি

আপনার ফাংশনটি পরিবর্তন করার দরকার নেই - আপনি কেবল onclick = "getData () ব্যবহার করতে পারেন; মিথ্যা প্রত্যাবর্তন করুন;"

type="button"সত্যিই ধরা।

— ডিপসেল

Answer 2

যোগ type="button"বাটন।

<button name="data" type="button" onclick="getData()">Click</button>

typeএকটি বোতামের ডিফল্ট মান হ'ল submitএটি আপনার ক্ষেত্রে ফর্মটি পোস্ট করে এবং এটিকে রিফ্রেশের মতো দেখায়।

Comments

নিখুঁত উত্তর এখানে দেওয়া হয়েছে

— টিমবারলেক

এটি এইচটিএমএল 5 ফর্ম বৈধকরণ (যেমন = "ইমেল" টাইপের ইনপুট জন্য) প্রতিরোধ করে।

— 2540625

আপনি return false;onclick="getData(); return false;"

— অনক্লিকটিতে

এটি সেরা বিকল্প। "মিথ্যা ফিরুন" যখন ইনলাইনটিতে কাজ করতে পারে তখন ইভেন্ট শ্রোতাদের যুক্ত করার সময় এমন বিকল্প নেই, যা আমি জানি। টাইপ = "বোতাম" নির্দিষ্ট করে দিনটি সত্যিই বাঁচায়।

— চিরকাল নুব

এটি আসলে এই ধরণের সমস্যার "অফিসিয়াল" সমাধান। মিথ্যা মোটা রিটার্ন করাও কাজ করে তবে টাইপ বোতামটি কখনও ব্যর্থ হয় না।

— ছাত্র0495

Answer 3

আপনাকে যা করতে হবে তা হ'ল একটি টাইপ ট্যাগ লাগাতে হবে এবং টাইপ বোতামটি তৈরি করতে হবে।

<button id="btnId" type="button">Hide/Show</button>

যে বিষয়টি সমাধান করে

Comments

আপনি ব্যাখ্যা এবং কেন ব্যাখ্যা করতে পারেন?

— mjk

কোনও ফর্মের অভ্যন্তরে কোনও বোতামের ডিফল্ট আচরণ জমা দেওয়ার ধরণের হয়, যখন এটি কোনও ফর্মের অভ্যন্তরে বোতামের

— ধরণে

Answer 4

সমস্যাটি হ'ল এটি ফর্ম জমা দেওয়ার ট্রিগার করে। আপনি যদি getDataফাংশনটি করেন return falseতবে ফর্মটি জমা দেওয়া থেকে বিরত রাখা উচিত।

বিকল্পভাবে, আপনি preventDefaultইভেন্ট অবজেক্টের পদ্ধতিটিও ব্যবহার করতে পারেন :

function getData(e) {
    e.preventDefault();
}

Comments

ক্লিক ইভেন্ট যা পাস হবে।

— জেএনডিপিএনটি

এটি বাদে (আরও পরিবর্তন ছাড়াই) ইভেন্ট অবজেক্টটি পাস হবে না।

— কোয়ান্টিন

<বোতামের নাম = "ডেটা" অনক্লিক = "গেটডাটা ($ ইভেন্ট)"> ক্লিক করুন </ বাটন>

— রোবমেক্স

Answer 5

এইচটিএমএল

<form onsubmit="return false;" id="myForm">
</form>

jQuery এর

$('#myForm').submit(function() {
    doSomething();
});

Comments

'(' আমারফর্ম) $ ('# মাইফর্ম) হওয়া উচিত

— মিউট্যান্ট

Answer 6

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

বোতাম ট্যাগ ব্যবহার করার পরিবর্তে, ইনপুট ট্যাগ ব্যবহার করুন। এটার মত,

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>

Comments

তবে এটি তেমন বোতামটি তৈরি করতে button type='button'

— পারেনি

Answer 7

যদি আপনার বোতামটি ডিফল্ট হয় তবে "বোতাম" নিশ্চিত করুন যে আপনি প্রকারের বৈশিষ্ট্যটি নির্ধারণ করেছেন, অন্যথায় ওয়েবফোর্ম এটিকে ডিফল্টরূপে জমা হিসাবে বিবেচনা করবে।

আপনি যদি জেএস ব্যবহার করেন তবে এটি করুন

<form method="POST">
   <button name="data"  type="button" id="btnData" onclick="getData()">Click</button>
</form> 

**If you use jquery use like this**


<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>




$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here

});

Answer 8

বোতাম নিজেই অক্ষম করার একটি জাভাস্ক্রিপ্ট পদ্ধতি

document.getElementById("ID NAME").disabled = true;

সমস্ত ফর্ম ক্ষেত্রগুলি একবার আপনার মানদণ্ডে সন্তুষ্ট হয়ে গেলে আপনি বোতামটি আবার সক্ষম করতে পারবেন

জ্যাকুরি ব্যবহার করা এরকম কিছু হবে

$( "#ID NAME" ).prop( "disabled", true);

Answer 9

ফায়ারফক্সে কোনও কারণে আমার কাছে return false;এবং myform.preventDefault();ফাংশনে থাকা সত্ত্বেও এটি ফাংশন রান হওয়ার পরে পৃষ্ঠাটিকে সতেজ করে। এবং আমি জানি না এটি একটি ভাল অনুশীলন কিনা, তবে এটি আমার পক্ষে কাজ করে, আমি inোকানjavascript:this.preventDefault(); ক্রিয়া বৈশিষ্ট্যটি .োকান।

যেমনটি আমি বলেছি, আমি অন্যান্য সমস্ত পরামর্শ চেষ্টা করেছি এবং সেগুলি সমস্ত ব্রাউজারগুলিতে ভাল কাজ করে তবে ফায়ারফক্স, আপনার যদি একই সমস্যা থাকে তবে প্রতিরোধের ইভেন্টটি অ্যাকশন বৈশিষ্ট্যে যুক্ত করার চেষ্টা করুন javascript:return false;বা javascript:this.preventDefault();। দিয়ে চেষ্টা করবেন নাjavascript:void(0);যা আপনার কোডটি ভেঙে দেবে । আমাকে জিজ্ঞাসা করবেন না কেন :-)।

আমি এটি এটি করার জন্য একটি মার্জিত উপায় মনে করি না, তবে আমার ক্ষেত্রে আমার অন্য কোনও পছন্দ ছিল না।

হালনাগাদ:

আপনি যদি একটি ত্রুটি পেয়ে থাকেন ... এজাক্স প্রক্রিয়া করার পরে, তবে অ্যাট্রিবিউট অ্যাকশনটি সরিয়ে ফেলুন এবং onsubmitবৈশিষ্ট্যে, মিথ্যা রিটার্নের পরে আপনার ফাংশনটি সম্পাদন করুন:

onsubmit="functionToRun(); return false;"

ফায়ারফক্সের সাথে কেন এই সমস্ত সমস্যা আছে তা আমি জানি না, তবে আশা করি এটি কার্যকর হয়েছে।

Answer 10

রিটার্ন ফাংশন সব ক্ষেত্রেই কাজ করছে না। আমি এটি চেষ্টা করেছি:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

এটা আমার জন্য কাজ করে না।

আমি ফাংশনের ভিতরে মিথ্যা ফিরিয়ে দেওয়ার চেষ্টা করেছি এবং এটি আমার পক্ষে কাজ করে।

function Reset()
{
    .
    .
    .
    return false;
}

Answer 11

আমিও একই সমস্যায় পড়ছিলাম। সমস্যাটি onclickফাংশন নিয়ে। ফাংশন নিয়ে কোনও সমস্যা হওয়া উচিত নয় getData। এটি onclickফাংশনটিকে মিথ্যা বলে কাজ করে ।

<form method="POST">
    <button name="data" onclick="getData(); return false">Click</button>
</form>

Answer 12

এই এক সেরা সমাধান:

<form  method="post"> 
    <button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

দ্রষ্টব্য: আমার কোডটি খুব সাধারণ।

Answer 13

আপনি এই সমস্যাটি সমাধান করতে এজাক্স এবং জ্যাকোয়ারি ব্যবহার করতে পারেন:

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>

Comments

এই উত্তরটি অত্যধিক জটিল, ওপির সমস্যাটি রোধ করার জন্য বাইরের গ্রন্থাগারের প্রয়োজন হয় যেখানে অন্যান্য, সরল, পদ্ধতিগুলি ব্যবহার করা যেতে পারে।

— জ্যাক