jQuery data-id undefined

Question

I am unsure why I am not getting my data-id value its being showed as undefined

The data-id shows an int

<li>
    <input style="width:100%;" placeholder="Page Title" id="post_title" onclick="urlCheck()" dataid="<?php echo($website_id);?>" name="post_title" type="text" value="<?php echo set_value('post_title', $post['post_title']); ?>" />
    <?php echo form_error('post_title'); ?>
</li>

JS:

function urlCheck() {

    $(".postForm").on('click', '#post_title', function (e) {
        var id = $('#post_title').attr("data-id");

        console.log(id);

        e.preventDefault();

    });
}

Answer 1

The problem is that you are using dataid instead of data-id, and to retrieve the attibute you need to use .data() instead of .attr()

change this:

<input style="width:100%;" placeholder="Page Title" id="post_title" onclick="urlCheck()" dataid="<?php echo($website_id);?>" name="post_title" type="text" value="<?php echo set_value('post_title', $post['post_title']); ?>" />

to this:

<input style="width:100%;" placeholder="Page Title" id="post_title" onclick="urlCheck()" data-id="<?php echo($website_id);?>" name="post_title" type="text" value="<?php echo set_value('post_title', $post['post_title']); ?>" />

and retrieve the data in this mode:

var id = $('#post_title').data("id");

Answer 2

Your attribute is dataid, not data-id.