Get id for input text value

Question

I have a autocomplete field where I need to get the database id of the displayed text to send to jQuery to update database. I don't know how to get the id of the select text.

This function gets the available values as you type, then when the text is selected it displays the text.

$(function() {
            $(".positionList").autocomplete({
                source: "get-position.php?",
                select: function( event, ui ) {
                    event.preventDefault();
                    $(".positionList").val(ui.item.value);
                }
            });
        });

This is where the input text box is:

<tr>
<td> <div contentEditable='true' class='edit' id='postionID_<?php echo $id; ?>'><input type='text' class='positionList' value='<?php echo $position; ?>' /></div></td>

When I get here I have the $id of the user to update, $position which is the name, and $positionID which is what needs to be sent to the jQuery.

This does the update and var value is empty. This variable should contain the $positionID .

$(".edit").focusout(function(){
        $(this).removeClass("editMode");

        var id = this.id;
        var split_id = id.split("_");
        var field_name = split_id[0];
        var edit_id = split_id[1];

        var value = $(this).text();

        $.ajax({
            url: 'update.php',
            type: 'post',
            data: { field:field_name, value:value, id:edit_id },
            //data: { field:field_name, value:value, id:edit_id, checked:checkedStatus },
            success:function(response){               
            }
        });

    });

Answer 1

So the problem is you are asking for the innerHTML of the input element:

<input type='text' class='positionList' value='<?php echo $position; ?>' />

The issue is the input tag is a self closing tag. This means that it is exactly the same as this:

<input type='text' class='positionList' value='<?php echo $position; ?>'></input>

This means that there is no "innerHTML" as we left it blank

So to fix this we can just change your Javascript line from:

var value = $(this).text();

To this:

var value = $(this).val();

This retrieves the "value" attribute of the input field rather than the innerHTML.