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 using the approach discussed above and using .form property.
<!DOCTYPE HTML> < html > < head > < title > Get access to the containing form of an input. </ title > < script src = </ script > </ head > < body id = "body" align = "center" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;" > </ 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" style = "font-size: 24px; font-weight: bold; color:green;" > </ 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 > </ body > </ html > |
chevron_right
filter_none
Output:
Example 2: This example using the approach discussed above and using .closest() method.
<!DOCTYPE HTML> < html > < head > < title > Get access to the containing form of an input. </ title > < script src = </ script > </ head > < body id = "body" align = "center" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;" > </ 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" style = "font-size: 24px; font-weight: bold; color:green;" > </ 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 > </ body > </ html > |
chevron_right
filter_none
Output: