আমি কীভাবে জাভাস্ক্রিপ্টে ফর্ম জমা দেওয়ার ইভেন্টটি শুনতে পারি?

Question

আমি আমার নিজের ফর্মের বৈধতা জাভাস্ক্রিপ্ট লাইব্রেরিটি লিখতে চাই এবং আমি গুগলে সন্ধান করছিলাম যে কীভাবে সাবমিট বাটন ক্লিক করা হয় তা সনাক্ত করতে পারি তবে আমি খুঁজে পাওয়া সমস্ত কোডই আপনাকে onSubmit="function()"এইচটিএমএলে অন ​​ক্লিক করতে হবে ।

আমি এই জাভাস্ক্রিপ্টটি তৈরি করতে চাই যাতে আমাকে সাবমিট বা অন ক্লিক জাভাস্ক্রিপ্ট যুক্ত করার মতো কোনও এইচটিএমএল কোড স্পর্শ করতে না হয়।

Comments

না কেন document.forms['yourForm'].onsubmit = function(){}? নাকি addEventListener?

— জোসেফ সিলবার

আপনি কি সত্যিই সাবমোট বাটনটি ক্লিক করেছেন কিনা তা পরীক্ষা করতে চান বা ব্যবহারকারী ফর্মটি জমা দেওয়ার সময় তা পরীক্ষা করতে চান (যা তারা বোতামে ক্লিক করে বা ক্ষেত্রের কোনও একটি থেকে এন্টার টিপে চাপিয়ে দিতে পারে)?

— nnnnnn

Answer 1

লোকেরা যখন প্রয়োজন হয় না কেন তারা সবসময় jQuery ব্যবহার করে?
কেন লোকেরা কেবল সহজ জাভাস্ক্রিপ্ট ব্যবহার করতে পারে না?

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

callback ফর্মটি জমা দেওয়ার সময় আপনি কল করতে চান এমন একটি ফাংশন।

সম্পর্কে EventTarget.addEventListener, MDN এ এই ডকুমেন্টেশন চেক আউট ।

নেটিভ submitইভেন্টটি বাতিল করতে (ফর্মটি জমা দেওয়া থেকে বিরত রাখতে), .preventDefault()আপনার কলব্যাক ফাংশনে ব্যবহার করুন ,

document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    //stop form from submitting
    }
});

---

শোনা submitলাইব্রেরি সঙ্গে ঘটনা

যদি কোনও কারণে আপনি সিদ্ধান্ত নিয়েছেন যে একটি গ্রন্থাগার প্রয়োজনীয় (আপনি ইতিমধ্যে একটি ব্যবহার করছেন বা আপনি ক্রস ব্রাউজার সংক্রান্ত সমস্যাগুলি মোকাবেলা করতে চান না), সাধারণ লাইব্রেরিতে জমা দেওয়া ইভেন্টটি শোনার উপায়গুলির একটি তালিকা এখানে রয়েছে:

1. jQuery এর

   $(ele).submit(callback);

   কোথায় eleফর্ম উপাদান রেফারেন্স, এবং callbackকলব্যাক ফাংশন রেফারেন্স হচ্ছে। উল্লেখ

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>

2. AngularJS (1.x)

   <form ng-submit="callback()">
   
   $scope.callback = function(){ /*...*/ };

   খুব সোজা, $scopeআপনার নিয়ামকের অভ্যন্তরে ফ্রেমওয়ার্ক দ্বারা সরবরাহ করা সুযোগটি কোথায় । উল্লেখ

3. প্রতিক্রিয়া

   <form onSubmit={this.handleSubmit}>
   
   class YourComponent extends Component {
       // stuff
   
       handleSubmit(event) {
           // do whatever you need here
   
           // if you need to stop the submit event and 
           // perform/dispatch your own actions
           event.preventDefault();
       }
   
       // more stuff
   }

   প্রপাকে কেবল হ্যান্ডলারে প্রবেশ করুন onSubmit। উল্লেখ

4. অন্যান্য ফ্রেমওয়ার্ক / গ্রন্থাগারগুলি

   আপনার কাঠামোর ডকুমেন্টেশন দেখুন।

---

ভ্যালিডেশন

আপনি সবসময় জাভাস্ক্রিপ্টে আপনার বৈধতা করতে পারেন, তবে এইচটিএমএল 5 এর সাথে আমাদের দেশীয় বৈধতাও রয়েছে।

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">

আপনার কোনও জাভাস্ক্রিপ্টও দরকার নেই! যখনই নেটিভ বৈধতা সমর্থিত নয়, আপনি জাভাস্ক্রিপ্ট বৈধকরণকারীর কাছে ফ্যালব্যাক করতে পারেন।

ডেমো: http://jsfiddle.net/DerekL/L23wmo1L/

Comments

"ভয়াবহ ... কুৎসিত" কোডের 5 টি লাইন jQuery এর 4,000 লাইন দ্বারা সরবরাহিত প্রয়োজনীয় কার্যকারিতাটি প্রতিস্থাপন করে, যা অবশ্যই "ভয়াবহ ... কুৎসিত" কোডও হতে হবে।

— রবজি

আমার কাছে jQuery এর বিপরীতে খুব বেশি কিছু নেই, কেবলমাত্র যারা এগুলি বোঝায় যে তারা কোডটিকে কয়েকটি লাইনের সাথে পুরো জিনিসটি প্রতিস্থাপন করতে পারে তা না বুঝে এক ধরণের যাদু জাগরণ হিসাবে ব্যবহার করে। ব্রাউজারগুলি আসলে কীভাবে কাজ করে তা জানতে সময় নিবেন না কেন? এটি আসলে এতটা কঠিন নয়।

— রবজি

@ বেন - এবং কারণ আপনি একটি লাইব্রেরি দিয়ে কিছু করতে পারেন তার অর্থ এই নয় যে আপনার উচিত হয় না, বা অন্যকে "কেবল গ্রন্থাগার এক্স ব্যবহার করুন" এর জবাব দিয়ে বেসিকগুলি শিখতে বঞ্চিত করা উচিত নয়। যখন কেউ জাভাস্ক্রিপ্ট সম্পর্কে একটি নির্দিষ্ট প্রশ্ন জিজ্ঞাসা করেন, তখন সরল জাভাস্ক্রিপ্ট ব্যবহার করে প্রশ্নের উত্তর দেওয়া ভদ্র। আপনার পছন্দের লাইব্রেরি থেকে যে কোনও উপায়ে পরামর্শ দিন, তবে প্রশ্নের উত্তর দেওয়া প্রথম অগ্রাধিকার হওয়া উচিত।

— রবিজি

আমি ব্যক্তিগতভাবে বিশ্বাস করি যে একজন ব্যক্তির প্রথমে বেসিকগুলি জানা উচিত।

— ডেরেক 朕 會

একই চেতনায়, আমাদের আরও বেশি সমাবেশের ভাষা লেখার চেষ্টা করা উচিত। অর্ধ-রসিকতা (আমি বেশ একটি জ্যাকুরি সমাধানটিকে বেশ পছন্দ করি এবং মনে করি এটি একটি অন্তহীন খরগোশের ছিদ্র যদি আপনি সত্যিই হুডের নীচে কী চলছে তা বুঝতে চান) তবে হ্যাঁ, আমি আনন্দিত যে আমি কিছু সমাবেশের ভাষা জানি এবং কীভাবে টিসিপি জানি সংযোগগুলি তৈরি করা হয় ইত্যাদি I আমি এখনও কাউকে কেবল নীচের স্তরের কীসের বিস্ময়কর বিষয়গুলি শেখানোর জন্য তা নিম্ন স্তরের সমাধানটি হস্তান্তর করব না।

— জোশ সুতারফিল্ড

Answer 2

এটি ঘটানোর পরে আপনার নিজের জাভাস্ক্রিপ্ট ফাংশনটি কল করার সহজ উপায় onSubmit।

এইচটিএমএল

<form>
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>

জাভাস্ক্রিপ্ট

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(event) {
    event.preventDefault();
}

Comments

কেন আপনি 'জমা দেওয়া' ফাংশনটি আবদ্ধ করার সিদ্ধান্ত নিয়েছিলেন? ফাংশনে 'এই' এর কোনও ব্যবহার নেই।

— লাইয়ার

bindআসলেই অপ্রয়োজনীয়।

— pstadler

Answer 3

আপনার প্রয়োজনীয়তার ভিত্তিতে আপনি jQuery এর মতো লাইব্রেরি ছাড়াই নিম্নলিখিতগুলি করতে পারেন:

এটি আপনার মাথায় যুক্ত করুন:

window.onload = function () {
    document.getElementById("frmSubmit").onsubmit = function onSubmit(form) {
        var isValid = true;
        //validate your elems here
        isValid = false;

        if (!isValid) {
            alert("Please check your fields!");
            return false;
        }
        else {
            //you are good to go
            return true;
        }
    }
}

এবং আপনার ফর্মটি এখনও এর মতো দেখতে পারে:

    <form id="frmSubmit" action="/Submit">
        <input type="submit" value="Submit" />
    </form>

Comments

addEventListenerঅন্য বিকাশকারীদের নিজস্ব শ্রোতা যুক্ত করতে মঞ্জুরি দেওয়ার জন্য সর্বদা অনসামিত বা অনলোডের পরিবর্তে ব্যবহার করুন।

— beytarovski

Answer 4

JQuery সহ:

$('form').submit(function () {
    // Validate here

    if (pass)
        return true;
    else
        return false;
});