How to exclude HTML form radio button values from being submitted using jQuery ?
Last Updated :
02 Aug, 2024
Given an HTML form with form elements including some radio button values, the task is to exclude these values from being submitted using jQuery. There is one main approach that can be followed.
Approach: Use this property and submit(), find(), and prop() methods in jQuery. We apply the submit() method to the form which means that the script inside the submit() method is executed whenever the form is submitted. We use this property in the form of a jQuery object to refer to the current object. After that, the find() method is used to select all descendants of the form matching the specified selector in the string parameter of the method.
We select all the radio buttons using the ":radio" selector. Lastly, we disable all these radio buttons by making use of the prop() method and passing two parameters to it. The first parameter specifies the disabled property to set. The second parameter sets the value of the property which is true since we want the radio buttons to be disabled. On submitting the form, disable all the radio buttons associated with the form such that they are excluded from being submitted.
Example: In this example, we will use the above approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exclude HTML Form Radio Button Values Using jQuery</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f2f5;
font-family: 'Arial', sans-serif;
}
.container {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 100%;
box-sizing: border-box;
}
h1 {
color: #28a745;
font-size: 2rem;
margin-bottom: 20px;
font-weight: 600;
}
.form-group {
margin-bottom: 15px;
}
.form-control {
border-radius: 5px;
}
.submit-btn {
background-color: #28a745;
border: none;
color: #fff;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
width: 100%;
font-size: 1rem;
font-weight: 600;
}
.submit-btn:hover {
background-color: #218838;
}
fieldset {
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
}
legend {
padding: 0 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<strong>
Exclude HTML form radio button values
from being submitted using jQuery
</strong>
<form>
<fieldset>
<legend>Details</legend>
<div class="form-group">
<label for="first-name">First name:</label>
<input type="text"
id="first-name"
name="fname" class="form-control">
</div>
<div class="form-group">
<label for="last-name">Last name:</label>
<input type="text"
id="last-name"
name="lname" class="form-control">
</div>
<div class="form-group">
<label for="gender">Gender:</label><br>
<div class="form-check form-check-inline">
<input type="radio"
name="gender"
class="form-check-input">
<label class="form-check-label">Male</label>
</div>
<div class="form-check form-check-inline">
<input type="radio"
name="gender"
class="form-check-input">
<label class="form-check-label">Female</label>
</div>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email"
id="email"
name="email"
class="form-control">
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="date"
id="dob"
name="dob"
class="form-control">
</div>
<button type="submit"
class="submit-btn">Submit</button>
</fieldset>
</form>
</div>
<script>
$("form").submit(function (event) {
$(this).find(":radio").prop("disabled", true);
});
</script>
</body>
</html>
Output:
OutputAll submitted form values without jQuery:
Unparsed:
fname=geeks&lname=forgeeks&gender=on&email=geeks%40gmail.com&dob=20229-06-11
Parsed:
fname: geeks
lname: forgeeks
gender: on
email: [email protected]
dob: 2022-02-18
All submitted form values with jQuery:
Unparsed:
fname=geeks&lname=forgeeks&email=geeks%40gmail.com&dob=2022-02-18
Parsed:
fname: geeks
lname: forgeeks
email: [email protected]
dob: 2022-02-18
Similar Reads
How to disable form submit on enter button using jQuery ? There are two methods to submit a form, Using the "enter" key: When the user press the "enter" key from the keyboard then the form submit. This method works only when one (or more) of the elements in the concerned form have focus. Using the "mouse click": The user clicks on the "submit" form button.
2 min read
How to stop a form submit action using jQuery ? In this article, we will learn how to stop a form submit action using jQuery. By default, the HTML form submits automatically. Submitting automatically leads to reloading the whole page again and again. Therefore for performing any operation, we have to prevent its default submission. Given a form,
3 min read
How to Prevent Buttons from Submitting Forms in HTML? We will use different approaches for preventing buttons from submitting forms. There are several reasons where preventing the buttons from submitting forms, i.e., if the user hasn't completed all the required form fields, or added incorrect details in the form, etc. Below are the approaches to preve
3 min read
How to add Radio Buttons in form using HTML ? In this article, we will learn how to add Radio Buttons in form using HTML. We know that Radio Buttons are used to select only one option out of several options. It is generally used in HTML form. If we want to deselect any option we have to select another option in the case of a radio button. Appro
1 min read
How to get value of selected radio button using JavaScript ? To get the value of the selected radio button, a user-defined function can be created that gets all the radio buttons with the name attribute and finds the radio button selected using the checked property. The checked property returns True if the radio button is selected and False otherwise. If ther
2 min read
How to disable or enable form submit button in jQuery? Enabling or disabling the form submit button based on a checkbox selection in jQuery. This ensures user compliance with terms and conditions before form submission. Syntax:$('#enabled').click(function () { if ($('#submit-button').is(':disabled')) { $('#submit-button').removeAttr('disabled'); } else
2 min read