jQuery Mobile add ID and name to jQuery Mobile's listview for use in PHP

http://stackoverflow.com/questions/20663490/add-class-myclass-to-jquery-mobile-generated-input-box-in-listview http://jsfiddle.net/Palestinian/d5ur3/

by katalin_2003

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<div data-role="page" id="startseite">
    <div data-role="header" data-theme="a" id="header">
         <h1>Title</h1>

    </div>
    <!--<div data-role="main" class="ui-content">!-->
    <div data-role="tabs" id="tabs">
        <div data-role="navbar" data-iconpos="left">
            <ul>
                <li><a href="#one" data-ajax="false" class="ui-btn-active" data-icon="search">Tab</a>

                </li>
                <li><a href="#two" data-ajax="false" data-icon="location">Map</a>

                </li>
            </ul>
        </div>
        <div id="one" class="ui-body-d ui-content">
            <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="City" data-filter-theme="a" class="csa"></ul>
            <ul id="autocomplete2" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="City2" data-filter-theme="a" class="csb"></ul> <a href="#" class="ui-btn" id="send">Send</a>

            <input type="text" id="hidden" />
            <input type="text" id="hidden2" />
        </div>
        <div id="two" class="ui-body-d ui-content">Page2</div>
    </div>
</div>

JavaScript

$(document).on("pagecreate", "#startseite", function () {

    /*give each input field a name and an id*/
    $("#autocomplete").prev("form").find("input").attr("id", "field1").attr("name", "field1");
    $("#autocomplete2").prev("form").find("input").attr("id", "field2").attr("name", "field2");
    /******/

    $("#send").on("click", function () {
        var value = $("#autocomplete").prev("form").find("input").val();
        /*alert(value + " *csa*");*/
        $("#hidden").val(value);
        console.log(value);
    });

    $("#autocomplete2").prev("form").find("input").on("blur", function () {
        var value2 = $("#autocomplete2").prev("form").find("input").val();
        $("#hidden2").val(value2);
        console.log(value2);
        /*alert("dfgg");*/
    });

    $(document).on("click", "li", function () {
        var text = $(this).text();
        $(this).closest("ul").prev("form").find("input").val(text);
        $(this).closest("ul").children().addClass('ui-screen-hidden');
    });
    $("#autocomplete").on("filterablebeforefilter", function (e, data) {
        var $ul = $(this),
            $input = $(data.input),
            value = $input.val(),
            html = "";
        $ul.html("");
        if (value && value.length > 2) {
            $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
            $ul.listview("refresh");
            $.ajax({
                url: "http://gd.geobytes.com/AutoCompleteCity",
                dataType: "jsonp",
                crossDomain: true,
                data: {
                    q: $input.val()
                }
            })
                .then(function (response) {
                $.each(response, function (i, val) {
                    html += "<li>" + val + "</li>";
                });
                $ul.html(html);
                $ul.listview("refresh");
                $ul.trigger("updatelayout");
            });
        }
    });
});