Check dropdown value if within array using jQuery.inArray

Question

A page deals with an input field that changes behavior depending on the dropdown value.

<div class="form-group">
          <label for="exampleInputEmail2">Element Name</label>
          <select class="form-control" name="element_id" id="element_name">
            @foreach($elements as $element)
              <option value="{{ $element->element_id }}">{{ $element->element_name }}</option>
            @endforeach
          </select>
</div>
<div class="form-group">
          <label for="exampleInputName2">Element Value</label>
          <input type="text" class="form-control" id="element_value" name="value" placeholder="Add an Element Value">
</div>

A script I have is below:

 <script type="text/javascript">
    <?php
    echo "var javascript_array = ". $list . ";\n";
    ?>
    $("#element_name").on('change', function(){
      var id_input = $('#element_name').val();
      if(id_input == 2){
            $("#element_value").datepicker();
        }
      else if(jQuery.inArray(id_input, javascript_array)!='-1'){
            $("#element_value").datepicker('destroy');
                $( function() {
                      $("#element_value").autocomplete({
                        scroll: true,
                        autoFocus: true,
                        minLength: 3,
                        source: function( request, response ) {
                          $.ajax({
                            url: "/employees/public/admin_list/search",
                            dataType: "json",
                            data: {
                                searchText: request.term


              },
                        success: function( data ) {
                         response($.map(data, function(item) {
                              return {
                                  label: item.name,
                                  value: item.id
                              };
                          }));
                        }
                      });
                    },
                    select: function( event, ui) {
                      $(this).val(ui.item.label);
                      return false;
                    }
              } );
              } );
    }
  else {
      $('#element_value').datepicker('destroy');
    }
});
</script>

So basically, if the value of the dropdown is 2(Birthday), the field changes to datepicker (which works), unfortunately, the part where else if(jQuery.inArray(id_input, javascript_array)!='-1') doesn't seem to work, as it doesn't change the input to a search input. (If I hardcode it to else if((id_input == 1) || (id_input == 4) || (id_input == 5)) it always works, but this list ids will increase as users creates them in the future, so I have to store them in javascript_array and just search from there).

What am I missing?

the array shows as var javascript_array = [1,4,5];

generated from a controller as below:

$lists = Elements::select('element_id')->where('is_list', 1)->get();
          foreach ($lists as $r){
            $list_temp[] = $r->element_id;
          }
$list = json_encode($list_temp);

Can you tell us what javascript_array is?

CUGreen
– CUGreen

2016-12-20 10:48:22 +00:00
Commented Dec 20, 2016 at 10:48 — CUGreen
– CUGreen, Commented Dec 20, 2016 at 10:48
sorry. the update has been posted above.

Odinovsky
– Odinovsky

2016-12-20 10:49:58 +00:00
Commented Dec 20, 2016 at 10:49 — Odinovsky
– Odinovsky, Commented Dec 20, 2016 at 10:49
Change javascript_array)!='-1' to javascript_array)!=-1

CUGreen
– CUGreen

2016-12-20 10:51:29 +00:00
Commented Dec 20, 2016 at 10:51 — CUGreen
– CUGreen, Commented Dec 20, 2016 at 10:51
Didn't work, also tried > -1 to no avail

Odinovsky
– Odinovsky

2016-12-20 10:53:11 +00:00
Commented Dec 20, 2016 at 10:53 — Odinovsky
– Odinovsky, Commented Dec 20, 2016 at 10:53

BenG · Accepted Answer · 2016-12-20 10:56:46Z

2

the issue is jQuery.inArray must be passed the correct type.

$('#element_name').val() would set id_input as a string:-

var id_input = "4";
var javascript_array = [1,4,5]

var stringType = jQuery.inArray(id_input, javascript_array);

console.log(stringType); // -1

var intType = jQuery.inArray(parseInt(id_input), javascript_array);

console.log(intType); // 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

so you need to parseInt the dropdown value.

answered Dec 20, 2016 at 10:56

BenG

15.2k5 gold badges48 silver badges62 bronze badges

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

1 Comment

Odinovsky Over a year ago

This is the answer..thanks!! :) ..was always wondering if the type is incorrect

Rounin · Accepted Answer · 2016-12-20 10:54:13Z

1

an input field that changes behavior depending on the dropdown value.

If I have understood correctly, then you can achieve this in a single-line jQuery function:

$(document).ready(function(){

    $('select').change(function(){
    $('input').attr('type', $('option:selected').val());
    })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
<option value="text">Text Input</option>
<option value="button">Button Input</option>
<option value="date">Date Input</option>
<option value="checkbox">Checkbox Input</option>
<option value="radio">Radio Input</option>
</select>

<input type="text" />

answered Dec 20, 2016 at 10:54

Rounin

29.9k13 gold badges102 silver badges126 bronze badges

Collectives™ on Stack Overflow

Check dropdown value if within array using jQuery.inArray

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related