मैं jQuery के फॉर्म का उपयोग कैसे करूँ

Question

मेरे पास कई पाठ इनपुट और ड्रॉप डाउन के साथ एक खोज फ़ॉर्म है जो एक GET के माध्यम से प्रस्तुत करता है। जब कोई खोज की जाती है, तो मैं क्वेरिस्ट्रिंग से खाली फ़ील्ड निकालकर एक क्लीनर खोज 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 का उपयोग करके यह कैसे कर सकता हूं?

Answer 1

मैं jQuery डॉक्स पर देख रहा हूं और मुझे लगता है कि हम चयनकर्ताओं का उपयोग करके एक पंक्ति में ऐसा कर सकते हैं :

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

जाहिर है कि #myForm को आईडी "myForm" के साथ तत्व मिलता है लेकिन जो बात मेरे लिए पहले से कम स्पष्ट थी वह यह थी कि #myForm और: इनपुट के बीच स्पेस कैरेक्टर की जरूरत है क्योंकि यह वंशज ऑपरेटर है।

: इनपुट सभी इनपुट, टेक्सारिया, सिलेक्ट और बटन तत्वों से मेल खाता है।

[मान! = ''] एक विशेषता है न के बराबर फ़िल्टर। अजीब (और सहायक) बात यह है कि सभी: इनपुट तत्व प्रकारों में मूल्य विशेषताएँ भी चयन और चेकबॉक्स आदि हैं।

अंत में उन इनपुट्स को भी हटा दें जहां मूल्य था '।' (जैसा कि प्रश्न में उल्लेख किया गया है):

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

इस मामले में juxtaposition, यानी एक दूसरे के बगल में दो विशेषता चयनकर्ताओं रखने , एक का तात्पर्य है। अल्पविराम का उपयोग करने से तात्पर्य है एक। क्षमा करें यदि यह सीएसएस लोगों के लिए स्पष्ट है!

Comments

@ संशोधन, ऐसा इसलिए है क्योंकि इस उत्तर में एक छोटा लेकिन महत्वपूर्ण चूक है। JQuery 1.8 और इससे पहले के सामान्य / शुद्ध CSS चयनकर्ताओं के लिए, मौजूद[value] विशेषता वाले किसी भी तत्व से मेल खाता है , जिनमें खाली मान (या नहीं) मान शामिल हैं। यह पहले के jQuery संस्करण की कुछ शैलियों के बीच असंगतता बनाई में एक बग की वजह से है और । उदाहरण के लिए, ले लो ; बग इस फिडेल में चित्रित किया गया है । value input[value]:input[value]<input value="foo"><input value=""><input value><input>

— नॉयो जूल 15'13

मेरे लिए, यह काम किया: $form.find(":input[value]")- खाली खेतों का चयन नहीं किया गया था। यह काम नहीं किया: $form.find(":input[value!='']")- सभी क्षेत्रों का चयन किया गया था। आशा है कि किसी की मदद करता है। (jQuery 2.0.0)

— रयान व्हेल

$form.find(":input[value]")मेरे लिए भी काम किया (jQuery 1.11.0)

— GST

केवल तभी काम किया जाता है यदि valueविशेषता पहले से ही थी। इसे अन्यथा पहचान नहीं पाया।

— स्टारकॉक

कुछ मामलों में जहां valueप्रोग्रामेटिक रूप से सेट किया गया है, यह काम नहीं करेगा ( valueHTML विशेषता के रूप में मौजूद नहीं है, लेकिन इनपुट पर डेटा विशेषता के रूप में होगा)। उन मामलों में, यह कोशिश करें $('#myForm :input').filter(function(i) { return ($(this).val().length != 0); }).serialize():। संपादित करें: बस उसी प्रभाव के लिए रिच का जवाब देखा।

— फतेह खालसा

Answer 2

मैं काम करने के लिए टॉम का समाधान प्राप्त करने में सक्षम नहीं था (?), लेकिन मैं .filter()खाली क्षेत्रों की पहचान करने के लिए एक छोटे समारोह के साथ ऐसा करने में सक्षम था । मैं jQuery 2.1.1 का उपयोग कर रहा हूं।

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

Comments

काम करने के लिए स्वीकृत जवाब नहीं मिल सका, लेकिन यह बहुत काम आया! धन्यवाद!

— bfritz

मेरे स्वयं के प्रश्न का उत्तर देते हुए: " :inputचयनकर्ता मूल रूप से सभी फ़ॉर्म नियंत्रणों का चयन करता है। सभी इनपुट, टेक्स्टारिया, चयन और बटन तत्वों का चयन करता है।" स्रोत

— दीनी

हाँ, टॉम टूट गया है । तुम्हारा भी उस बेला में मेरे प्रयास से क्लीनर है। अपडाउन

— हैशब्रोन

Answer 3

यह मेरे लिए काम करता है:

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

Comments

ठीक है, कॉलबैक मानों को वापस लौटने दे रहा है, !!कुछ भी करने के लिए, आप कंसोल में कोशिश कर सकते हैं। !!('test'), !!(5),!!(0)

— Aiphee

और inputचयनकर्ता के बजाय , :inputचयन आदि को शामिल करना चाहिए

— Aiphee

मैं इस बदलाव का सुझाव देता हूं:data = $( "#my_form :input").filter(function () { return $(this).val() != ""; }).serialize();

— महूर

Answer 4

आप इसे regex के साथ कर सकते हैं ...

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

Comments

.replace ((/। ^&&+++\??(& $) / g, '') दोनों मामलों को शामिल करता है। लेकिन मैं ट्रेलिंग निकालने के लिए .replace (/ & $ /, '') जोड़ूंगा

— टॉम विनर

कोई समस्या नहीं है कि रेगेक्स बदतर नहीं बना सकता है।

— माइकल कुक

Answer 5

मैंने उपरोक्त समाधान का उपयोग किया है लेकिन मेरे लिए उन लोगों ने काम नहीं किया। इसलिए मैंने निम्नलिखित कोड का उपयोग किया है

$('#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;
        });

किसी के लिए उपयोगी हो सकता है

Answer 6

मैं jQuery के स्रोत कोड को देखूंगा। नवीनतम संस्करण लाइन 3287 में।

मैं "serialize2" और "serializeArray2" फ़ंक्शन में जोड़ सकता हूं। बेशक उनका नाम कुछ अर्थपूर्ण हो।

या बेहतर तरीका यह होगा कि आप बिना किसी क्रमिक संस्करण के धारावाहिककृतफर्मस्टार से बाहर खींचने के लिए कुछ लिखें। कुछ रेगेक्स जो = के लिए मध्य स्ट्रिंग में या अंत में दिखता है = आसपास के किसी भी रेजगेक्स जादूगर?

अद्यतन: मैं rogeriopvl के उत्तर को बेहतर (+1) पसंद करता हूं ... खासकर जब से मुझे अभी कोई अच्छा रेगेक्स टूल नहीं मिल रहा है।

Answer 7

रिच समाधान के लिए एक विकल्प :

$('#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 ईवेंट
• e.preventDefault() फॉर्म को सबमिट करने से रोकता है
• .serializeArray() हमें क्वेरी स्ट्रिंग की एक सरणी प्रतिनिधित्व देता है जिसे भेजा जाने वाला था।
• .filter() उस सरणी में मिथ्या (रिक्त सहित) मान निकालता है।
• $.param(query) हमारे अद्यतन किए गए सरणी का क्रमबद्ध और URL-अनुरूप प्रतिनिधित्व बनाता है
• window.location.hrefअनुरोध भेजने के लिए एक मान सेट करना

Answer 8

कॉफ़ीस्क्रिप्ट में, यह करें:

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

Answer 9

आप .each () jquery फ़ंक्शन को देखना चाहते हैं, जो आपको चयनकर्ता के प्रत्येक तत्व के माध्यम से पुनरावृति करने की अनुमति देता है, इसलिए इस तरह आप प्रत्येक इनपुट फ़ील्ड की जांच कर सकते हैं और देख सकते हैं कि यह खाली है या नहीं और फिर इसे फ़ॉर्म से हटा दें element.remove () का उपयोग कर। उसके बाद आप फॉर्म को क्रमबद्ध कर सकते हैं।

Comments

इसके साथ एकमात्र समस्या यह है कि उपयोगकर्ता उप-पृष्ठ से ठीक पहले गायब होने वाले नियंत्रणों से खाली देखेंगे। नाम को "" पर सेट करना बेहतर होगा ताकि धारावाहिक इसकी उपेक्षा करें।

— टॉम विनर