Dado un formulario HTML con elementos de formulario que incluyen algunos valores de botones de opción, la tarea es excluir estos valores para que no se envíen mediante jQuery. Hay un enfoque principal que se puede seguir.
Enfoque: usar esta propiedad y los métodos de envío() , find() y prop() en jQuery. Aplicamos el método de envío() al formulario, lo que significa que el script dentro del método de envío() se ejecuta cada vez que se envía el formulario. Usamos esta propiedad en forma de un objeto jQuery para referirnos al objeto actual. Después de eso, el método find() se usa para seleccionar todos los descendientes del formulario que coincidan con el selector especificado en el parámetro de string del método.
Seleccionamos todos los botones de radio usando el selector “:radio ” . Por último, deshabilitamos todos estos botones de radio haciendo uso del método prop() y pasándole dos parámetros. El primer parámetro especifica la propiedad deshabilitada para establecer. El segundo parámetro establece el valor de la propiedad que es verdadera ya que queremos que los botones de opción estén deshabilitados. Al enviar el formulario, deshabilite todos los botones de radio asociados con el formulario para que no se puedan enviar.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
input[type="submit"] {
cursor: pointer;
}
form {
width: 300px;
margin: 0 auto;
}
.submitted-details {
margin-top: 2rem;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<strong>
jQuery - Exclude HTML form radio
button values from being submitted
</strong>
<br>
<form>
<fieldset>
<legend>Details</legend>
<label for="first_name">First name:</label>
<input type="text" id="first-name" name="fname" />
<br><br>
<label for="last_name">Last name:</label>
<input type="text" id="last-name" name="lname" />
<br><br>
<label for="gender">Gender : </label>
<input type="radio" name="gender" /> Male
<input type="radio" name="gender" /> Female
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" />
<br><br>
<input type="submit" value="Submit"
class="submit-btn" />
</fieldset>
</form>
<script type="text/javascript">
$("form").submit(function (event) {
$(this).find(":radio").prop("disabled", true);
});
</script>
</body>
</html>
Producción:
Todos los valores de formulario enviados sin jQuery:
-
sin analizar:
fname=geeks&lname=forgeeks&gender=on&email=geeks%40gmail.com&dob=2022-02-18
-
analizado:
fname: geeks lname: forgeeks gender: on email: geeks@gmail.com dob: 2022-02-18
Todos los valores de formulario enviados con jQuery:
-
sin analizar:
fname=geeks&lname=forgeeks&email=geeks%40gmail.com&dob=2022-02-18
-
analizado:
fname: geeks lname: forgeeks email: geeks@gmail.com dob: 2022-02-18
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA