আমি কীভাবে jQuery এর ফর্মটি ব্যবহার করব rial


107

আমার কাছে জিইটির মাধ্যমে জমা হওয়া বেশ কয়েকটি পাঠ্য ইনপুট এবং ড্রপ ডাউন সহ একটি অনুসন্ধান ফর্ম রয়েছে। যখন অনুসন্ধান করা হবে তখন ক্যোয়ারিং স্ট্রিং থেকে ফাঁকা ক্ষেত্রগুলি সরিয়ে ক্লিনার অনুসন্ধান url পেতে চাই।

var form = $("form");  
var serializedFormStr = form.serialize();  
// I'd like to remove inputs where value is '' or '.' here
window.location.href = '/search?' + serializedFormStr

JQuery ব্যবহার করে কীভাবে আমি এটি করতে পারি তা সম্পর্কে কোনও ধারণা?

উত্তর:


167

আমি jQuery ডক্স অনুসন্ধান করেছি এবং আমি মনে করি নির্বাচকদের ব্যবহার করে আমরা এটি একটি লাইনে এটি করতে পারি :

$("#myForm :input[value!='']").serialize() // does the job!

স্পষ্টতই #myForm আইডি "মাইফর্ম" দিয়ে এলিমেন্টটি পেয়েছে তবে প্রথমে আমার কাছে যা কম স্পষ্ট হয়েছিল তা ছিল # মাইফর্ম এবং: ইনপুট হিসাবে এটি বংশধর অপারেটর হিসাবে স্পেস ক্যারেক্টারটির প্রয়োজন ।

: ইনপুট সমস্ত ইনপুট, টেক্সারিয়া, নির্বাচন করুন এবং বোতামের উপাদানগুলির সাথে মেলে।

[মান! = ''] একটি বৈশিষ্ট্য সমান ফিল্টার নয়। অদ্ভুত (এবং সহায়ক) জিনিসটি হ'ল সমস্ত: ইনপুট উপাদানগুলির ধরণের মান বৈশিষ্ট্য এমনকি নির্বাচন এবং চেকবক্সগুলি থাকে etc.

অবশেষে ইনপুটগুলি সরিয়ে ফেলতে যেখানে মান ছিল '।' (প্রশ্নে উল্লিখিত হিসাবে):

$("#myForm :input[value!=''][value!='.']").serialize()

এই ক্ষেত্রে juxtaposition, অর্থাত্ একে অপরের পাশে দুটি অ্যাট্রিবিউট সিলেক্টর রাখা , একটি AND বোঝায়। কমা ব্যবহার করে একটি ওআর বোঝায়। যদি এটি সিএসএসের লোকদের কাছে সুস্পষ্ট হয় তবে দুঃখিত!


3
@ মুভিশন, কারণ এই উত্তরে একটি ছোট তবে উল্লেখযোগ্য বাদ রয়েছে। JQuery 1.8 এবং তার আগের সাধারণ / খাঁটি সিএসএস নির্বাচকদের জন্য, খালি মানগুলি (বা না) মান সহ , উপস্থিত[value] বৈশিষ্ট্যগুলির সাথে কোনও উপাদান মেলে । এই তার আগে jQuery এর সংস্করণ নির্দিষ্ট বৈচিত্র মধ্যে কোনও অসঙ্গতি সৃষ্টি একটি বাগ কারণে এবং । উদাহরণস্বরূপ, নিন ; ত্রুটিটি এই মূর্ছনায় চিত্রিত হয়েছে । value input[value]:input[value]<input value="foo"><input value=""><input value><input>
ন্যো

4
আমার জন্য, এটি কাজ করেছে: $form.find(":input[value]")- খালি ক্ষেত্র নির্বাচন করা হয়নি। এটি কার্যকর হয়নি: $form.find(":input[value!='']")- সমস্ত ক্ষেত্র নির্বাচন করা হয়েছিল। আশা করি যে কাউকে সাহায্য করবে। (jQuery 2.0.0)
রায়ান হুইল

1
$form.find(":input[value]")আমার জন্যও কাজ করেছেন (jQuery 1.11.0)
জিএসটিআর

valueবৈশিষ্ট্যটি ইতিমধ্যে সেখানে থাকলে কেবল কাজ করে । এটি অন্যথায় এটি চিনতে পারেনি।
স্টারকর্ন

1
valueপ্রোগ্রামিয়ালি সেট করা কিছু ক্ষেত্রে , এটি কাজ করবে না ( valueকোনও HTML বৈশিষ্ট্য হিসাবে উপস্থিত হবে না, তবে ইনপুটটিতে ডেটা অ্যাট্রিবিউট হিসাবে থাকবে)। সেই ক্ষেত্রে, এই চেষ্টা করে দেখুন: $('#myForm :input').filter(function(i) { return ($(this).val().length != 0); }).serialize()। সম্পাদনা: একই প্রভাবের জন্য কেবল রিচের উত্তর দেখেছি।
ফতেহ খালসা

54

আমি কাজের (?) টমের সমাধান পেতে সক্ষম হয়েছি না, তবে .filter()খালি ক্ষেতগুলি সনাক্ত করতে একটি সংক্ষিপ্ত ফাংশন ব্যবহার করে এটি করতে সক্ষম হয়েছি । আমি jQuery 2.1.1 ব্যবহার করছি।

var formData = $("#formid :input")
    .filter(function(index, element) {
        return $(element).val() != '';
    })
    .serialize();

2
কাজের অনুমোদিত উত্তর পাওয়া যায় নি, তবে এটি দুর্দান্ত কাজ করেছে! ধন্যবাদ!
bfritz

আমার নিজের প্রশ্নের উত্তরে: " :inputনির্বাচক মূলত সমস্ত ফর্ম নিয়ন্ত্রণ নির্বাচন করে all সমস্ত ইনপুট, টেক্সারিয়া, নির্বাচন করুন এবং বোতামের উপাদান নির্বাচন করুন" " উত্স
দিনেই

হ্যাঁ, টমস ভেঙে গেছে । আপনারাও সেই ঝাঁকুনিতে আমার প্রচেষ্টার চেয়ে পরিষ্কার। আপড
হ্যাশব্রাউন

11

এটি আমার পক্ষে কাজ করে:

data = $( "#my_form input").filter(function () {
        return !!this.value;
    }).serialize();

ঠিক আছে, কলব্যাক হ'ল পাস মানগুলি সত্য করে ফিরছে, !!কিছুতেই বুলে টাইপ করে, আপনি কনসোলে চেষ্টা করতে পারেন। !!('test'), !!(5),!!(0)
Aiphee

2
আর বদলে inputনির্বাচক, সেখানে উচিত :inputনির্বাচন, ইত্যাদি অন্তর্ভুক্ত করা
Aiphee

আমি এই পরিবর্তনটি প্রস্তাব করছি:data = $( "#my_form :input").filter(function () { return $(this).val() != ""; }).serialize();
মাহুর 13

9

আপনি এটি একটি রেজেক্স দিয়ে করতে পারেন ...

var orig = $('#myForm').serialize();
var withoutEmpties = orig.replace(/[^&]+=\.?(?:&|$)/g, '')

পরীক্ষার কেস:

orig = "a=&b=.&c=&d=.&e=";
new => ""

orig = "a=&b=bbb&c=.&d=ddd&e=";
new => "b=bbb&d=ddd&"  // dunno if that trailing & is a problem or not

.replace (/ ^^^^ ]]]]]]]\\\\\\? | | | | | | | | | |। | | |। |।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।।) তবে আমি লেজটি অপসারণ করতে .replice (/ & $ /, '') যুক্ত করব এবং
টম ভিনিয়ার

15
রেজেক্স আরও খারাপ করতে পারে না এমন কোনও সমস্যা নেই।
মাইকেল কুক

3

আমি উপরের সমাধানটি ব্যবহার করেছি তবে আমার পক্ষে সেগুলি কার্যকর হয়নি। সুতরাং আমি নিম্নলিখিত কোড ব্যবহার করেছি

$('#searchform').submit(function(){

            var serializedData = $(this).serializeArray();
            var query_str = '';

            $.each(serializedData, function(i,data){
                if($.trim(data['value'])){
                    query_str += (query_str == '') ? '?' + data['name'] + '=' + data['value'] : '&' + data['name'] + '=' + data['value'];
                }
            });
            console.log(query_str);
            return false;
        });

কারও কাজে লাগতে পারে


1

আমি jQuery জন্য উত্স কোড তাকান। সর্বশেষতম সংস্করণ লাইনে 3287।

আমি একটি "সিরিয়ালাইজ 2" এবং "সিরিয়ালাইজ অ্যারে 2" ফাংশন যুক্ত করতে পারি। অবশ্যই তাদের অর্থপূর্ণ কিছু নাম দিন।

বা আরও ভাল উপায় হ'ল সিরিয়ালাইজডফর্মএসটিআর থেকে অব্যবহৃত ভারগুলি টানতে কিছু লেখা। কিছু রিজেক্স যা = এবং মাঝের স্ট্রিংয়ে বা শেষের দিকে = কোনও রেজেক্স উইজার্ডের সমাপ্ত হয়?

আপডেট: আমি রোজারিওভিএল এর উত্তর আরও ভাল (+1) পছন্দ করি ... বিশেষত যেহেতু আমি এখনই কোনও ভাল রেজেক্স সরঞ্জাম খুঁজে পাচ্ছি না।


1

ধনী সমাধানের বিকল্প :

$('#form').submit(function (e) {
  e.preventDefault();

  var query = $(this).serializeArray().filter(function (i) {
    return i.value;
  });

   window.location.href = $(this).attr('action') + (query ? '?' + $.param(query) : '');
});

ব্যাখ্যা:

  • .submit()ফর্ম এর submitইভেন্ট উপর hook
  • e.preventDefault() ফর্ম জমা দেওয়া থেকে বাধা দেয়
  • .serializeArray() আমাদের জিজ্ঞাসা স্ট্রিংয়ের একটি অ্যারে উপস্থাপনা দেয় যা প্রেরণে যাচ্ছিল।
  • .filter() সেই অ্যারেতে মিথ্যা (খালি সহ) মানগুলি সরিয়ে দেয়।
  • $.param(query) আমাদের আপডেট হওয়া অ্যারের একটি সিরিয়ালযুক্ত এবং URL- অনুসারে উপস্থাপনা তৈরি করে
  • window.location.hrefঅনুরোধ প্রেরণে একটি মান সেট করা

0

কফিস্ক্রিপ্টে, এটি করুন:

serialized_form = $(_.filter($(context).find("form.params input"), (x) -> $(x).val() != '')).serialize()

-1

আপনি .each () jquery ফাংশনটি দেখতে চাইতে পারেন, যা আপনাকে নির্বাচকের প্রতিটি উপাদান দিয়ে পুনরাবৃত্তি করতে দেয়, সুতরাং আপনি প্রতিটি ইনপুট ক্ষেত্রটি পরীক্ষা করে দেখতে পারেন এবং এটি ফাঁকা আছে কি না এবং তা ফর্মটি থেকে সরিয়ে ফেলতে পারেন এলিমেন্ট.রেভ () ব্যবহার করে। এর পরে আপনি ফর্মটি সিরিয়ালাইজ করতে পারেন।


1
এটির সাথে একমাত্র সমস্যাটি পৃষ্ঠাটি জমা দেওয়ার ঠিক আগে নিয়ন্ত্রণগুলি খালি হয়ে যাওয়া দেখতে পাবে। নামটি সেট করা ভাল "" তাই সিরিয়ালাইজ এটিকে উপেক্ষা করে।
টম ভিনার 0
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.