Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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 “:radioselector. 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>
 
<head>
    <script src=
    </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>


Output:

All submitted form values without jQuery:

Unparsed:

fname=geeks&lname=forgeeks&gender=on&email=geeks%40gmail.com&dob=2022-02-18

Parsed:

fname: geeks
lname: forgeeks
gender: on
email: geeks@gmail.com
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: geeks@gmail.com
dob: 2022-02-18


Last Updated : 29 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads