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:

Output

All 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

How to get the value of radio button using AngularJS ?

rajatsandhu2001

Improve

Article Tags :

How to exclude HTML form radio button values from being submitted using jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?