Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 03 Mar, 2022
Improve Article
Save Article

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: Using 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: 

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!