<html data-namespace-typo3-fluid="true">
<div class="searchForm">
    <div class="row row-1">
        <div class="col">
            <form class="form-inline">
                <div class="form-group">
                    <input id="tx_myttaddressmap_lat" type="hidden" value="50"/>
                    <input id="tx_myttaddressmap_lon" type="hidden" value="11"/>
                    <input id="tx_myttaddressmap_language" type="hidden" value="{L}"/>
                    <select name="tx_myttaddressmap_searchresult[country]"
                            placeholder=' <f:translate key="country"/>'
                            id="tx_myttaddressmap_country"
                            onchange="$('#tx_myttaddressmap_page').val('0');geocodeByClient();"
                            class="selectpicker form-control countryPicker hidden">
                        <option value="">Land</option>
                        <option value="DE">DE</option>
                        <option value="AT">AT</option>
                    </select>


                    <div class="input-group">
                        <!-- Input -->

                        <input type="text" id="tx_myttaddressmap_city" class="form-control"

                               required="required"
                               placeholder="Ort"
                               value="{GP.location}"
                               name="tx_myttaddressmap_searchresult[location]"
                               onchange="$('#tx_myttaddressmap_lat').val(0);$('#tx_myttaddressmap_lon').val('');$('#tx_myttaddressmap_page').val('0');">


                        <div class="input-group-btn">
                            <!-- Btn group right -->
                            <button type="submit" class="btn btn-default" name="submit"
                                    value="<f:translate key='search'/>"
                                    alt="<f:translate key='search'/>" id="ajaxSearchButton">
                                <f:translate key='search'/>
                            </button>
                        </div>
                    </div>

                    <div class="form-inline rangeselector">
                        Radius:
                        <label for="range_1" class="checkbox-inline">
                            <input value="50" id="range_1"
                                   name="tx_myttaddressmap_searchresult[radius]"
                                   type="radio">
                            50 km
                        </label>
                        <label for="range_2" class="checkbox-inline ">
                            <input value="100"  id="range_2"
                                   name="tx_myttaddressmap_searchresult[radius]"

                                   type="radio">
                            100 km
                        </label>
                        <label for="range_3" class="checkbox-inline">
                            <input value="200" id="range_3"
                                   name="tx_myttaddressmap_searchresult[radius]"
                                   type="radio">
                            200 km
                        </label>
                        <label for="range_4" class="checkbox-inline">
                            <input value="500" id="range_4"
                                   name="tx_myttaddressmap_searchresult[radius]"
                                   type="radio">
                            500 km
                        </label>
                        <label for="range_5" class="checkbox-inline active">
                            <input value="2000" id="range_5" checked="checked"
                                   name="tx_myttaddressmap_searchresult[radius]"
                                   type="radio">
                            Alle
                        </label>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(() => {
    $("input[type='radio'][name='tx_myttaddressmap_searchresult[radius]']").on("change",function(){
        $('label.active').removeClass('active');
        if($(this).is(':checked')){
            $(this).parent().addClass('active')

        }
    });
})
</script>
