Redirect to a link after selecting a checkbox and a 'Next' button

Question

I need to redirect users to a page (multiple options) after they select a checkbox and only after clicking the 'next' button. Here is my code with three checkboxes (sorry i can't add picture yet:

          <form class="q2" action="">
                <div class="form-group radios">
                    <label for="1">
                    <input type="radio" name="physio" id="1"><span class="checkmark"></span>
                        Mark
                    </label> 
                </div> 
                <div class="form-group radios">
                    <label for="2">
                    <input type="radio" name="physio" id="2"><span class="checkmark"></span>
                        John
                    </label>
                </div>
                <div class="form-group radios">
                    <label for="3">
                    <input type="radio" name="physio" id="3"><span class="checkmark"></span>
                        Jack 
                    </label>
                </div>
            </form>

                <a href="poids-ideal-chat.html">
                    <div class="button-icon next cta src">
                        <p>
                            Next 
                        </p>
                    </div>
                </a>

thank you for helping people

Answer 1

To achieve this, you can use javascript. The ideal process flow should be like this:

1. Listen for the click of the Next button.
2. When clicked, check if the radio element has been selected.
3. If there is a selected element, continue redirect.
4. If not prevent redirect

I've included a demo of this in a jsfiddle, check it out

<form class="q2" action="">
    <div class="form-group radios">
        <label for="1">
            <input type="radio" name="physio" id="1" value="1">
            <span class="checkmark"></span>
             Mark
        </label> 
    </div> 
    <div class="form-group radios">
        <label for="2">
            <input type="radio" name="physio" id="2" value="2">
            <span class="checkmark"></span>
            John
        </label>
    </div>
    <div class="form-group radios">
        <label for="3">
            <input type="radio" name="physio" id="3" value="3">
            <span class="checkmark"></span>
            Jack 
        </label>
    </div>
</form>

<a href="poids-ideal-chat.html" id="nextClick">
    <div class="button-icon next cta src">
        <p>
            Next 
        </p>
    </div>
</a>

<script>
    document.getElementById('nextClick').addEventListener('click', function(event) {

    // Get all the radio 'physio' elements
    var radios = document.getElementsByName('physio');

    // Loop through each element
    for (var i = 0, length = radios.length; i < length; i++) {
        // Check if the current element is selected
        if (radios[i].checked) {
            var selected_value = radios[i].value; // Value of checked element
            // Exit event handler and redirect the page if a radio element is selected
            return;
        }
    }
    // If no item was selected prevent the page redirect
    event.preventDefault();
});
</script>