Mahmoud Saeed Mahmoud Saeed - 1 year ago 68
Javascript Question

jQuery detecting changes on two elements using keyup()


<input type="text" id="target" placeholder="">
<input type="checkbox" name="http" id="http" value="http"> http://

<div id="possible-targets">
<h4>Possible matches: </h4>


var target_value;

$(window).load(function () {

$('#target').keyup(function () {
target_value = $('#target').val();

if (target_value == '') {
} else if ($('#target-match').length == 0) {
$('#possible-targets').append('<h4><span id="target-match">' + target_value + '</span></h4>');
} else if ($('#target-match').length != 0) {

if ($('#http').prop('checked')) {
if ($('#target-match-h').length == 0) {
$('#possible-targets').append('<h4><span id="target-match-h">http://' + target_value + '</span></h4>');
} else {
$('#target-match-h').html('http://' + target_value);
} else {

Here is a JSFIDDLE:

Now when I start typing in the text input field I can see a live change in the
div, but when I click on the
checkbox it still needs to type at least one more character in the text input field to make a live change and add another possible target.

I tried to use
on both
(the text input) and
(the checkbox) but it didn't work:

$('#target, #http').keyup()

Answer Source

Create a function and pass it to event handlers.

Example Code

var yourFunc = function () {
       //Your code


As per @DavidThomas comments you can also use

$('#target, #http').on('change keyup', yourFunc)


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download