CODEWITHSUNDEEP
javascriptjqueryhtml
Luke
Luke

Reputation: 623

jQuery HTML 5 require field if radio button checked

I have a form that has some radio buttons which I need some fields to be required if a radio button is checked.

I have the HTML5 required attribute on the radio button group which works fine but I want some text fields to be required if the corresponding radio button is checked.

I have written some JS which seems to have no effect, and doesn't seem to add the required attribute when the radio button is checked.

HTML:

    <!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <title>MooWoos Stall Booking</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
    <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!--build:css css/styles.min.css-->
        <link rel="stylesheet" href="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/style.css">
    <!--endbuild-->

</head>

<body>
<div class="container">
    <nav class="navbar navbar-toggleable-md navbar-light">
        <a class="logo"><img src="assets/logo_opt.png"></a>
    </nav>

    <hr>

    <div class="modal fade" id="redirect_page" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="form-horizontal">

                    <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3 bookingform">
            <h1>Stall Booking Form</h1>
            <p class="lead">
                Fill out the form to book and pay for your stall!
            </p>
            <form id="bookingForm">
                <div class="form-group">
                    <label for="name">Name: </label>
                    <input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
                </div>
                <div class="form-group">
                    <label for="address">Address: </label>
                    <textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
                </div>
                <div class="form-group">
                    <label for="phone">Telephone Number: </label>
                    <input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
                </div>
                <div class="form-group">
                    <label for="email">Email: </label>
                    <input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
                </div>
                <div class="form-group">
                    <label for="date">Which date would you like to book?: </label>
                    <p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
                    <p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
                </div>
                <div class="form-group">
                    <label>What type of stall do you require?</label>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
                        <label for="stallType-Preloved">Preloved</label>
                        <div class="reveal-if-active">
                            <label for="c-rail">Will you be bringing a clothes rail?: </label>
                            <input type="radio" name="c-rail" value="Yes" /> Yes
                            <input type="radio" name="c-rail" value="No" /> No
                        </div>
                    </div>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Craft" value="Craft">
                        <label for="stallType-Craft">Craft</label>
                        <div class="reveal-if-active">
                            <label for="craftName">What name do you use?</label>
                            <input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
                        </div>
                    </div>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Business" value="Business">
                        <label for="stallType-Business">Business</label>
                        <div class="reveal-if-active">
                            <label for="bizName">What is your business name?</label>
                            <input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
                            <label for="insurance">Do you have Public Liability Insurance?</label>
                            <input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
                            <input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
                        </div>
                    </div>
                </div>
                <input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
            </form>

        </div>

    </div>

    <hr>

    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright &copy; MooWoos 2018. Booking Form by Luke Brewerton</p>
            </div>
        </div>

    </footer>

</div>

<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

</body>
</html>

main.js JS file:

    var $form = $('form#bookingForm'),
    url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'

$('#stallType-Business').change(function () {
    if(this.checked) {
        $('#bizName').attr('required');
    } else {
        $('#bizName').removeAttr('required');
    }
});

$('#submit-form').on('click', function(e) {
    var valid = this.form.checkValidity();
    if (valid) {
        e.preventDefault();
        var jqxhr = $.ajax({
            url: url,
            method: "GET",
            dataType: "json",
            data: $form.serializeObject(),
            success: function () {
                $('#redirect_page').modal('show');
                window.setTimeout(function () {
                    location.reload()
                }, 3000);
            }
        });
    }
});

Upvotes: 1

Views: 1489

Answers (3)

KungWaz
KungWaz

Reputation: 1956

You can do it like this, where you disable all inputs and then only activate the one that is selected. It requires that you have the "disabled" prop added to all child inputs at the start. I also added the ID's for the c-rail inputs.

Note that the check you do does not trigger when you select another radio button, that is why should disable the others when a new one is selected.

$('#stallType-Business').change(function () {
    if(this.checked) {
        disableAll();

It is the disableAll() function that does the trick here.

function disableAll() {
	$('#c-rail-yes').attr('required', false).attr('disabled', true);
  $('#c-rail-no').attr('required', false).attr('disabled', true);
  $('#craftName').attr('required', false).attr('disabled', true);
  $('#bizName').attr('required', false).attr('disabled', true);
}

$('#stallType-Preloved').change(function () {
    if(this.checked) {
    		disableAll();
        $('#c-rail-yes').attr('required', true).attr('disabled', false);
        $('#c-rail-no').attr('required', true).attr('disabled', false);
    }
});

$('#stallType-Craft').change(function () {
    if(this.checked) {
    		disableAll();
        $('#craftName').attr('required', true).attr('disabled', false);
    }
});

$('#stallType-Business').change(function () {
    if(this.checked) {
    		disableAll();
        $('#bizName').attr('required', true).attr('disabled', false);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="bookingForm">
    <div class="form-group">
        <label>What type of stall do you require?</label>
        <div>
            <input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
            <label for="stallType-Preloved">Preloved</label>
                <div class="reveal-if-active">
                <label for="c-rail">Will you be bringing a clothes rail?: </label>
                <input id="c-rail-yes" type="radio" name="c-rail" value="Yes" disabled /> Yes
                <input id="c-rail-no" type="radio" name="c-rail" value="No" disabled /> No
            </div>
        </div>
        <div>
            <input type="radio" name="stallType" id="stallType-Craft" value="Craft">
            <label for="stallType-Craft">Craft</label>
            <div class="reveal-if-active">
                <label for="craftName">What name do you use?</label>
                <input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" disabled />
            </div>
        </div>
        <div>
            <input type="radio" name="stallType" id="stallType-Business" value="Business">
            <label for="stallType-Business">Business</label>
            <div class="reveal-if-active">
                <label for="bizName">What is your business name?</label>
                <input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" disabled />
            </div>
        </div>
    </div>
</form>

Upvotes: 1

Luis felipe De jesus Munoz
Luis felipe De jesus Munoz

Reputation: 7923

Another way to do it is using this function:

$('.input-radio').change(function () {
    $('div.reveal-if-active').children('input').removeAttr('required');
    $(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});

and adding class="input-radio" to those input that you want to do the job.

    var $form = $('form#bookingForm'),
    url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'

$('.input-radio').change(function () {
    $('div.reveal-if-active').children('input').removeAttr('required');
    $(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});

$('#submit-form').on('click', function(e) {
    var valid = this.form.checkValidity();
    if (valid) {
        e.preventDefault();
        var jqxhr = $.ajax({
            url: url,
            method: "GET",
            dataType: "json",
            data: $form.serializeObject(),
            success: function () {
                $('#redirect_page').modal('show');
                window.setTimeout(function () {
                    location.reload()
                }, 3000);
            }
        });
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <nav class="navbar navbar-toggleable-md navbar-light">
        <a class="logo"><img src="assets/logo_opt.png"></a>
    </nav>

    <hr>

    <div class="modal fade" id="redirect_page" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="form-horizontal">

                    <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3 bookingform">
            <h1>Stall Booking Form</h1>
            <p class="lead">
                Fill out the form to book and pay for your stall!
            </p>
            <form id="bookingForm">
                <div class="form-group">
                    <label for="name">Name: </label>
                    <input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
                </div>
                <div class="form-group">
                    <label for="address">Address: </label>
                    <textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
                </div>
                <div class="form-group">
                    <label for="phone">Telephone Number: </label>
                    <input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
                </div>
                <div class="form-group">
                    <label for="email">Email: </label>
                    <input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
                </div>
                <div class="form-group">
                    <label for="date">Which date would you like to book?: </label>
                    <p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
                    <p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
                </div>
                <div class="form-group">
                    <label>What type of stall do you require?</label>
                    <div>
                        <input class="input-radio" type="radio" name="stallType" id="stallType-Preloved" value="Preloved" />
                        <label for="stallType-Preloved">Preloved</label>
                        <div class="reveal-if-active">
                            <label for="c-rail">Will you be bringing a clothes rail?: </label>
                            <input type="radio" name="c-rail" value="Yes" /> Yes
                            <input type="radio" name="c-rail" value="No" /> No
                        </div>
                    </div>
                    <div>
                        <input class="input-radio" type="radio" name="stallType" id="stallType-Craft" value="Craft">
                        <label for="stallType-Craft">Craft</label>
                        <div class="reveal-if-active">
                            <label for="craftName">What name do you use?</label>
                            <input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
                        </div>
                    </div>
                    <div>
                        <input type="radio" class="input-radio" name="stallType" id="stallType-Business" value="Business">
                        <label for="stallType-Business">Business</label>
                        <div class="reveal-if-active">
                            <label for="bizName">What is your business name?</label>
                            <input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
                            <label for="insurance">Do you have Public Liability Insurance?</label>
                            <input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
                            <input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
                        </div>
                    </div>
                </div>
                <input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
            </form>

        </div>

    </div>

    <hr>

    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright &copy; MooWoos 2018. Booking Form by Luke Brewerton</p>
            </div>
        </div>

    </footer>

</div>

Upvotes: 0

suchislife
suchislife

Reputation: 1

Take a look at JQuery's .prop() method...

.prop()

...and a look at this example from...

How to require fields if a certain radio button is checked?

<body>
    <form action="" method="post">
        <label for="required_later">Required if Option2 selected</label>
        <input type="text" name="text_input_field" id="required_later" disabled><br>

        <input type="radio" id="option1" name="radio_options" value="option1">
        <label for="option1">Option1</label><br>

        <input type="radio" id="option2" name="radio_options" value="option2">
        <label for="option2">Option2</label><br>
        <input type="submit" name="submit" value="Submit">
    </form>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $("#option1").click(function() {
            $("#required_later").prop("required", false);
            $("#required_later").prop("disabled", true);
        });
        $("#option2").click(function() {
            $("#required_later").prop("required", true);
            $("#required_later").prop("disabled", false);
            $("#required_later").focus();
        });
    </script>
</body>

Upvotes: 2

Related Questions