irankhosravi
3 months ago

How to toggle div by clicking radio button?

Posted 3 months ago by irankhosravi

By default the both reagent_code should be hidden. By selecting the radio button, have to show the appropriate DIV (following its #id).

html

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="marketer" id="yes" onclick="marketer(1)" value="1">
  <label class="form-check-label" for="yes">Yes</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="marketer" id="no" onclick="marketer(0)" value="0">
  <label class="form-check-label" for="no">No</label>
</div>

footer

<script src="{{ asset('themes/js/jquery-3.3.1.slim.min.js') }}"></script>
<script src="{{ asset('themes/js/jquery.min.js') }}"></script>
<script src="{{ asset('themes/js/popper.min.js') }}"></script>
<script src="{{ asset('themes/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('themes/js/jquery.md.bootstrap.datetimepicker.js') }}"></script>
<script>
    $('#date').MdPersianDateTimePicker({
        targetTextSelector: '#birth_date',
    });
</script>
<script>
    $(document).on('change', '#province_id', function() {
        let province_id = $(this).val();
        let select = $('#city_id');

        $.ajax({
            type: 'get',
            url: '{{ route('findIDProvince') }}',
            data: {'id':province_id},
            success: function(data){
                select.html('');
                for (var i = 0; i < data.length; i++){
                    select.append('<option value="'+data[i].id+'">'+data[i].city_name+'</option>');
                }
            },
            error: function(){
                console.log('this is a error');
            },
        });
    }).trigger('change');

function marketer(x) {
  if (x == 0) {
    document.getElementById('reagent_code').adddClass='d-none';
  } else if (x == 1) {
    document.getElementById('reagent_code').adddClass='d-block';
    return;
  }
}

Please sign in or create an account to participate in this conversation.