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 =
</ 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:
Example 2: This example uses the approach discussed above and using .closest() method.
html
</ 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: