hide / show fields based on input value

Question

I am trying to hide the div class " hideme" based on value of "full_day" if the value of "full_day" = 1, then the div class "hide me" must slide down, if not, then div class hideme must not be visible. what am I doing wrong

(I only used the section: hideme: ("Hello Hideme") as an example to work with - in time this will be replaced with other input fields, such as checkboxes, and radio buttons)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Conference Form</title>



<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link href="css/jqueryui.css" rel="stylesheet" type="text/css" />

<body>

<div id="wrapper">
<div id="header"></div>

<table width="899" border="1" align="left" cellpadding="1">
  <form action="" method="get" name="myform">

  <tr>
    <td width="275"><label>Company Name</label></td>
    <td width="180"><input type="text" name="companyname" id="companyname" /></td>
    <td width="27">&nbsp;</td>
    <td width="223">Enquiry Date</td>
    <td width="160"><input type="text" name="enquiry_date" id="enquiry_date" class="datepicker" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Conference Date In</td>
    <td><input type="text" name="conference_date_in" id="conference_date_in" class="datepicker" /></td>
    <td>&nbsp;</td>
    <td>Conference Date Out</td>
    <td><input type="text" name="conference_date_out" id="conference_date_out" class="datepicker" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>Total Days</td>
    <td><input type="text" name="total_days" id="total_days" /></td>
  </tr>
  <tr>
    <td>Number of Delegates</td>
    <td><input type="text" name="no_of_delegates" id="no_of_delegates" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Accommodation:</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><p>Check in Date</p></td>
    <td><input type="text" name="check_in_date" id="check_in_date" class="datepicker" /></td>
    <td><p>&nbsp;</p></td>
    <td><p>Check out Date</p></td>
    <td><p>
      <input type="text" name="check_out_date" id="check_out_date" class="datepicker" />
        </p></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>Total Days Accommodation</td>
    <td><input type="text" name="total_days_acc" id="total_days_acc" /></td>
  </tr>
  <tr>
    <td>Number of Rooms:</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Single</td>
    <td><input type="text" name="no_of_rooms_single" id="no_of_rooms_single" /></td>
    <td>&nbsp;</td>
    <td>Double / Twin</td>
    <td><input type="text" name="no_of_rooms_double" id="no_of_rooms_double" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Contact Person</td>
    <td><input type="text" name="contact_person" id="contact_person" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Telephone Number</td>
    <td><input type="text" name="tel_no" id="tel_no" /></td>
    <td>&nbsp;</td>
    <td>Fax Number</td>
    <td><input type="text" name="fax_no" id="fax_no" /></td>
  </tr>
  <tr>
    <td>Cell Number</td>
    <td><input type="text" name="cell_no" id="cell_no" /></td>
    <td>&nbsp;</td>
    <td>Email</td>
    <td><input type="text" name="email" id="email" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Full Day Conference @ R260.00 p/p</td>
    <td><input type="text" name="full_day" id="full_day" /></td>
    <td>&nbsp;</td>
    <td>Total Cost Full Day</td>
    <td><input type="text" name="total_full" id="total_full" readonly="readonly" /></td>
  </tr>
  <tr>
    <td>Half Day Conference @ R240.00 p/p</td>
    <td><input type="text" name="half_day" id="half_day" /></td>
    <td>&nbsp;</td>
    <td>Total Cost Half Day</td>
    <td><input type="text" name="total_half" id="total_half" readonly="readonly" /></td>
  </tr>
  <tr>
    <td>Single Rooms @ R480.00 p/p</td>
    <td><input type="text" name="single_rooms" id="single_rooms" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Double / Twin Rooms @ R720.00 p/p</td>
    <td><input type="text" name="double_rooms" id="double_rooms" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Data Projector @ R400.00 rental p/day</td>
    <td><input type="text" name="data_proj" id="data_proj" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td><input type="text" name="sub_total" id="sub_total" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="23">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  </form>
</table>

</div>

<div id="hideme">
Hello Hideme
</div>


<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

<script type="text/javascript">

$(function() {
    $(".datepicker").datepicker({ minDate: -0, maxDate: "+100M +10D",dateFormat: 'dd-mm-yy'})
    ({
        changeMonth: true,
        changeYear: true,
    });
        });


var enquiry_date = $.datepicker.formatDate('dd-mm-yy', new Date());
document.getElementById('enquiry_date').value = enquiry_date;

var calcDate = function() {
    var start = $('#conference_date_in').datepicker('getDate');
    var end = $('#conference_date_out').datepicker('getDate');
    var days = (end - start) / 1000 / 60 / 60 / 24 + 1;

    if(days==0) {days=1
    }
    if( days >= 0 ) {
    document.getElementById('total_days').value = days;
    } 
        }


$('#conference_date_out').change(calcDate);
$('#conference_date_in').change(calcDate);



var calcDateAcc = function() {
    var startacc = $('#check_in_date').datepicker('getDate');
    var endacc = $('#check_out_date').datepicker('getDate');
    var daysacc = (endacc - startacc) / 1000 / 60 / 60 / 24;


    if(daysacc==0) daysacc=1
    if( daysacc >= 0 ) {
    document.getElementById('total_days_acc').value = daysacc;
    } 
        }


$('#check_in_date').change(calcDateAcc);
$('#check_out_date').change(calcDateAcc);

function calculateFull()
{
    var fulldays = parseInt(document.getElementById("full_day").value);

    var no_of_delegates = parseInt(document.getElementById("no_of_delegates").value);

    var fullprice = 260;

    var resultfull =  fulldays * no_of_delegates * fullprice;

    document.getElementById("total_full").value = resultfull;
    }

    $('#full_day').change(calculateFull).keyup(calculateFull);


    function calculateHalf()
{
    var halfdays = parseInt(document.getElementById("half_day").value);

    var no_of_delegates = parseInt(document.getElementById("no_of_delegates").value);

    var halfprice = 240;

    var resulthalf =  halfdays * no_of_delegates * halfprice;

    document.getElementById("total_half").value = resulthalf;
    }

    $('#half_day').change(calculateHalf).keyup(calculateHalf);


    $(document).ready(function(){
    $("#full_day").change(function(){

        if ($(this).val() == "1" ) {

            $("#hideme").slideDown("fast"); //Slide Down Effect

        } else {

            $("#hideme").slideUp("fast");    //Slide Up Effect

        }
    });


});


</script>

_"What am I doing wrong?"_ How are supposed to know? You have not described any sort of problem. Based on what you've shown, however, there's JavaScript that is not in a ` — Matt Ball, Jun 12 '12 at 23:40
my apologies. I have added full code to include "full_day". the problem is that div class"hideme" stays hidden, and does not appear when the value of full_day is changed to "1" — user1426583, Jun 12 '12 at 23:42
So we've gone from too little code, to too much. Please learn to provide an [SSCCE](http://ssce.org). We are [not going to read all that](http://meta.stackexchange.com/a/129787/133242). — Matt Ball, Jun 12 '12 at 23:45

Daniel Hunter · Accepted Answer · 2012-06-12T23:50:08.973

2

.keyup will work also, if looking for integer remove quotes

<div id="hideme">
 Hello Hideme
</div>

<input type='text' id="full_day"/>



$("#full_day").change(function(){

    if ($('#full_day').val() == 1) {   
        $("#hideme").hide("fast"); //Slide Down Effect
    }
    else {
        $("#hideme").show("fast");    //Slide Up Effect
    }
});

Demo - http://jsfiddle.net/3XGGn/8/

edited Jun 12 '12 at 23:50

answered Jun 12 '12 at 23:44

Daniel Hunter

2,206
5
25
34

@danielHunder - thank you kindly for your reply. must the css for hideme's display be on none? I have tried to adapt code into my page but the "hideme" div is not changing when "full_day" value is changed? – user1426583 Jun 12 '12 at 23:52
it depends... first off. you may be having trouble because there is a lot of errors in your javascript – Daniel Hunter Jun 12 '12 at 23:53
http://jsfiddle.net/nyNqn/ go here then press jslint at the top and resolve the errors it shows. – Daniel Hunter Jun 12 '12 at 23:54
that is extremely helpful. I will most certainly do that immediately. thank you kindly for your help and patience. – user1426583 Jun 12 '12 at 23:57
no problem.. in case the missing radix number error stumps you: http://stackoverflow.com/questions/7818903/jslint-says-missing-radix-parameter-what-should-i-do – Daniel Hunter Jun 13 '12 at 00:00
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/12470/discussion-between-user1426583-and-daniel-hunter) – user1426583 Jun 13 '12 at 00:08

score 0 · Answer 2 · answered Jun 12 '12 at 23:41

use keyup event instead of change

$(document).ready(function(){
    $("#full_day").keyup(function(){
        if ($(this).val() == "1" ) {
            $("#hideme").slideDown("fast"); //Slide Down Effect
        } else {
            $("#hideme").slideUp("fast");    //Slide Up Effect
        }
    });
});

JsFiddle Sample http://jsfiddle.net/n2HPk/7/

hide / show fields based on input value

2 Answers2

Linked