locked
Name vs Id of input. Which is the best to use. RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    Here I have no issue instead just need clarification.

    HTML input fields have 2 attributes, name and id.

    I can use both of them to fulfill my requirements. I just need to know which is the best to use, either name or id with JQUERY and Javascript?

    It would be very beneficial for me if you clarify with an example. Because Every time I am going to use input I always think about that.

    Thanks

    Monday, April 13, 2020 7:45 AM

Answers

  • User-474980206 posted

    in html form elements, the name is the name used to post the data. the data is sent as a name value pair, name=value. names are allowed to be duplicated. to to look up elements by name, you get an array. the name attribute is only valid for form elements (input, select, textarea, button, form) and frames.

        const inputs = document.getElementsByTagName(tagName); // returns all matches

    on the other hand all DOM elements have an optional id attribute. ids are supported to be unique (though there is no enforcement). 

       const input = document.getElementById(theId); // always return first match

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 13, 2020 8:10 PM

All replies

  • User-18289217 posted

    As for Javascript you should use ID. Name is identifier sent to the server when the form is submitted. 

    Monday, April 13, 2020 8:03 AM
  • User-474980206 posted

    in html form elements, the name is the name used to post the data. the data is sent as a name value pair, name=value. names are allowed to be duplicated. to to look up elements by name, you get an array. the name attribute is only valid for form elements (input, select, textarea, button, form) and frames.

        const inputs = document.getElementsByTagName(tagName); // returns all matches

    on the other hand all DOM elements have an optional id attribute. ids are supported to be unique (though there is no enforcement). 

       const input = document.getElementById(theId); // always return first match

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 13, 2020 8:10 PM
  • User1535942433 posted

    Hi demoninside9,

    Accroding to your description,as far as I think,the name attribute is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different id attributes, but the same name.

    Besides,getElementsByName() returns a live query: every time you access an element in the array returned, or even just its length, the DOM will be queried again,getElementById performance is always better.I suggest you could always use id.

    More details,you could refer to below codes:

    Javascript:

     <script type="text/javascript">
            function Calculation() {
                var x1 = document.getElementById("Text1").value;
                alert(x1);
            }
            function Calculation2() {
                var x2 = document.getElementsByName("la");
                alert(x2[1].value);
            }
        </script>
    <div>
                <input id="Text1" type="text" name="la" value="1" />
                <input id="Text2" type="text" name="la" value="2"/>
                <input id="Button1" type="button" value="button" onclick="Calculation()" />
                <input id="Button2" type="button" value="button" onclick="Calculation2()"/>
            </div>

    Jquery:

     <script>
            $(function () {
                var x3 = $("input[id*=Text1]").val();
                alert(x3);
                $("input[name*=la]").each(function () {
                    alert(this.value);
                })
                
            })
        </script>
    
     <div>
                <input id="Text1" type="text" name="la" value="1" />
                <input id="Text2" type="text" name="la" value="2"/>
           </div>

    Best regards,

    Yijing Sun

    Tuesday, April 14, 2020 6:12 AM
  • User-857013053 posted

    as for javascript and jquery is best for the id because id is the uniquely identifier of the tag  and name is used for  the user is post their details on submission time 

    Tuesday, April 14, 2020 5:20 PM