how to get element value from focus-blur event in javascript

Question

I like to know how to get value from element (using click event) triggered in focus-blur event. I create icon picker which like jQuery datepicker. Here the code, but when I click the icon, date picker element hide without give the value.

PHP code

<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/>
<div id="iconPicker" class="iconpicker dropdown-menu">
    <div class="iconpicker-wrapper">
        <table class="dt-icons">
        <?php
        foreach (array_chunk($icons, 5, true) as $icon_cunk) {
            echo '<tr>';
            foreach($icon_cunk as $key => $ico) {
                echo '<td data-value="'. $key .'"><i class="' . $key .'"></i></td>';
            }
            echo '</tr>';
        }
        ?>
        </table>
    </div>
</div>

Javascript

$("#contentIcon").keypress(function (e) {
    e.preventDefault();
});

$(document).on('click', '#iconPicker table.dt-icons td', function () {
    $('#contentIcon').empty();
    var _dtself = $(this);
    document.getElementById("contentIcon").value = _dtself.data('value');
});

$('#contentIcon').focus(function() {
    $('#iconPicker').show();            
}).blur(function() {
    $('#iconPicker').hide();
});

Update

#iconPicker is a hidden (display: none) element, used to choose icon. It will be shown when user focus on #contentIcon input field and will be hidden back when blur event triggered. If I remove $('#iconPicker').hide(); in blur even handler part, then (I format this code, thanks to @Reddy)

$(document).on('click', '#iconPicker table.dt-icons td', function () {
    $("#contentIcon").val($(this).data('value'));
});

can be triggered and the value placed to #contentIcon input field. But, #iconPicker not hidden back. If I used $('#iconPicker').hide(); in click event handler, the #iconPicker will not hide if user not choose icon.

update

here the example jsfiddle.net

Answer 1

Try this; However, your code is somewhat unclear.

$("#contentIcon").keypress(function (e) {
    e.preventDefault();
});

$(document).on('click', '#iconPicker table.dt-icons td', function () {
    $('#contentIcon').empty();
    var _dtself = $(this);
    document.getElementById("contentIcon").value = _dtself.data('value');
});

$('#contentIcon').focus(function() {
    $('#contentIcon').show();
    console.log($('#iconPicker').val());            
}).blur(function() {
    $('#contentIcon').hide();
    console.log($('#iconPicker').val());
});

Answer 2

You can refactor the code into single line as below. However this is same as what you have now.

$(document).on('click', '#iconPicker table.dt-icons td', function () {
  $("#contentIcon").val($(this).data('value'));
});

$(this).data('value') is the right way to do it, however if this is not working for you for some reason then you can use attr to fetch any attribute value like below

$(this).attr('data-value')

Answer 3

I solve this problem by implement @CMS' answer . With some modification here the codes.

PHP's

<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/>
<div id="iconPicker" class="iconpicker dropdown-menu">
    <div class="iconpicker-wrapper">
        <table class="dt-icons">
            <?php
            $a = 0;
            foreach (array_chunk($icons, 5, true) as $icon_cunk) {
                echo '<tr>';
                foreach($icon_cunk as $key => $ico) {
                    if ($a == 0) {
                        echo '<td><a class="action-placement choosed-icon" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>';
                    }else {
                        echo '<td><a class="action-placement" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>';
                    }
                    $a++;
                }
                echo '</tr>';
            }
            ?>
        </table>
    </div>
</div>

Javascript's

$(document).on('keypress keydown', '#contentIcon', function (e) {
    e.preventDefault();
});

document.onclick = function (e) {
    e = e || window.event;
    var element = e.target || e.srcElement;

    if (element.id !== "contentIcon" && element.tagName !== "A" && element.className !== "action-placement" 
            && element.tagName !== "I" && element.className !== "icon-placement") {
        $('#iconPicker').hide();
    }
};

$(document).on('click', '#iconPicker table.dt-icons td a', function () {
    $(".choosed-icon").removeClass("choosed-icon");
    $(this).attr("class", "choosed-icon");

    $("#contentIcon").val($(this).data('value'));
});

$('#contentIcon').on('click', function () {
    $('#iconPicker').show();
    $('#iconPicker').focus();
});

Here the demo .