jmadler / emoji-picker

Add a slick emoji selector to input fields and textareas on your website.
Other
1.31k stars 318 forks source link

How to get value of input in script? #67

Open amoghzz opened 7 years ago

amoghzz commented 7 years ago

Consider I have multiple input fields in one page and I want to catch that input data on click of enter in a script.

To check create an account and check this link: https://www.travelur.com/index.php/user/travelconnect

HTML:

<div class="travel-user-posted-box" id="comment_box_1147">
<div class="travel-seaarch-u162"><div class="media"><a class="media-left" href="http://localhost/travelur/index.php/users/406"> <img src="/travelur/extras/custom/TUvk6aKsfcwJNEjjJaRL/images/user-pick.png" class="media-object travel-peron-post-imge" alt="Sample Image"> </a>
<div class="media-body lead emoji-picker-container">

<input type="text" class="form-control comment-text-box parent-has-scroll" id="comment-form1147" onclick="showButton(1147)" placeholder="Add a comment..." data-emojiable="converted" data-id="11ab0978-db52-40a0-924a-181ca739538c" data-type="original-input" style="display: none;">

<div class="emoji-wysiwyg-editor form-control comment-text-box parent-has-scroll" data-id="11ab0978-db52-40a0-924a-181ca739538c" data-type="input" placeholder="Add a comment..." contenteditable="true" data-emoji="comment-form1147">dfgdgs df</div>

<i class="emoji-picker-icon emoji-picker fa fa-smile-o" data-id="11ab0978-db52-40a0-924a-181ca739538c" data-type="picker"></i> 

<div class="col-md-12 travel-hit-enter-comment">Hit enter to add commnent!</div></div></div></div><div class="travel-icon-u169"><div class="" id="comment_btn_1147">

<a onclick="postComment(1147)" class="btn btn-xs btn-primary uibutton confirm traavel-button-comment-u789 ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Comment</span></a></div> </div><div class="delete_preloader" id="post_comment_1147"></div></div>

SCRIPT:

<script type="text/javascript">
    $(document).ready(function() {
        $(".emoji-wysiwyg-editor").keydown(function (e) {   
                // alert(e.keyCode)
            if (e.keyCode == 13) {
                    // alert(e.keyCode)
                var mystring = $(this).attr('data-emoji');
                id = mystring.replace('comment-form', '');
                id = $.trim(id);
                a = id;
                var b = $.trim($("#comment-form" + a).val());
                var c = $(this).attr('data-emoji');
                // var b = document.getElementById("comment-form" + a);
                alert(c);
                if (b != '') {

                    $(this).html('');
                    $.ajax({
                        type: "POST",
                        url: domain + "post/comment",
                        data: "id=" + a + "&comment=" + (b),
                        cache: false,
                        success: function(b) {

                            count = $('#count_comments_' + a).html();

                            $("#comments-list" + a).append(b);

                            $('#count_comments_' + a).html(Number(count) + Number(1));
                            $("#comment-form" + a).val("");

                        }
                    });
                }
            }
        });
        $('#add_post').on('click', function() {
            $('#multiple_upload_form').ajaxForm({
                target: '#wallposts',
                beforeSubmit: function(e) {},
                success: function(data) {
                    $('#message').val('');
                },
                error: function(e) {}
            }).submit();
        });
    });
</script>