HTML DOM Fieldset name property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Fieldset name property is used for getting or setting the name attribute value of a <fieldset> element. The name attribute helps in identifying the form data after the form has been submitted or for simply referencing the form elements.

Syntax

Following is the syntax for −

Setting the fieldset name property −

fieldsetObject.name = name

Here, name specifies the fieldset name.

Example

Let us look at an example for the Fieldset name property −

<!DOCTYPE html>
<html>
<head>
<script>
   function fieldName() {
      var field = document.getElementById("FieldSet1").name;
      document.getElementById("Sample").innerHTML = "The fieldset name is "+field;
   }
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form id="FORM1">
<fieldset id="FieldSet1" name="FS1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>
<br>
<button onclick="fieldName()">GET NAME</button>
<p id="Sample"></p>
</body>
</html>

Output

This will produce the following output −

On clicking the GET NAME button −

In the above example −

We have first created a fieldset with name “FS1” and id “FieldSet1” inside a form element −

<form id="FORM1">
<fieldset id="FieldSet1" name="FS1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>

We have then created a GET NAME button that will execute the fieldname() method on being clicked by the user −

<button onclick="fieldName()">GET NAME</button>

The fieldname() method gets the fieldset element using the getElementById() method. It then gets its name attribute value and assigns it to variable field. This value is then displayed in the paragraph with id “Sample” and assigns text to it using the innerHTML property −

function fieldName() {
   var field = document.getElementById("FieldSet1").name;
   document.getElementById("Sample").innerHTML = "The fieldset name is "+field;
}
raja
Published on 19-Aug-2019 10:45:43
Advertisements