به دست آوردن فهرست همه عنصرهای input در فرم (Form) (همه فرم های صفحه و یا تنها یک فرم خاص در صفحه)، با روش getElementsByTagName ، در JavaScript

برای به دست آوردن فهرست تمامی عنصرهای input موجود در یک فرم (Form)، می توانیم از روش getElementsByTagName در JavaScript استفاده نماییم.

شیوه استفاده از روش getElementsByTagName به صورت زیر می باشد :

پس از اجرای کد بالا، متغیر inputs حاوی فهرست کامل عنصرهای input موجود در صفحه می باشد و اکنون می توانیم به اطلاعات مربوط به آنها، از طریق متغیر inputs دسترسی داشته باشیم.

همانطور که مشاهده می کنید، در واقع روش getElementsByTagName در JavaScript ، برای یافتن تمامی تگ های از یک نوع خاص (مثلا همه تگ های input یا همه تگ های p یا همه تگ های a و ...) به کار می رود و ما به آن اعلام کرده ایم که تمامی تگ های input موجود در صفحه HTML را بیابد، که در واقع می‌شوند همان تگ های input موجود در فرم (Form) مورد نظر ما (البته اگر تنها یک فرم (Form) در صفحه داشته باشیم، حالت داشتن بیشتر از یک فرم (Form) را نیز شرح خواهیم داد).

بعد از به دست آوردن فهرست تگ های input (که در واقع، کل اطلاعات مربوط به آنها می باشد)، آنگاه می توانیم مواردی مثل نام (name) و مقدار (value) و ... از آنها را بررسی کنیم.

نکته

اگر در صفحه HTML ، بیش از یک فرم (Form) داشته باشیم و بخواهیم که تنها تگ های input موجود در یکی از آن فرم ها (Form) را بیابیم، آنگاه می توانیم کد JavaScript زیر را به کار ببریم :

که در آن، فرض کرده ایم که فرم (Form) مورد نظرمان دارای id برابر kelidestan_form می باشد.

به مثال زیر توجه کنید :

مثال

یک فرم (Form) می سازیم که دارای تعدادی تگ input باشد. سپس با استفاده از روش getElementsByTagName ، فهرست آنها را به دست آورده و در خروجی صفحه، نام (name) آنها را نمایش می‌دهیم.

کد HTML مربوط به فرم (Form) :

کدهای JavaScript :

که در آن، اطلاعات مربوط به تگ های input ، در متغیر inputs ذخیره شده است و در حلقه for ، با استفاده از عبارت زیر، به نام (name) هر یک از آنها، دسترسی خواهیم داشت :

کل کدهای صفحه HTML :

نتیجه :

مثال

یک فرم (Form) می سازیم که دارای تعدادی تگ input باشد. سپس با استفاده از روش getElementsByTagName ، فهرست آنها را به دست آورده و در خروجی صفحه، نام (name) و مقدار (value) آنها را نمایش می‌دهیم.

کد HTML مربوط به فرم (Form) :

کدهای JavaScript :

که در آن، اطلاعات مربوط به تگ های input ، در متغیر inputs ذخیره شده است و در حلقه for ، با استفاده از دو عبارت زیر، به نام (name) و مقدار (value) هر یک از آنها، دسترسی خواهیم داشت :

کل کدهای صفحه HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>

<body>
        <form method="post" action="#">
            Data 1 : <br>
            <input type="text" name="field_1" value="text 1"><br>
            Data 2 : <br>
            <input type="text" name="field_2" value="text 2"><br>
            Data 3 : <br>
            <input type="text" name="field_3" value="text 3"><br>
            Data 4 : <br>
            <input type="text" name="field_4" value="text 4">
        </form>
		
        <br><br>
		
        <p id="kelidestan">
            Fields - Name And Value :
            <br><br>
        </p>
        
        <script>
            var inputs = document.getElementsByTagName('input');
            var paragraph = document.getElementById("kelidestan");
            var index;
            for (index = 0; index < inputs.length; ++index) {
                paragraph.innerHTML += inputs[index].name;
                paragraph.innerHTML += "<br>";
                paragraph.innerHTML += inputs[index].value;
                paragraph.innerHTML += "<br><br>";
            }
        </script>
    </body>
</html>

نتیجه :

مثال

در این مثال، به جای یک فرم (Form)، دو فرم (Form) در صفحه خواهیم داشت، که هر کدام دارای تعدادی تگ input می باشند. اکنون قصد داریم که با استفاده از روش getElementsByTagName ، تنها فهرست تگ های input موجود در فرم (Form) دوم را به دست آورده و در خروجی صفحه، نام (name) آنها را نمایش دهیم (فهرست تگ های input از فرم (Form) اول را نمی خواهیم).

کد HTML مربوط به فرم ها (Form) :

کدهای JavaScript :

نکته مهم این است که ابتدا تگ form مربوط به فرم (Form) دوم را بر اساس نام id آن، انتخاب کرده ایم و بعد روش getElementsByTagName را بر روی آن اعمال کرده ایم تا تنها تگ های input موجود در آن را بیابیم :

اطلاعات مربوط به تگ های input فرم (Form) دوم، در متغیر inputs ذخیره شده است و در حلقه for ، با استفاده از عبارت زیر، به نام (name) هر یک از آنها، دسترسی خواهیم داشت :

کل کدهای صفحه HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>

<body>
        <h1>Form 1 :</h1>
        <form id="kelidestan_form_1" method="post" action="#">
            Data 1 : <br>
            <input type="text" name="field_1"><br>
            Data 2 : <br>
            <input type="text" name="field_2"><br>
            Data 3 : <br>
            <input type="text" name="field_3"><br>
            Data 4 : <br>
            <input type="text" name="field_4">
        </form>
        
        <br><br>
        
        <h1>Form 2 :</h1>
        <form id="kelidestan_form_2" method="post" action="#">
            Data 5 : <br>
            <input type="text" name="field_5"><br>
            Data 6 : <br>
            <input type="text" name="field_6"><br>
            Data 7 : <br>
            <input type="text" name="field_7"><br>
            Data 8 : <br>
            <input type="text" name="field_8">
        </form>
               
        <br><br>
               
        <p id="kelidestan">
            Fields - Name :
            <br><br>
        </p>
       
        <script>
            var form = document.getElementById('kelidestan_form_2');
            var inputs = form.getElementsByTagName('input');
            var paragraph = document.getElementById("kelidestan");
            var index;
            for (index = 0; index < inputs.length; ++index) {
                paragraph.innerHTML += inputs[index].name;
                paragraph.innerHTML += "<br>";
            }
        </script>
    </body>
</html>