jQuery not showing fields if specific value selected in dropdown

Question

I'm using cakePHP and trying to learn how to use jQuery to show an input field if a specific value in the first dropdown list is selected. My goal is to show the two hidden fields: cpu and ram if the 2nd option is selected in the type_id dropdown which has a value of 2. I've also made sure to include in the head of the page. But when I select option 2 or any other one nothing happens and the fields remain hidden. Can anyone see what the problem may be?

<div class="products form">
 <script >
    $('#ProductTypeId').change(function(){
      if($(this).value == '2'){ // or this.value == '2'
        $('#ProductCpu').show();
        $('#ProductRam').show();
      }
    });
 </script>
 <?php echo $this->Form->create('Product');?>
    <fieldset>
        <legend><?php echo __('Add Device'); ?></legend>
    <?php
        echo $this->Form->input('type_id');
        echo $this->Form->input('category_id', array('label' => 'Vendor'));
        echo $this->Form->input('subcategory_id', array('label' => 'Model'));
        echo $this->Form->input('location', array('label' => 'Location'));
        //echo $this->Form->input('sku', array('label' => 'Asset Tag'));
        echo $this->Form->input('mac', array('label' => 'MAC/AssetTag'));
        echo $this->Form->input('description', array('label' => 'Notes'));
        //echo $this->Form->input('name', array( 'value' => data['type_id']  , 'type' => 'hidden'));
        echo $this->Form->input('cpu', array( 'type' => 'hidden'));
        echo $this->Form->input('ram', array( 'type' => 'hidden'));
        // echo $this->Form->input('Tag');
    ?>
    </fieldset>
 <?php echo $this->Form->submit(__('Submit'));?>
 <?php echo $this->Html->link(__('Cancel'), array('action' => 'index'));?>
 <?php echo $this->Form->end();?>
</div>

Rendered HTML

        <div class="products form">
         <script>
            $('#ProductTypeId').change(function(){
              if($(this).val() == '2'){ // or this.value == '2'
                $('#ProductCpu').show();
                $('#ProductRam').show();
              }
            });
         </script>
        <form accept-charset="utf-8" method="post" id="ProductAddForm" action="/products/add"><div style="display:none;"><input type="hidden" value="POST" name="_method"></div>    <fieldset>
                <legend>Add Device</legend>
            <div class="input select"><label for="ProductTypeId">Type</label><select id="ProductTypeId" name="data[Product][type_id]" style="min-width: 70px;">
        <option value="5">AP</option>
        <option value="4">Gateway</option>
        <option value="3">Modem</option>
        <option value="2">Laptop</option>
        <option value="1">Router</option>
        </select></div><div class="input select"><label for="ProductCategoryId">Vendor</label><select id="ProductCategoryId" name="data[Product][category_id]" style="min-width: 70px;">
        <option value="11">Apple</option>
        <option value="1">Arris</option>
        <option value="13">BelAir</option>
        <option value="3">Cisco</option>
        </select></div><div class="input select"><label for="ProductSubcategoryId">Model</label><select id="ProductSubcategoryId" name="data[Product][subcategory_id]" style="min-width: 70px;">
        <option value="30">BELAIR20E-11</option>
        <option value="20">CG3000D</option>
        <option value="28">CG3000DCR</option>
        <option value="1">CM820A</option>
        </select></div>
    <div class="input text"><label for="ProductLocation">Location</label><input type="text" id="ProductLocation" maxlength="100" name="data[Product][location]"></div>
    <div class="input text"><label for="ProductMac">MAC/AssetTag</label><input type="text" id="ProductMac" maxlength="100" name="data[Product][mac]"></div>
    <div class="input textarea"><label for="ProductDescription">Notes</label><textarea id="ProductDescription" rows="6" cols="30" name="data[Product][description]"></textarea></div>
<input type="hidden" id="ProductCpu" name="data[Product][cpu]">
<input type="hidden" id="ProductRam" name="data[Product][ram]"> </fieldset>
<div class="submit"><input type="submit" value="Submit"></div><a href="/products">Cancel</a></form></div>

Have you tried putting your script inside `$(document).ready()`? The problem may be that the script is in your document before the form is output. By wrapping the script in document.ready, the eventlistener is created when the whole document is loaded. See here for more information: http://docs.jquery.com/Tutorials:Introducing_$(document).ready() — thaJeztah, Mar 01 '13 at 21:15

score 1 · Answer 1 · answered Mar 01 '13 at 20:47

1

You must to select selected option with jQuery

$('#ProductTypeId').change(function () {
    var selectedItem = $(this).children('option:selected');
    if (selectedItem.val() == '2') { // or $(this).attr('value')
        $('#ProductCpu').show();
        $('#ProductRam').show();
    }
});

answered Mar 01 '13 at 20:47

d.danailov

9,594
4
51
36

This looks like it should work but the two hidden input fields still stay hidden. I just cant figure out why... – rubyme8 Mar 01 '13 at 21:03

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

With jQuery, you want $(this).val() to retrieve the value of the input.

Check out this related post jquery function val() is not equivalent to "$(this).value="?

edited May 23 '17 at 12:12

Community

1
1

answered Mar 01 '13 at 20:34

mst1228

56
3

I just tried: if($(this).val() == '2'){ but still nothing happens, any thoughts? – rubyme8 Mar 01 '13 at 20:40
Can you post the HTML that is rendered from this? – mst1228 Mar 01 '13 at 20:44

jQuery not showing fields if specific value selected in dropdown

2 Answers2