Javascript getElementsByName() method in hindi

Contents

Introduction

हेलो दोस्तों आज हम इस post में getElementsByName() method के बारे में detail से example के साथ जानेगे!.
getElementsByName() method का इस्तेमाल करके DOM elements को कैसे get और उसपे action perform करा सकते है वह हम इस post में समझेंगे!.

Document.getElementsByName() method

getElementsByName() method name attribute से particular document के सभी elements का collection return करता है!. और collection को node list कहा जाता है और node list के हरेक element को उसके index की सहायता से देखा जा सकता है!. Document object की getElementsByName() method document में दिये गए name attribute वाले सभी elements का collection return करता है!.

syntax:

getElementsByName(name)

paremeters:

Document elements के name attribute को parameter की तोर पर accepts करता है!.

return Type:

यह method getElementsByName(name) में दिए गई name attribute के साथ मेल होने वाले सभी elements का collection return करता है!.

getElementsByName() एक name accepts करता है जो elements में name attribute का valaue है!. और elements के name attribute के value से मेल होने वाले elements का Nodelists देता है!.

HTML document में हरेक element में कुछ इस तरह name attribute होता है!.

<input type="radio" name="language" value="Javascript">

HTML में name attribute के सामान value को कुछ इस तरह लिख सकते है!.

<input type="radio" name="language" value="Javascript">
<input type="radio" name="language" value="java">
<input type="radio" name="language" value="php">

HTML में specified name वाले सभी elements को get करने के लिए हम document object के getElementsByName() method का इस्तेमाल करते है!.

let element = document.getElementsByName(name)

Example:

HTML code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript getElementsByName example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Select on technology:</h2>
        <form action="#" method="POST">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="technology" id="flexRadioDefault1" value="HTML">
              <label class="form-check-label" for="technology1">
               HTML
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="technology" id="flexRadioDefault2" value="CSS">
              <label class="form-check-label" for="technology2">
                CSS
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="technology" id="flexRadioDefault3" value="Javascript" >
              <label class="form-check-label" for="technology3">
                Javascript
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="technology" id="flexRadioDefault4" value="Jquery">
              <label class="form-check-label" for="technology4">
                Jquery
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="technology" id="flexRadioDefault5" value="PHP">
              <label class="form-check-label" for="technology5">
                PHP
              </label>
            </div> 
            <div class="form-check">
              <input class="form-check-input" type="submit" name="technology" id="submt_btn" value="Submit">
            </div>      
        </form>
        <div id="result"></div>
    </div>    
</body>
</html>

Javascript code

<script>
        let submit_btn = document.getElementById('submt_btn');
        let result = document.getElementById('result');

        submit_btn.addEventListener('click', (e) => {
            e.preventDefault();
            let technology = document.getElementsByName('technology');
            technology.forEach((tech) => {
                console.log(tech);
                if (tech.checked) {
                    result.innerText = `You selected value is:${tech.value}`;
                }
            });
        });
    </script>

Full source code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript getElementsByName example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Select on technology:</h2>
        <form action="#" method="POST">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="technology" id="flexRadioDefault1" value="HTML">
              <label class="form-check-label" for="technology1">
               HTML
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="technology" id="flexRadioDefault2" value="CSS">
              <label class="form-check-label" for="technology2">
                CSS
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="technology" id="flexRadioDefault3" value="Javascript" >
              <label class="form-check-label" for="technology3">
                Javascript
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="technology" id="flexRadioDefault4" value="Jquery">
              <label class="form-check-label" for="technology4">
                Jquery
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="technology" id="flexRadioDefault5" value="PHP">
              <label class="form-check-label" for="technology5">
                PHP
              </label>
            </div> 
            <div class="form-check">
              <input class="form-check-input" type="submit" name="technology" id="submt_btn" value="Submit">
            </div>      
        </form>
        <div id="result"></div>
    </div>
    <script>
        let submit_btn = document.getElementById('submt_btn');
        let result = document.getElementById('result');

        submit_btn.addEventListener('click', (e) => {
            e.preventDefault();
            let technology = document.getElementsByName('technology');
            console.log(technology);
            technology.forEach((tech) => {
                //console.log(tech);
                if (tech.checked) {
                    result.innerText = `You selected value is:${tech.value}`;
                }
            });
        });
    </script>
</body>
</html>

Output: