JQuery ব্যবহার করে খালি পাঠ্য ইনপুট নির্বাচন করা

103

আমি কীভাবে jQuery ব্যবহার করে ফাঁকা পাঠ্যবক্সগুলি সনাক্ত করব? আমি যদি এটি সম্ভব হয় তবে নির্বাচকদের ব্যবহার করে এটি করতে চাই। এছাড়াও, আইডিতে অবশ্যই নির্বাচন করতে হবে যেহেতু আমি এই কোডটি ব্যবহার করতে চাই যেখানে আমি সমস্ত পাঠ্য ইনপুট নির্বাচন করতে চাই না।

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

এটি কি কেবল নির্বাচকদের ব্যবহার করে করা যায়?

এই কোডটি পাঠ্যবাক্স "txt2" এর মান রিপোর্ট করে:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    alert($('[id=txt2]').val());
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>

এই কোডটি সর্বদা পাঠ্যবাক্স "txt2" খালি হিসাবে প্রতিবেদন করে:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    if($('[id^=txt][value=""]').length > 0) {
                        if (!confirm("Are you sure you want to submit empty fields?")) {
                            if (event.preventDefault) {
                                event.preventDefault();
                            } else {
                                event.returnValue = false;
                            }
                        }
                    }
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>

jquery css-selectors

— Cros
সূত্র

6

'[মান =]' ব্যবহারকারীর ইনপুট উপেক্ষা করে এবং উত্সটিতে কেবল কী আছে তা পরীক্ষা করে কিনা কেউ কি জানেন?

— ক্রস

আমি কি ঠিক বলছি: খালি ফিল্টারটি এই কাজের জন্য তৈরি? $ ( 'INPUT [টাইপ = টেক্সট]: খালি')। doStuff ();

— অ্যান্টনি কারথি

1

দস্তাবেজগুলি পড়ুন - docs.jquery.com/Selectors/empty । খালি হ'ল এমন উপাদানগুলির জন্য যেগুলির কোনও সন্তান নেই, কোনও মূল্য নেই

— রাশ ক্যাম

196

অন্য উপায়

$('input:text').filter(function() { return $(this).val() == ""; });

অথবা

$('input:text').filter(function() { return this.value == ""; });

অথবা

// WARNING: if input element does not have the "value" attribute or this attribute was removed from DOM then such selector WILL NOT WORK! 
// For example input with type="file" and file does not selected.
// It's prefer to use "filter()" method.
// Thanks to @AaronLS
$('input:text[value=""]');

ওয়ার্কিং ডেমো

ডেমো থেকে কোড

jQuery এর

 $(function() {

  $('#button').click(function() {

    var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
    var string = "The blank textbox ids are - \n";

    emptyTextBoxes.each(function() {
      string += "\n" + this.id;
    });
    alert(string);
  });

});

— রাশ ক্যাম
সূত্র

আমার জন্য: যদি ('(' [আইডি ^ = txt] ') filter ফিল্টার (ফাংশন () {রিটার্ন $ (এটি) val ); }

— ক্রস

আমার দ্বিতীয় উদাহরণটি থেকে আপনার শেষ উদাহরণটি কী আলাদা হয়? আমাকে আইডিতে নির্বাচন করা দরকার, যেহেতু আসল কোডে আমি সমস্ত পাঠ্য ইনপুটগুলিতে তাকাব না। আমার দ্বিতীয় উদাহরণটি ব্যবহারকারী ইনপুট নিয়ে কাজ করে না, তবে আপনার কাজটি করে।

— ক্রস

1

কার্যনির্বাহী নির্বাচকটি করণীয় করছে বলে মনে করছেন: নির্বাচককে পাঠ্য - আপনি যদি ওয়ার্কিং ডেমোটি খুলেন এবং URL- এ যুক্ত / সম্পাদনা করেন তবে আপনি নির্বাচকটির সাথে খেলতে পারেন। আপনি যদি: পাঠ্যটি সরিয়ে ফেলেন তবে নির্বাচক আর correctly ('ইনপুট [মান = ""]') দিয়েও সঠিকভাবে কাজ করবে না। সিজল সিলেক্টর ইঞ্জিনে সম্ভবত একটি ত্রুটি রয়েছে তবে তদন্ত করার জন্য আমার কাছে সময় নেই। যাইহোক, আমি বাছাইকারীতে একটি উপাদান ট্যাগ ব্যবহার করার পরামর্শ দেব, অন্যথায় প্রতিটি উপাদান বৈশিষ্ট্যের মানগুলির সাথে কোনও মিল আছে কিনা তা পরীক্ষা করা হবে।

— রাশ ক্যাম

3

চমৎকার উত্তর! তবে আপনি এটিও নিশ্চিত করতে চাইতে পারেন যে ইনপুট উপাদানটির মান আক্ষরিক অর্থে নাল (ফাঁকা জায়গা!)। সেক্ষেত্রে খালি ফাঁকা স্থানগুলি ছাঁটাইয়ের বিষয়টি নিশ্চিত করুন। এরকম কিছু$('input:text').filter(function() { return $(this).val().trim() == ""; });

— ভিনিথ প্রধান

31

দ্রষ্টব্য যে যদি উপাদানটি উপস্থিত থাকে তবে মানটির [value=""]কোনও বৈশিষ্ট্য না থাকে তবে নির্বাচক কোনও মান বৈশিষ্ট্য না পাওয়ায় নির্বাচক কাজ করবে না। তবে ফিল্টার কৌশলটি এই দৃশ্যে কাজ করে।

— অ্যারোনএলএস

26

আপনি আপনার নিজের নির্বাচককে সংজ্ঞায়িত করে এটি করতে পারেন:

$.extend($.expr[':'],{
    textboxEmpty: function(el){
        return $(el).val() === "";
    }
});

এবং তারপরে এগুলিতে অ্যাক্সেস করুন:

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection

— জেমস উইজম্যান
সূত্র

আমি অভিনয় সম্পর্কে কিছুটা উদ্বিগ্ন। তবে সম্ভবত সবচেয়ে সহজ উত্তর!

— অ্যালিকানডিল

19

$(":text[value='']").doStuff();

?

যাইহোক, আপনার কল:

$('input[id=cmdSubmit]')...

করা যেতে পারে ব্যাপকভাবে সরলীকৃত এবং আপ speeded:

$('#cmdSubmit')...

— cletus
সূত্র

আমি অনুমান করি একটি বন্ধ বর্গাকার বন্ধনী নেই। প্রত্যাশার মতো কাজ না করা jQuery এর একটি সাধারণ উত্স, স্পট করা শক্ত: - /

— অরেগনঘস্ট

আপনার প্রথম উদাহরণটি মূলত আমার কাজকর্মের উদাহরণটি যা করে না। আমি জানতে চাই যে ব্যবহারকারী যদি ইনপুট ক্ষেত্রে পাঠ্য যুক্ত করে, আপনার উদাহরণ এটি করে না।

— ক্রস

আমি তাড়াহুড়া করেছিলাম, আপনার উদাহরণটি কাজ করে বলে মনে হচ্ছে, তবে এটি আইডিতে নির্বাচন করে না, যা আমার অবশ্যই করা উচিত।

— ক্রস

"ইনপুট [আইডি = ..]" করা "#" এর মতো নয়। # আপনাকে অবজেক্টগুলির একটি অ্যারে দেয় না।

— dev4Live

@ দেব 4 লাইফ যদি আপনি একই আইডি সহ কোনও পৃষ্ঠায় একাধিক উপাদান ব্যবহার করে থাকেন তবে আপনি এটি ভুল করছেন

— শান কেন্ডল

12

শীর্ষ স্থানযুক্ত পোস্টে উল্লিখিত হিসাবে, সিজল ইঞ্জিন সহ নিম্নলিখিতটি কাজ করে।

$('input:text[value=""]');

মন্তব্যে, এটি লক্ষ করা গেছে যে :textনির্বাচকের অংশটি অপসারণের ফলে নির্বাচক ব্যর্থ হয়। আমি বিশ্বাস করি যা ঘটছে তা হ'ল সিজল আসলে যখন সম্ভব হয় তখন নির্বাচক ইঞ্জিনে ব্রাউজারের উপর নির্ভর করে। যখন :textনির্বাচকটিতে যুক্ত করা হয়, এটি একটি নন-স্ট্যান্ডার্ড সিএসএস নির্বাচক হয়ে যায় এবং তারপরে সিজল নিজেই পরিচালনা করতে হবে। এর অর্থ সিজল উত্স এইচটিএমএল-এ উল্লিখিত "মান" বৈশিষ্ট্যের পরিবর্তে ইনপুটটির বর্তমান মানটি পরীক্ষা করে।

সুতরাং এটি খালি পাঠ্য ক্ষেত্রগুলির জন্য যাচাই করার একটি চতুর উপায়, তবে আমি মনে করি এটি সিজল ইঞ্জিনের সাথে সম্পর্কিত কোনও আচরণের উপর নির্ভর করে (উত্স কোডে সংজ্ঞায়িত বৈশিষ্ট্যের পরিবর্তে INPUT এর বর্তমান মান ব্যবহার করা)। যদিও সিজল এই নির্বাচকের সাথে মেলে এমন উপাদানগুলি ফিরে আসতে পারে, document.querySelectorAllকেবলমাত্র value=""এইচটিএমএলে থাকা উপাদানগুলিকেই ফিরিয়ে দেবে । গুহাত সম্রাট

— thirdender
সূত্র

5

`$("input[type=text][value=]")`

প্রচুর সংস্করণ চেষ্টা করার পরে আমি এটি সবচেয়ে যুক্তিসঙ্গত বলে মনে করি।

নোট যে textক্ষেত্রে সংবেদনশীল।

4

@ জেমস উইজম্যানের উত্তরে বিল্ডিং, আমি এটি ব্যবহার করছি:

$.extend($.expr[':'],{
    blank: function(el){
        return $(el).val().match(/^\s*$/);
    }
});

এটি 'সত্যিকারের' খালি খালি ছাড়াও কেবল শ্বেত স্পেস ধারণ করে এমন ইনপুটগুলি ধরা দেবে।

উদাহরণ: http://jsfiddle.net/e9btdbyn/

— Gruffy
সূত্র

3

আমি সুপারিশ করব:

$('input:text:not([value])')

— টি এম।
সূত্র

2

এটি কাজ করবে না, কারণ [বৈশিষ্ট্য] কোনও বৈশিষ্ট্যের উপস্থিতি সন্ধান করে - এর কোনও মূল্য আছে কি না তা নয়। <input value="">এখনও মিলবে।

— বেন হাল হাল

ফর্ম ক্ষেত্র তৈরি করার জন্য লারাভেল ব্যবহার করার সময় এটি আমার পক্ষে সহায়ক ছিল (উদাঃ {{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}) কারণ লারাভেল ফাঁকা থাকলে কোনও 'মান' গুণটি যুক্ত করে না। সুতরাং আমি তখন ব্যবহার করেছি: $('input:text:not([value]):visible:enabled:first');প্রথম দৃশ্যমান খালি সক্ষম টেক্সট ইনপুট ক্ষেত্রটি সন্ধান করতে।

— রায়ান

3

এখানে অনেকগুলি উত্তর রয়েছে যা এরকম কিছু প্রস্তাব দেয় [value=""]তবে আমি মনে করি না যে এটি আসলে কাজ করে। । । বা কমপক্ষে, ব্যবহার সামঞ্জস্যপূর্ণ নয়। আমি অনুরূপ কিছু করার চেষ্টা করছি, একটি নির্দিষ্ট স্ট্রিং দিয়ে শুরু করে আইডি সহ সমস্ত ইনপুট নির্বাচন করে যার কোনও মানও নেই entered আমি এটি চেষ্টা করেছি:

$("input[id^='something'][value='']")

কিন্তু এটি কাজ করে না। না তাদের বিপরীত। এই ঝাঁকুনি দেখুন । আইডির সাথে সমস্ত ইনপুট সঠিকভাবে সিলেক্ট করার জন্য আমি খুঁজে পেয়েছি কেবল একটি স্ট্রিং দিয়ে এবং প্রবেশমূল্য ব্যতীত

$("input[id^='something']").not("[value!='']")

এবং

$("input[id^='something']:not([value!=''])")

তবে স্পষ্টতই, ডাবল নেতিবাচক বিষয়গুলি সত্যই বিভ্রান্তিকর করে তোলে। সম্ভবত, রাশ ক্যামের প্রথম উত্তর (ফিল্টারিং ফাংশন সহ) সর্বাধিক স্পষ্ট পদ্ধতি।

— tandrewnichols
সূত্র

1

এটি একটি আইডি দিয়ে খালি পাঠ্য ইনপুট নির্বাচন করবে যা "txt" দিয়ে শুরু হবে:

$(':text[value=""][id^=txt]')

— Cros
সূত্র

0

যেহেতু প্রতিটি তুলনার জন্য একটি জিকুয়েরি অবজেক্ট তৈরি করা দক্ষ নয়, কেবল ব্যবহার করুন:

$.expr[":"].blank = function(element) {
    return element.value == "";
};

তারপরে আপনি এটি করতে পারেন:

$(":input:blank")

— ট্যায়ার
সূত্র