بستن منو
۸۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با JavaScript
مباحث اولیه برای آشنایی با JavaScript
10
متغیرها (Variables)، در JavaScript
متغیرها (Variables)، در JavaScript
4
رشته ها (متن ها - Strings)، در JavaScript
رشته ها (متن ها - Strings)، در JavaScript
14
نمایش پیام، در JavaScript
نمایش پیام، در JavaScript
3
توابع (Function)، در JavaScript
توابع (Function)، در JavaScript
1
حلقه ها (Loop)، در JavaScript
حلقه ها (Loop)، در JavaScript
4
آرایه ها (Arrays)، در JavaScript
آرایه ها (Arrays)، در JavaScript
5
اشاره به عنصرهای صفحه، در JavaScript
اشاره به عنصرهای صفحه، در JavaScript
1
عملیات های ریاضی، در JavaScript
عملیات های ریاضی، در JavaScript
9
تاریخ و زمان، در JavaScript
تاریخ و زمان، در JavaScript
10
زمان بندی اجرای کدها، در JavaScript
زمان بندی اجرای کدها، در JavaScript
2
افزودن و یا حذف محتوا و کد، به صفحه، در JavaScript
افزودن و یا حذف محتوا و کد، به صفحه، در JavaScript
1
فرم ها (Form)، در JavaScript
فرم ها (Form)، در JavaScript
5
کار با عکس ها، در JavaScript
کار با عکس ها، در JavaScript
1
دکمه ها (Button)، در JavaScript
دکمه ها (Button)، در JavaScript
2
لینک ها (Link)، در JavaScript
لینک ها (Link)، در JavaScript
1
کلیک کردن (Click)، در JavaScript
کلیک کردن (Click)، در JavaScript
1
کار با کل صفحه، در JavaScript
کار با کل صفحه، در JavaScript
4
تکنیک Ajax ، در JavaScript
تکنیک Ajax ، در JavaScript
4
ساختار JSON ، در JavaScript
ساختار JSON ، در JavaScript
0
مباحث عمومی، در JavaScript
مباحث عمومی، در JavaScript
3

×

دانلود فروشگاه اندروید کلیدستان

26626

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

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

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

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


var inputs = document.getElementsByTagName('input');

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

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

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

نکته

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


var form = document.getElementById('kelidestan_form');
var inputs = form.getElementsByTagName('input');

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

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

مثال

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

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


<form 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>

کدهای JavaScript :


<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>";
    }
</script>

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


inputs[index].name

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


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

    <body>
        <form 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>
               
        <p id="kelidestan">
            Fields - Name :
            <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>";
            }
        </script>
    </body>
</html>

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال

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

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


<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>

کدهای JavaScript :


<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>

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


inputs[index].name

inputs[index].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) :


<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>

کدهای JavaScript :


<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>

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


var form = document.getElementById('kelidestan_form_2');
var inputs = form.getElementsByTagName('input');

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


inputs[index].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>

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

کپی برداری از محتوای سایت کلیدستان، ممنوع بوده و پیگرد قانونی دارد. (تنها استفاده شخصی کاربر، مجاز است) (کپی برداری توسط سایر وب سایت ها = حرام) (بیشتر بدانید)

خوانده شد
جستجو در عنوان کلیدها :
جستجو توسط گوگل :
پرسیدن سوال :
ارسال نظر :
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو
بستن منو
۱۹۰
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorials - از thenewboston.com
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorials - از thenewboston.com
40
مجموعه ویدئوهای آموزشی AJAX - مجموعه AJAX Tutorials - از thenewboston.com
مجموعه ویدئوهای آموزشی AJAX - مجموعه AJAX Tutorials - از thenewboston.com
23
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorial
مجموعه ویدئوهای آموزشی JavaScript - مجموعه JavaScript Tutorial
75
مجموعه ویدئوهای آموزشی JavaScript - مجموعه Learn JavaScript
مجموعه ویدئوهای آموزشی JavaScript - مجموعه Learn JavaScript
19
مجموعه ویدئوهای آموزشی JavaScript برای مبتدیان - مجموعه JavaScript beginner tutorials
مجموعه ویدئوهای آموزشی JavaScript برای مبتدیان - مجموعه JavaScript beginner tutorials
33
بستن منو
۴۰
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با برنامه نویسی jQuery
مباحث اولیه برای آشنایی با برنامه نویسی jQuery
10
اشاره به عنصرهای صفحه، در jQuery
اشاره به عنصرهای صفحه، در jQuery
2
رویدادها (Event)، در jQuery
رویدادها (Event)، در jQuery
6
تغییر محتوای صفحه، در jQuery
تغییر محتوای صفحه، در jQuery
8
فرم ها (Form)، در jQuery
فرم ها (Form)، در jQuery
2
دکمه ها (Button)، در jQuery
دکمه ها (Button)، در jQuery
1
اندازه عنصرها و بخش های صفحه، در jQuery
اندازه عنصرها و بخش های صفحه، در jQuery
6
کلیک کردن (Click)، در jQuery
کلیک کردن (Click)، در jQuery
0
کار با کل صفحه، در jQuery
کار با کل صفحه، در jQuery
1
تکنیک AJAX ، در jQuery
تکنیک AJAX ، در jQuery
2
مباحث عمومی، در jQuery
مباحث عمومی، در jQuery
2
بستن منو
۴
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

مباحث اولیه برای آشنایی با JSON
مباحث اولیه برای آشنایی با JSON
مباحث اولیه برای آشنایی با JSON
4
دسته کلیدهایی از موضوع های دیگر
ساختار JSON ، در PHP
ساختار JSON ، در PHP
2
بستن منو
۸۰
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
نمایش متن، در HTML
5
نمایش عکس، در HTML
نمایش عکس، در HTML
6
لینک ها (Link)، در HTML
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
فرم ها (Form)، در HTML
18
تعیین مشخصات کلی صفحه، در HTML
تعیین مشخصات کلی صفحه، در HTML
5
عناصر گرافیکی، در HTML
عناصر گرافیکی، در HTML
1
رنگ ها (Color) و تعیین رنگ، در HTML
رنگ ها (Color) و تعیین رنگ، در HTML
1
دکمه ها (Button)، در HTML
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
کار با کیبورد (Keyboard)، در HTML
2
مباحث عمومی، در HTML
مباحث عمومی، در HTML
11