If / Else statement in JQuery

Question

How to modify this line into saying that if interview_schedule_id is empty; it stays hidden, and if its not empty; it shows.

$('.interview_schedule-div'+program_input.data('id')).removeClass('hide');

The rest of the script:

function getInterviewSchedule(element)
{
    var program_input = $(element);
    var intake_id = $("[name='intake_id']").val();
    var campus_id = $('[name="program[' + program_input.data('id') + '][campus_id]"]').val();
    var program_id = $('[name="program[' + program_input.data('id') + '][program_id]"]').val();

    if(program_id != '' && program_id != null){
        $.ajax({
          type: 'GET',
          url: '{{ route("campus_program.interview_schedule") }}',
          data: {
            intake_id: intake_id,
            campus_id: campus_id,
            program_id: program_id
          },
          success: function (data) {
            var select_data = [];

            $.each(data, function(i, object) {
              select_data.push({id:i, text:object});
            });
            $('.interview_schedule-div'+program_input.data('id')).removeClass('hide');
            $('[name="program[' + program_input.data('id') + '][interview_schedule_id]"').select2({
              data: select_data,
              placeholder: "Please Select",
              allowClear: true
            });
            $('[name="program[' + program_input.data('id') + '][interview_schedule_id]"]').val('').trigger('change');

            @if(!empty($intake_select))
            if (intake_id == {{ $intake_select }})
            {
                @for ($i = 0; $i < $form_setting['total_program']['show']; $i++)
                @if (!empty($student_program[$i]->interview_schedule_id))
                <?php $interview_schedule_id = $student_program[$i]->interview_schedule_id; ?>
                $('[name="program['+{{$i}}+'][interview_schedule_id]"]').val({{$interview_schedule_id}}).trigger('change');
                @else
                $('[name="program['+{{$i}}+'][interview_schedule_id]"]').val('').trigger('change');
                @endif
                @endfor
            }
            @endif
          }
        });
    }
}

and the HTML:

<div class="form-group interview_schedule-div{{$i}} hide">
      <label class="col-lg-2 control-label">{{ msg('lbl_interview_schedule') }}</label>
      <div class="col-lg-6">
          {!! Form::dropdown('program['.$i.'][interview_schedule_id]', ['' => ''], @$student_program[$i]->interview_schedule_id, [
            'data-id' => $i,
            'class' => 'select2-form program-input'
          ]) !!}
      </div>
</div>

Thanks,

Hi lemonid! I see that in your code you have mixed PHP, JS and JQuery code. What is the interview_schedule_id element you need to validate? the PHP variable or the HTML element with that ID? Also, what do you need to show / hide depending on this validation? Could you please clarify? Thanks! — nnimis
– nnimis, Commented Dec 11, 2019 at 5:23

Ivan86 · Accepted Answer · 2019-12-11 07:08:01Z

1

You can use jQuery methods show() and hide() like this:

let div = $('.interview_schedule-div' + program_input.data('id'));
div.children().length > 0 ? div.show() : div.hide();

Note: Both examples below have the same code. One example has the div with children elements and the other has an empty div. Also, the div class interview_schedule-div... is here written as interview_schedule-div1 so we can access it for testing.

Examples:

let div = $('.interview_schedule-div1');
div.children().length > 0 ? div.show() : div.hide();

.interview_schedule-div1 {
  padding: 20px;
  background-color: #09f;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group interview_schedule-div1 hide">
  <label class="col-lg-2 control-label">Schedule</label>
  <div class="col-lg-6"></div>
</div>

let div = $('.interview_schedule-div1');
div.children().length > 0 ? div.show() : div.hide();

.interview_schedule-div1 {
  padding: 20px;
  background-color: #09f;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group interview_schedule-div1 hide">
</div>

edited Dec 11, 2019 at 7:08

answered Dec 11, 2019 at 5:35

Ivan86

5,7182 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lemonid Over a year ago

Thanks for your help, much appreciated.

Ivan86 Over a year ago

@lemonid if an answer on this page solved your problem please consider marking it as accepted. Thanks!

Murali Nepalli · Accepted Answer · 2019-12-11 05:36:01Z

1

You can use jquery "toggleClass". If the second parameter of toggleClass method resolves to "truthy" then it adds the class "hide" otherwise it removes.

I am assuming "interview_schedule_id" is html element, if that's the case you can check it's existence with $('#interview_schedule_id').length,

$('.interview_schedule-div'+program_input.data('id').toggleClass("hide",$('#interview_schedule_id').length);

edited Dec 11, 2019 at 5:36

answered Dec 11, 2019 at 5:14

Murali Nepalli

1,61811 silver badges17 bronze badges

Collectives™ on Stack Overflow

If / Else statement in JQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related