jquery সমস্ত ফর্ম উপাদান পান: ইনপুট, টেক্সারি এবং নির্বাচন করুন

Question

সমস্ত ফর্ম উপাদান এবং কেবল ফর্ম উপাদান নির্বাচন করার জন্য jquery এ কি কোনও সহজ উপায় আছে (সেগুলি আলাদাভাবে তালিকাভুক্ত না করে)।

আমি বাচ্চাদের () ইত্যাদি ব্যবহার করতে পারি না কারণ ফর্মটিতে অন্য এইচটিএমএল রয়েছে।

উদাহরণ:

$("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>

---

হতে পারে : ইনপুট নির্বাচনকারী আপনি চান তা

(("ফর্ম")। প্রতিটি (ফাংশন () {$ (': ইনপুট', এটি) // <- সেই নির্দিষ্ট ফর্মের সমস্ত ইনপুট উপাদানগুলি ফেরত দেওয়া উচিত});

ডক্সে নির্দেশিত হিসাবে

ব্যবহার করার সময় সেরা পারফরম্যান্স অর্জন করতে: উপাদান নির্বাচন করতে ইনপুট, প্রথমে খাঁটি সিএসএস নির্বাচক ব্যবহার করে উপাদান নির্বাচন করুন, তারপরে। ফিল্টার (": ইনপুট") ব্যবহার করুন।

আপনি নীচের মত ব্যবহার করতে পারেন,

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

Comments

ধন্যবাদ যদিও পড়ার পরে: api.jquery.com/input- নির্বাচকদের পারফরম্যান্স একটি সমস্যা হওয়ায় আমি সেগুলিও তালিকাভুক্ত করতে পারি। যদিও এর সম্ভাব্যতাটি জানা ভাল

— জন ম্যাগনোলিয়া

এটি কি আমি বা এই কাজ করে না select? সম্পাদনা: কিছুই নয়, আমি ব্যবহার করি বাছাইয়ের সাথে কাজ করেfind(':input')

— ব্রোক হেনসলে

আপনাকে এখানে "ফিল্টার" এর পরিবর্তে "সন্ধান" ব্যবহার করতে হবে কারণ "ফিল্টার" কোনও একক উপাদানে (এই ক্ষেত্রে "এই" উপাদানটি) কাজ করতে পারে না। "ফিল্টার" ব্যবহার করে আপনি কোনও ফর্ম উপাদান নির্বাচন করতে সক্ষম হবেন না এবং কেবল "নির্বাচন করুন" উপাদানগুলিও সক্ষম করতে পারবেন না। এটি নির্দেশ করার জন্য @ ব্রোক হেন্সলেকে ধন্যবাদ।

— মারিও আওয়াদ

বড় আকারের কীভাবে? আমার এতে 4000+ এরও বেশি উপাদান সহ একটি বিশাল ফর্ম রয়েছে এবং এই নির্বাচকটি খুব ধীর। স্পেসিফিকেশনটিতে লেখা আছে যে: ইনপুট সিএসএস 3 দ্বারা ব্রাউজার অপ্টিমাইজ করা হয় না, সুতরাং আমার জন্য কাজ করে না: /। অন্য কোন ধারণা?

— ভাসিল পপভ

@ ভাসিলপপভভ উপরেরটি আপনার জন্য খুব ধীর হতে পারে। আপনি কয়েকটি সমাধান সমাধানের চেষ্টা করতে পারেন, যেভাবেই আপনার কয়েকটি উপাদানকে গ্রুপ করতে এবং সেগুলি নির্বাচন করতে হবে।

— সেলভাকুমার আরুমুগাম

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

দুর্দান্ত ফাংশন! ধন্যবাদ

— মোহামাদ হামৌডে

Answer 5

jQuery ভ্যানিলা জেএস ফর্ম উপাদানগুলির একটি রেফারেন্স রাখে এবং এতে ফর্মের সমস্ত শিশু উপাদানগুলির একটি রেফারেন্স থাকে। আপনি কেবল রেফারেন্সটি ধরতে পারেন এবং এগিয়ে যেতে পারেন:

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

এটি আমার প্রিয় ফাংশন এবং এটি আমার জন্য কবজির মতো কাজ করে!

এটি ইনপুট, সিলেক্ট এবং টেক্সারিয়া ডেটার জন্য সকলের সাথে একটি বস্তু ফেরত দেয়।

এবং এটি উপাদানগুলির নাম অন্য আইডি ক্লাসের জন্য অবজেক্টের নাম পাওয়ার চেষ্টা করছে।

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

দুর্দান্ত তবে "এলিমেট_ভ্যালু = jQuery ('ইনপুট [নাম ="' + + উপাদান_নাম + '"]: চেক করা')। ভল ();" এ একটি সূক্ষ্ম বাগ আছে। এলিমেন্ট_নামটি আসলে নোড আইডি বা ক্লাস হতে পারে, সেক্ষেত্রে এটি উপাদানটি খুঁজে পাবে না।

— রাফায়েল ওয়ার্ল্যাং

সঠিক, আমি এখন এটি স্থির করেছি!

— মোহামাদ হামৌডে

Answer 8

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

জমা-বোতাম সহ সমস্ত উপাদান এখন পরিবর্তনশীল $ form_e উপাদানগুলিতে রয়েছে।

Comments

আপনি কীভাবে এগুলি অ্যাক্সেস করবেন?

— এনজেনজি

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

এটি

— টেক্সারিয়াস

Answer 12

সমস্ত ইনপুট:

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

সমস্ত বোতাম

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