El trabajo es seleccionar el elemento <form> del elemento <input> dado del formulario. Aquí se discuten algunas de las técnicas importantes. Vamos a utilizar JavaScript.
Acercarse:
- Primero seleccione el elemento <input> del formulario.
- Use una de las propiedades .form o el método .closest(‘form’) para obtener acceso al elemento de formulario principal.
Ejemplo 1: este ejemplo usa el enfoque discutido anteriormente y usa la propiedad .form.
<!DOCTYPE HTML>
<html>
<head>
<title>
Get access to the containing form of an input.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo usa el enfoque discutido anteriormente y usa el método .closest() .
<!DOCTYPE HTML>
<html>
<head>
<title>
Get access to the containing form of an input.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA