ফর্ম পুনঃনির্দেশ আটকাতে বা জমা দেওয়ার উপর রিফ্রেশ?

Question 1

আমি একগুচ্ছ পৃষ্ঠাগুলি অনুসন্ধান করেছি, তবে আমার সমস্যাটি খুঁজে পাচ্ছি না, তাই আমাকে একটি পোস্ট করতে হয়েছিল।

আমার একটি ফর্ম রয়েছে যার একটি সাবমিট বাটন রয়েছে এবং জমা দেওয়ার সময় আমি এটি পুনরায় রিফ্রেশ বা পুনঃনির্দেশ না করতে চাই। আমি শুধু jQuery একটি ফাংশন সম্পাদন করতে চান।

ফর্মটি এখানে:

<form id="contactForm">
    <fieldset>
        <label for="Name">Name</label>
        <input id="contactName" type="text" />
    </fieldset>

    <fieldset>
        <label for="Email">Email</label>
        <input id="contactEmail" type="text" />
    </fieldset>

    <fieldset class="noHeight">
        <textarea id="contactMessage" cols="20"></textarea>
        <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
    </fieldset>
</form>        
<small id="messageSent">Your message has been sent.</small>

এবং এখানে jQuery:

function sendContactForm(){
    $("#messageSent").slideDown("slow");
    setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000);
}

আমি ফর্মটিতে অ্যাকশন উপাদানটির সাথে বা তার সাথে চেষ্টা করেছি, তবে আমি কী ভুল করছি তা জানেন না। যা আমাকে বেশি বিরক্ত করেছে তা হ'ল আমার কাছে একটি উদাহরণ রয়েছে যা এটি পুরোপুরি করে: উদাহরণ পৃষ্ঠা

আপনি যদি আমার সমস্যাটি সরাসরি দেখতে চান, গোষ্টো স্ট্রিংঙ্ক.এন (আমার সাইট) এবং সাইডবারটি দেখুন যেখানে এটি "আমাকে এবং ইমেল প্রেরণ করুন" এবং "আরএসএস সাবস্ক্রিপশন" বলেছে check উভয়ই সেই রূপ যা আমি এটিতে কাজ করার চেষ্টা করছি।

Question 2

জমা দেওয়ার ইভেন্টটিতে কেবল ফর্ম জমাটি সামলান এবং মিথ্যা প্রত্যাবর্তন করুন:

$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});

সাবমিট বাটনে আপনার আর কোনও ক্লিকের দরকার নেই:

<input class="submit" type="submit" value="Send" />

Question 3

এখানে:

function submitClick(e)
{
     e.preventDefault();
     $("#messageSent").slideDown("slow");
     setTimeout('$("#messageSent").slideUp();
     $("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function() {
    $('#contactSend').click(submitClick);
});

অনক্লিক ইভেন্টটি ব্যবহার করার পরিবর্তে, আপনি jQuery ব্যবহার করে সাবমিট বাটনে (বা যাই হোক না কেন বোতাম) জোড় করে একটি 'ক্লিক' ইভেন্ট হ্যান্ডলার ব্যবহার করবেন, যা কলব্যাক হিসাবে সাবমিট ক্লিকটি নেবে। আমরা ইভেন্টটিকে কলব্যাকে পাসউনডেফল্ট কল করার জন্য পাস করি , যা ফর্মটি জমা দেওয়ার থেকে ক্লিককে বাধা দেবে।

Question 4

আপনার ফর্মের খোলার ট্যাগটিতে, এর মতো একটি ক্রিয়া বৈশিষ্ট্য সেট করুন:

<form id="contactForm" action="#">

Question 5

দেখে মনে হচ্ছে আপনি একটি মিস করছেন return false।

Question 6

আপনি যদি ডিফল্ট ব্রাউজারের ত্রুটিগুলি প্রদর্শিত হচ্ছে তা দেখতে চান , উদাহরণস্বরূপ, এইচটিএমএল বৈশিষ্ট্য দ্বারা চালিত এগুলি (কোনও ক্লায়েন্ট-কোড জেএস চিকিত্সার আগে প্রদর্শিত):

<input name="o" required="required" aria-required="true" type="text">

submitইভেন্টটির পরিবর্তে আপনার ইভেন্টটি ব্যবহার করা উচিত click। এই ক্ষেত্রে " দয়া করে এই ক্ষেত্রটি পূরণ করুন " অনুরোধ করে একটি পপআপ স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে । এমনকি সাথে preventDefault:

$('form').on('submit', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment

যেমন কেউ আগে উল্লেখ করেছেন , return falseপ্রচার শুরু করবে (যেমন ফর্ম জমা দেওয়ার সাথে যদি আরও হ্যান্ডলার সংযুক্ত থাকে তবে সেগুলি কার্যকর করা হবে না), তবে এই ক্ষেত্রে, ব্রাউজার দ্বারা চালিত ক্রিয়াটি সর্বদা প্রথমে কার্যকর করা হবে। এমনকি শেষে একটি সঙ্গে return false।

সুতরাং আপনি যদি এই ডিফল্ট পপ-আপগুলি থেকে মুক্তি পেতে চানclick তবে জমা দেওয়া বোতামে ইভেন্টটি ব্যবহার করুন :

$('form input[type=submit]').on('click', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes

Question 7

বিকল্প সমাধান হ'ল ফর্ম ট্যাগ ব্যবহার না করা এবং জ্যাকুয়ের মাধ্যমে জমা বোতামে ক্লিক ইভেন্ট হ্যান্ডেল করা। এইভাবে কোনও পৃষ্ঠা রিফ্রেশ হবে না তবে একই সাথে জমা দেওয়ার জন্য "প্রবেশ করা" বোতামটি এবং মোবাইলগুলিতে আপনি কোনও গো বোতাম পাবেন না (কিছু মোবাইলের স্টাইল) a সুতরাং ফর্ম ট্যাগটি ব্যবহার করতে থাকুন এবং স্বীকৃত উত্তরটি ব্যবহার করুন।