Jquery change not working

Question

I have a select option with 2 values (Local/Import). Each value has a corresponding table that when selected table will show on the page. I used jquery change but it's not working, instead all tables are showing in the page. Please help me what's wrong with my code. Thanks.

Here's the jquery code:

<script>

$('#shiptype').change(function () {
   $('#t1,#t2').hide();
      var tableValue = $(this).val();

    if (tableValue == 1) {
        $('#t1').show();
    } else if (tableValue == 2) {
        $('#t2').show();
    }   

}); 
</script>

And here's the html part:

<form name='form1' method='post' autocomplete='on'>


<table id='tblselect' class=normal2 style='font-size:0.6em;'>
<tr><th align='right'>Shipment Type: </th>
<td><select name='shiptype' id="shiptype" onchange="">
        <option value="0"> Please select... </option>
        <option value="1"> LOCAL </option>
        <option value="2"> IMPORT </option>
      </select></td></tr>
</table>    
<br>



<table id="t1" class=normal2 style='font-size:0.6em;'>

<tr><th align='right'>Shipment Type:</th>
<td><b><input type='text' name='ship' value='LOCAL' readonly /></b></td></tr>

<tr><th align='right'>Reference Number: </th>
<td><b><input type='text' name='ref_no' value="<?php echo $localrefnumb ?>" readonly /></b></td></tr>

<tr><th align='right'>Supplier: </th>
<td><select name='supplier'>
    <option value='&nbsp;'> Please select... </option>
    <option value='Supplier 1'> Supplier 1 </option>
    <option value='Supplier 2'> Supplier 2 </option>
    <option value='Supplier 3'> Supplier 3 </option>
      </select></td></tr>

<tr><th align='right'>Description: </th>
<td><input type='text' name='description' size='70' /></td></tr>

<tr><th align='right'>PO No: </th>
<td><input type='date' name='po_no' /></td></tr>

<tr><th align='right'>Invoice Number: </th>
<td><input type='text' name='inv_number' /></td></tr>

<tr><th align='right'>Receive Qty: </th>
<td><input type='text' name='r_qty'/></td></tr>

<tr><th align='right'>No. of Boxes/Packs: </th>
<td><input type='text' name='no_boxes'/></td>

<tr><th align='right'> </th>
<td></td></tr>

<tr><th align='right'> </th>
<td align='left'><input type='submit' name='local_btn' value='SAVE' style='font-size:2em;'> &nbsp;&nbsp;&nbsp;&nbsp; <input type='submit' name='local_cancel' value='CANCEL' style='font-size:2em;'></td></tr>
</table>



<table id="t2" class=normal2 style='font-size:0.6em;'>

<tr><th align='right'>Shipment Type:</th>
<td><b><input type='text' name='ship2' value='IMPORT' readonly /></b></td></tr>

<tr><th align='right'>Reference Number: </th>
<td><b><input type='text' name='ref_no2' value="<?php echo $importrefnumb ?>" readonly /></b></td></tr>

<tr><th align='right'>Supplier: </th>
<td><select name='supplier2'>
    <option value='&nbsp;'> Please select... </option>
    <option value='Supplier1'> Supplier 1 </option>
    <option value='Supplier2'> Supplier 2 </option>
    <option value='Supplier3'> Supplier 3 </option>
      </select></td></tr>

<tr><th align='right'>Description: </th>
<td><input type='text' name='description2' size='70' /></td></tr>

<tr><th align='right'>PO No: </th>
<td><input type='date' name='po_no2' /></td></tr>

<tr><th align='right'>Invoice Number: </th>
<td><input type='text' name='inv_number2' /></td></tr>

<tr><th align='right'>AWB(Airway Bill) No: </th>
<td><input type='text' name='awb_no'/></td></tr>

    <tr><th align='right'>AWB(Airway Bill) No of Boxes/Packs: </th>
<td><input type='text' name='awb_no_boxes'/></td></tr>

<tr><th align='right'> </th>
<td></td></tr>

<tr><th align='right'> </th>
<td align='left'><input type='submit' name='import_add' value='SAVE' style='font-size:2em;'> &nbsp;&nbsp;&nbsp;&nbsp; <input type='submit' name='import_cancel' value='CANCEL' style='font-size:2em;'></td></tr>
</table>

</form>

Wrap jQuery code in `ready` handler or move the script to the end of body. Remove `onchange=""` from ` — Tushar, Jan 05 '16 at 03:19
@Kimlyn Tormes The reason is you are not hiding on document ready or load. — divy3993, Jan 05 '16 at 03:22

score 0 · Accepted Answer · answered Jan 05 '16 at 03:21

0

Your code works for me. I just added $('#t1,#t2').hide(); to hide them on load. working fiddle https://jsfiddle.net/trwsfxdv/

maybe put all your code inside a ready function:

$(document).ready(function(){
    //put all your JS code here
 });

answered Jan 05 '16 at 03:21

Cory

1,263
15
30

score 0 · Answer 2 · answered Jan 05 '16 at 03:23

You need to set your tables to display:none else they will be shown in the page, or you can also hide them on page load. Also you need to put your JS in $(document).ready function.

<table id="t1" class=normal2 style='font-size:0.6em;display:none;'>
<table id="t2" class=normal2 style='font-size:0.6em;display:none;'>

Here is a Fiddle for the same.

Jquery change not working

2 Answers2