Ed Dunn Ed Dunn - 4 months ago 66
Javascript Question

Issues with Jquery timepicker change event

I am having an issue getting jquery timepicker change event to trigger. I need to update a field immediately after selecting a time. Here is the code thus far

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Deploment Management</title>

<link rel="stylesheet" type="text/css" href="style/tabs.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.css">
<link href="http://code.jquery.com/ui/1.10.4/themes/vader/jquery-ui.css" rel="stylesheet">

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.4/jquery.timepicker.min.js"></script>

<script>
$(function(){
$('#time').timepicker({
timeFormat: 'h:mm p',
interval: 15,
dynamic: true,
dropdown: true,
scrollbar: true
});

$('#time').on('change', function() {
var x = document.getElementByName("time").value;
document.getElementById('d_time').value = "Maintenance Tonight - " +x;
});
});
</script>
</head>
<body>
<table>
<tr>
<td class="right">Scheduled Time:</td>
<td>
<input type="text" name="time" class="full" id="time" />
</td>
</tr>
<tr>
<td class="right">Email Subject:</td>
<script>
function subject() {
if (document.getElementById('default').checked) {
document.getElementById('default_subject').style.display = 'block';
document.getElementById('custom_subject').style.display = 'none';
}
else if (document.getElementById('custom').checked) {
document.getElementById('custom_subject').style.display = 'block';
document.getElementById('default_subject').style.display = 'none';
}
}
</script>
<td>
<input type="radio" onclick="javascript:subject();" id="default" name="radio" checked value="default">Default Subject
<input type="radio" onclick="javascript:subject();" id="custom" name="radio" value="custom">Custom Subject
</td>
</tr>
<tr>
<td/>
<td>
<div id="subject_field">
<div id="default_subject" style="display:block" name="default">
<input name="default" id="d_time" value="" readonly="readonly"/>
</div>
<div id="custom_subject" style="display:none" name="custom">
<input name="custom" />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>


This is abbreviated code but it should still do what I am trying to get it to do. What I need it to do is on a time select the inpute with the ID d_time should update the default value as described in the above function but for some reason I can't get it to trigger. Before I was using a select option for the time and it was working fine, this method I am clueless.

I don't use javascript or jquery often, a little help would be appreciated. I read the documentation on the change event but it didn't really help.

Thanks in advance.

Answer

You can trigger your action thanks to the "changeTime" event of timepicker.js (doc). Btw, your timepicker.js version was old. So you can try this :

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Deploment Management</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.8.6/jquery.timepicker.js"></script>
        <script>
            $('document').ready(function(){
                $('#time').timepicker();
                $('#time').on('changeTime', function() {
                    var x = $("#time").val();
                    $('#d_time').val("Maintenance Tonight - " +x);
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td class="right">Scheduled Time:</td>
                <td>
                    <input type="text" name="time" class="full" id="time" />
                </td>
            </tr>
            <tr>
                <td class="right">Email Subject:</td>
                <script>
                    function subject() {
                        if ($('#default').is(':checked')) {
                            $('#default_subject').css('display','block');
                            $('#custom_subject').css('display','none');
                        }
                        else if ($('#custom').is(':checked')) {
                            $('#custom_subject').css('display','block');
                            $('#default_subject').css('display','none');
                        }
                    }
                </script>
                <td>
                    <input type="radio" onclick="subject();" id="default" name="radio" checked value="default">Default Subject
                    <input type="radio" onclick="subject();" id="custom" name="radio" value="custom">Custom Subject
                </td>
            </tr>
            <tr>
            <td/>
            <td>
                <div id="subject_field">
                    <div id="default_subject" style="display:block" name="default">
                        <input name="default" id="d_time" value="default" readonly="readonly"/>
                    </div>
                    <div id="custom_subject" style="display:none" name="custom">
                        <input name="custom" type="text" value="custom"/>
                    </div>
                </div>
            </td>
            </tr>
        </table>
    </body>
</html>
Comments