How to get access to the containing form of an input?

The job is to select the <form> element from the given <input> element of the form. Here few of the important techniques are discussed. We are going to use JavaScript. 

Approach:

• First select the <input> element of the form.
• Use one of the .form property or .closest(‘form’) method to get access to the parent form element.

Example 1: This example uses the approach discussed above and uses .form property.

html

<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<h1 style="color:green;">
    GeeksforGeeks
</h1>
<p id="GFG_UP"></p>
<form id="formElement">
    Input_1:
    <input id="input1" type="text" />
    <br>
    <input type="checkbox" name="input_2">
    Input_2
</form>
<br>
<button onclick="GFG_Fun()">
    click here
</button>
<p id="GFG_DOWN"></p>
<script>
    var el_up = document.getElementById('GFG_UP');
    var el_down = document.getElementById('GFG_DOWN');
    var input = document.getElementById('input1');
    el_up.innerHTML = "Click on the button to select the " +
                    "form element from the input element.";

    function GFG_Fun() {
        var form = input.form;
        el_down.innerHTML =
        "Id of form is '" + $(form).attr("id") + "'";
    }
</script>

Output:

Get access to the containing form of an input

Example 2: This example uses the approach discussed above and using .closest() method. 

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<h1 style="color:green;">
    GeeksforGeeks
</h1>
<p id="GFG_UP"></p>
<form id="formElement">
    Input_1:
    <input id="input1" type="text" />
    <br>
    <input type="checkbox" name="input_2">
    Input_2
</form>
<br>
<button onclick="GFG_Fun()">
    click here
</button>
<p id="GFG_DOWN"></p>
<script>
    var el_up = document.getElementById('GFG_UP');
    var el_down = document.getElementById('GFG_DOWN');
    var input = document.getElementById('input1');
    el_up.innerHTML = "Click on the button to select the "+
                    "form element from the input element.";

    function GFG_Fun() {
        var form = $(input).closest('form');
        el_down.innerHTML =
        "Id of form is '" + $(form).attr("id") + "'";
    }
</script>

Output:

Get access to the containing form of an input