Question 310725 in Html Question posted in
Some basic documentation can be found here.

Html – What is the most reliable way to get a form name in javascript?

Suppose I have the following HTML code:

<form id="myform" name="X" ... ><!-- the name is optional, may be undefined -->
    <input type="text" name="name" value=""... >
</form>

<script>
    let form = document.getElementById('myform');
    // form.name can be either the name of the form or an instance of Element here
</script>

What would be the most reliable and cross-browser compatible way of getting the name of the form or null if it is not set?

I did some tests on Safari, so far my solution is this:

<script>
    let form = document.getElementById('myform');
    if (typeof form.name === 'string') {
        // do the work
    }
</script>

But I have no idea if that’s going to work on other browsers.

Tags:

4

Answers


  1. 0

    name is just an attribute. So you can use:

     const form = document.getElementById('myform');
 console.log(form.getAttribute('name'));
    <form id="myform" name="X" ... ><!-- the name is optional, may be undefined -->
    <input type="text" name="name" value=""... >
</form>

    If the attribute exists, you will receive its value as a string, otherwise null.

    See the compatibility of getAttribute().

    Login or Signup to reply.
  2. 0

    getAttribute will reliably give you the attribute value, or null if the attribute isn’t present; it won’t be fooled by a form field with the name "name". Combine that with a truthiness check on the result and you’re good to go:

    const formName = form.getAttribute("name");
if (formName) {
    console.log(`Form's name is ${formName}, do the work`);
} else {
    console.log(`No form name found`);
}

    Example with various permutations:

    function checkForm(form) {
    const formName = form.getAttribute("name");
    if (formName) {
        console.log(`Form's name is ${formName}, do the work`);
    } else {
        console.log(`No form name found`);
    }
}

for (const btn of document.querySelectorAll("form input[type=button]")) {
    btn.addEventListener("click", function() {
        checkForm(this.form);
    });
}
    <form>
    <input type="text" name="name">
    <input type="button" value="1">
</form>
<form name="">
    <input type="text" name="name">
    <input type="button" value="2">
</form>
<form name="myform">
    <input type="text" name="name">
    <input type="button" value="3">
</form>

    This is very, very basic functionality, so I wouldn’t expect any trouble with older browsers, regardless of one’s definition of "older".

    Login or Signup to reply.
  3. 0

    Your current solution using typeof form.name === 'string' is a reasonable approach to check if the name attribute is a string, and it should work in most modern browsers, including older versions.

    However, if you want a more standardized and cross-browser approach, you can use the getAttribute method:

    let form = document.getElementById('myform');
let formName = form.getAttribute('name');

if (formName && typeof formName === 'string') {
    // do the work
}

    This ensures that you retrieve the value of the name attribute explicitly using getAttribute. The condition then checks if the attribute exists (formName) and if its type is a string.

    This approach should work consistently across various browsers and is a good practice for dealing with attributes that might not be set or have different data types.

    Login or Signup to reply.
  4. 0

    It is a very bad idea to give attribute name with ‘name’ as value.

    In standard HTML (since 1993), the form element’s name attribute usage is made to access any form element into the document.forms collection.

    Using a name as value [for attribute name] in any form children element will cause a syntax ambiguity and produce an obscurantist code.

    Prefer to do:

    let myForm = document.forms.my_form_name;

console.log('my_input_name element value is', myForm.my_input_name.value);
    <form name="my_form_name">
  <input type="text" name="my_input_name" value="zorro">
</form>

    Deliberately coding syntactic ambiguities seems more suicidal than funny to me…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search