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

0 0 1 minute read

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;"> 
    zambiatek 
</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;"> 
    zambiatek 
</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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!