jquery में सभी फॉर्म एलिमेंट मिलते हैं: इनपुट, टेक्सारिया और सेलेक्ट

Question

क्या सभी फॉर्म तत्वों और केवल फॉर्म एलिमेंट्स का चयन करने के लिए jquery में एक आसान तरीका है (उन सभी को अलग से सूचीबद्ध किए बिना)।

मैं बच्चों () आदि का उपयोग नहीं कर सकता क्योंकि फ़ॉर्म में अन्य HTML शामिल हैं।

उदाहरण के लिए:

$("form").each(function(){
    $(this, "input, textarea, select");
});

Answer 1

संपादित करें: जैसा कि टिप्पणियों में बताया गया है ( मारियो अवाड और ब्रॉक हेंसले ), .findबच्चों को प्राप्त करने के लिए उपयोग करें

$("form").each(function(){
    $(this).find(':input') //<-- Should return all input elements in that specific form.
});

प्रपत्रों में एक तत्व संग्रह भी होता है, कभी-कभी यह बच्चों से अलग होता है जैसे कि प्रपत्र टैग तालिका में है और बंद नहीं है।

var summary = [];
$('form').each(function () {
    summary.push('Form ' + this.id + ' has ' + $(this).find(':input').length + ' child(ren).');
    summary.push('Form ' + this.id + ' has ' + this.elements.length + ' form element(s).');
});

$('#results').html(summary.join('<br />'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="A" style="display: none;">
    <input type="text" />
    <button>Submit</button>
</form>
<form id="B" style="display: none;">
    <select><option>A</option></select>
    <button>Submit</button>
</form>

<table bgcolor="white" cellpadding="12" border="1" style="display: none;">
<tr><td colspan="2"><center><h1><i><b>Login
Area</b></i></h1></center></td></tr>
<tr><td><h1><i><b>UserID:</b></i></h1></td><td><form id="login" name="login" method="post"><input
name="id" type="text"></td></tr>
<tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass"
type="password"></td></tr>
<tr><td><center><input type="button" value="Login"
onClick="pasuser(this.form)"></center></td><td><center><br /><input
type="Reset"></form></td></tr></table></center>
<div id="results"></div>

---

हो सकता है : इनपुट चयनकर्ता वह हो जो आप चाहते हैं

$ ("फ़ॉर्म")। प्रत्येक (फ़ंक्शन () {$ (': इनपुट', यह) // <- उस विशिष्ट रूप में सभी इनपुट तत्वों को वापस करना चाहिए।});

जैसा कि डॉक्स में बताया गया है

उपयोग करते समय सर्वश्रेष्ठ प्रदर्शन प्राप्त करने के लिए: तत्वों का चयन करने के लिए इनपुट, पहले शुद्ध सीएसएस चयनकर्ता का उपयोग करके तत्वों का चयन करें, फिर .filter (": इनपुट") का उपयोग करें।

आप नीचे की तरह उपयोग कर सकते हैं,

$("form").each(function(){
    $(this).filter(':input') //<-- Should return all input elements in that specific form.
});

Comments

धन्यवाद हालांकि पढ़ने के बाद: api.jquery.com/input-selector प्रदर्शन एक मुद्दा होने के नाते मैं उन्हें भी सूचीबद्ध कर सकता हूं। हालांकि इसका संभव पता करना अच्छा है

— जॉन मैग्नोलिया

यह सिर्फ मेरे लिए है या यह काम नहीं करता है select? संपादित करें: कोई बात नहीं, अगर मैं उपयोग करता हूं तो चुनिंदा के साथ काम करता हैfind(':input')

— ब्रॉक हेंसले

आपको यहां "फ़िल्टर" के बजाय "फ़िल्टर" का उपयोग करना होगा क्योंकि "फ़िल्टर" एक तत्व पर काम नहीं कर सकता है (इस मामले में "यह" तत्व)। "फ़िल्टर" का उपयोग करके आप किसी भी प्रकार के तत्वों का चयन करने में सक्षम नहीं होंगे और न केवल "चयन करें" तत्व। इसे इंगित करने के लिए @Brock Hensley को धन्यवाद।

— मारियो अवध

बड़े रूपों के बारे में कैसे? मेरे पास 4000 से अधिक तत्वों के साथ एक विशाल रूप है, और यह चयनकर्ता बहुत धीमा है। विनिर्देश में लिखा है कि: इनपुट CSS3 द्वारा अनुकूलित ब्राउज़र नहीं है, इसलिए मेरे लिए काम नहीं करता है: /। कोई अन्य विचार?

— वासिल पोपोव

@VasilPopov उपरोक्त आपके लिए बहुत धीमा हो सकता है। आप कुछ समाधानों की कोशिश कर सकते हैं, या तो आपको कम तत्वों को समूहित करने और उन्हें चुनने की आवश्यकता है।

— सेल्वकुमार अरुमुगम

Answer 2

नीचे दिए गए कोड फॉर्म आईडी के साथ विशिष्ट रूप से तत्वों का विवरण प्राप्त करने में मदद करता है,

$('#formId input, #formId select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

नीचे दिया गया कोड उन सभी रूपों से तत्वों का विवरण प्राप्त करने में मदद करता है जो लोडिंग पेज में हैं,

$('form input, form select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

नीचे कोड उन तत्वों का विवरण प्राप्त करने में मदद करता है जो लोडिंग पृष्ठ में जगह रखते हैं, भले ही तत्व टैग के अंदर जगह न हो,

$('input, select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

नोट: हम और अधिक तत्व टैग नाम जोड़ते हैं जो हमें नीचे की तरह ऑब्जेक्ट सूची में चाहिए,

Example: to get name of attribute "textarea",

$('input, select, textarea').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

Comments

क्यों यह किसी चयनित तत्व के सभी मूल्यों और विकल्पों को लेता है, बजाय इसके कि वह उस चीज का मूल्य दे जो चयन या अन्यथा रिक्त है। ?

— user2906838

Answer 3

यदि आपके पास अतिरिक्त प्रकार हैं, तो चयनकर्ता को संपादित करें:

var formElements = new Array();
$("form :input").each(function(){
    formElements.push($(this));
});

सभी फॉर्म एलिमेंट्स अब एरे फॉर्मेलमेंट्स में हैं।

Answer 4

रिकॉर्ड के लिए : निम्नलिखित स्निपेट आपको इनपुट, टेक्स्टारिया, चयन, बटन, एक टैग के माध्यम से टैग के बारे में विवरण प्राप्त करने में मदद कर सकते हैं जब उन्हें मँडराते हैं।

$( 'body' ).on( 'mouseover', 'input, textarea, select, button, a', function() {
    var $tag = $( this );
    var $form = $tag.closest( 'form' );
    var title = this.title;
    var id = this.id;
    var name = this.name;
    var value = this.value;
    var type = this.type;
    var cls = this.className;
    var tagName = this.tagName;
    var options = [];
    var hidden = [];
    var formDetails = '';

    if ( $form.length ) {
        $form.find( ':input[type="hidden"]' ).each( function( index, el ) {
            hidden.push( "\t" + el.name + ' = ' + el.value );
        } );

        var formName = $form.prop( 'name' );
        var formTitle = $form.prop( 'title' );
        var formId = $form.prop( 'id' );
        var formClass = $form.prop( 'class' );

        formDetails +=
            "\n\nFORM NAME: " + formName +
            "\nFORM TITLE: " + formTitle +
            "\nFORM ID: " + formId +
            "\nFORM CLASS: " + formClass +
            "\nFORM HIDDEN INPUT:\n" + hidden.join( "\n" );
    }

    var tempTitle =
        "TAG: " + tagName +
        "\nTITLE: " + title +
        "\nID: " + id +
        "\nCLASS: " + cls;

    if ( 'SELECT' === tagName ) {
        $tag.find( 'option' ).each( function( index, el ) {
            options.push( el.value );
        } );

        tempTitle +=
            "\nNAME: " + name +
            "\nVALUE: " + value +
            "\nTYPE: " + type +
            "\nSELECT OPTIONS:\n\t" + options;

    } else if ( 'A' === tagName ) {
        tempTitle +=
            "\nHTML: " + $tag.html();

    } else {
        tempTitle +=
            "\nNAME: " + name +
            "\nVALUE: " + value +
            "\nTYPE: " + type;
    }

    tempTitle += formDetails;

    $tag.prop( 'title', tempTitle );
    $tag.on( 'mouseout', function() {
        $tag.prop( 'title', title );
    } )
} );

Comments

शानदार समारोह! धन्यवाद

— मोहम्मद Hamouday

Answer 5

jQuery वेनिला JS फॉर्म एलिमेंट का संदर्भ रखता है, और इसमें फॉर्म के सभी चाइल्ड एलिमेंट्स का संदर्भ होता है। आप बस संदर्भ को पकड़ सकते हैं और आगे बढ़ सकते हैं:

var someForm = $('#SomeForm');

$.each(someForm[0].elements, function(index, elem){
    //Do something here.
});

Answer 6

JQuery के क्रमबद्ध कार्य सभी फ़ॉर्म तत्वों को प्राप्त करना बहुत आसान बनाता है।

डेमो: http://jsfiddle.net/55xnJ/2/

$("form").serialize(); //get all form elements at once 

//result would be like this:
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

Answer 7

यह मेरा पसंदीदा कार्य है और यह मेरे लिए एक आकर्षण की तरह काम करता है!

यह सभी इनपुट, चयन और textarea डेटा के साथ एक वस्तु देता है।

और यह तत्वों के नाम से वस्तुओं का नाम प्राप्त करने की कोशिश कर रहा है नाम ईद और वर्ग

var All_Data = Get_All_Forms_Data();
console.log(All_Data);

समारोह:

function Get_All_Forms_Data(Element)
{
    Element = Element || '';
    var All_Page_Data = {};
    var All_Forms_Data_Temp = {};
    if(!Element)
    {
        Element = 'body';
    }

    $(Element).find('input,select,textarea').each(function(i){
        All_Forms_Data_Temp[i] = $(this);
    });

    $.each(All_Forms_Data_Temp,function(){
        var input = $(this);
        var Element_Name;
        var Element_Value;

        if((input.attr('type') == 'submit') || (input.attr('type') == 'button'))
        {
            return true;
        }

        if((input.attr('name') !== undefined) && (input.attr('name') != ''))
        {
            Element_Name = input.attr('name').trim();
        }
        else if((input.attr('id') !== undefined) && (input.attr('id') != ''))
        {
            Element_Name = input.attr('id').trim();
        }
        else if((input.attr('class') !== undefined) && (input.attr('class') != ''))
        {
            Element_Name = input.attr('class').trim();
        }

        if(input.val() !== undefined)
        {
            if(input.attr('type') == 'checkbox')
            {
                Element_Value = input.parent().find('input[name="'+Element_Name+'"]:checked').val();
            }
            else if((input.attr('type') == 'radio'))
            {
                Element_Value = $('input[name="'+Element_Name+'"]:checked',Element).val();
            }
            else
            {
                Element_Value = input.val();
            }
        }
        else if(input.text() != undefined)
        {
            Element_Value = input.text();
        }

        if(Element_Value === undefined)
        {
            Element_Value = '';
        }

        if(Element_Name !== undefined)
        {
            var Element_Array = new Array();
            if(Element_Name.indexOf(' ') !== -1)
            {
                Element_Array = Element_Name.split(/(\s+)/);
            }
            else
            {
                Element_Array.push(Element_Name);
            }

            $.each(Element_Array,function(index, Name)
            {
                Name = Name.trim();
                if(Name != '')
                {
                    All_Page_Data[Name] = Element_Value;
                }
            });
        }
    });
    return All_Page_Data;
}

Comments

अच्छा है, लेकिन "Element_Value = jQuery ('इनपुट [नाम =" + Element_Name +' "]: चेक किया हुआ) () (") में एक सूक्ष्म बग है। Element_Name वास्तव में नोड आईडी या वर्ग हो सकता है, जिस स्थिति में यह तत्व नहीं खोजेगा।

— राफेल वेरलैंग

सही है, मैंने अब इसे ठीक कर लिया है!

— मोहम्मद हमउददीन

Answer 8

var $form_elements = $("#form_id").find(":input");

सबमिट-बटन सहित सभी तत्व अब चर $ form_elements में हैं।

Comments

आप उन्हें कैसे एक्सेस करते हैं?

— Ngenazy

Answer 9

बस एक और तरीका जोड़ने के लिए:

$('form[name=' + formName + ']').find(':input')

Answer 10

इस फ़ंक्शन का प्रयास करें

function fieldsValidations(element) {
    var isFilled = true;
    var fields = $("#"+element)
        .find("select, textarea, input").serializeArray();

    $.each(fields, function(i, field) {
        if (!field.value){
            isFilled = false;
            return false;
        }
    });
    return isFilled;
}

और इसका उपयोग करें

$("#submit").click(function () {

    if(fieldsValidations('initiate')){
        $("#submit").html("<i class=\"fas fa-circle-notch fa-spin\"></i>");
    }
});

का आनंद लें :)

Answer 11

कुछ इस तरह की कोशिश करो:

<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>

<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {

  // Stop form from submitting normally
event.preventDefault();

// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );

// Send the data using post
var posting = $.post( url, { s: term } );

// Put the results in a div
posting.done(function( data ) {
  var content = $( data ).find( "#content" );
  $( "#result" ).empty().append( content );
    });
  });
</script>

इनपुट के उपयोग पर ध्यान दें []

Comments

यह textareas या का चयन करने के लिए प्रतीत नहीं होता है

— pcarvalho

Answer 12

सभी इनपुट:

var inputs = $("#formId :input");

सभी बटन

var button = $("#formId :button")